Uconn Github User Search API

plb18001 · Apr 5, 2022 · 4ed1575 · 4ed1575
1 parent 6d28414
commit 4ed1575
Show file tree

Hide file tree

Showing 3 changed files with 100 additions and 24 deletions.
diff --git a/week-10/index.html b/week-10/index.html
@@ -8,18 +8,23 @@
     <link rel="stylesheet" href="style.css">
 </head>
 <body>
-    <h1>GITHUB USER SEARCH</h1>
-    <form action="" method="GET" id="form">
-        <input id="textbox" type="text" placeholder="Search User">
-        <button type="submit">Search</button>
-
-    <p id="error">Input must be at least 1 character long!</p>
-    <h3 id="matches">Number of matches found:</h3>
-    <p id="id">ID:</p>
-    <img id="img" src="" alt="Profile Picture">
+    <div class="container">  
+        <div id="menu">
+            <h1> UCONN GITHUB USER SEARCH</h1>
+            <form id="form">
+                <input id="textbox" type="text" placeholder="Search User">
+                <button type="submit">Search</button>
+
+            <p id="error">Input must be at least 1 character long!</p>
+            <p id="error2">No Results Found!</p>
+        </div>    
+        <h2 id="matches"></h2>
+        <div id="results">
 
+        </div>
+    </div> 
 
+    <p id="footer">By: Paolo Bautista</p>
     <script src="main.js"></script>
-    <script src="users.json"></script>
 </body>
 </html>
diff --git a/week-10/main.js b/week-10/main.js
@@ -4,30 +4,40 @@ id = document.querySelector("#id");
 img = document.querySelector("#img");
 error = document.querySelector("#error");
 textbox = document.querySelector("#textbox");
+body = document.querySelector('#results');
 
 form.addEventListener("submit", function checkLength(event) {
     if(textbox.value.length >= 1 && textbox.value.length <= 100){
         event.preventDefault();
-        fetch('users.json').then(function (response) {
+        fetch('https://github.uconn.edu/api/v3/search/users?q=' + textbox.value).then(function (response) {
             return response.json();
         }).then(function (obj) {
             console.log(obj)
-            error.style.display = "none";
-            matches.style.display = "block";
-            id.style.display = "block";
-            img.style.display = "block";
-
-            console.log(obj['items'][0]['login'])
-            console.log(obj['total_count'])
-            login = obj.items
-            console.log(login)
-            for(user of obj.items) {
-
+            if (obj['total_count'] == 0){
+                error2.style.display = "block";
+                error.style.visibility = "hidden";
+                error.style.display = "none";
+                document.querySelector('#results').style.padding = "0"
+            } else{
+                document.querySelector('#menu').style.top = "0%"
+                document.querySelector('#menu').style.position = "inherit"
+                document.querySelector('#results').style.padding = "1em"
+                error2.style.display = "none";
+                error.style.visibility = "hidden";
+                error.style.display = "block";
+                matches.style.display = "block";
+                matches.innerHTML = "Number of matches found: " + obj['total_count']
+                body.innerHTML = null;
+                for(user of obj.items) {
+                    body.innerHTML += `<div id="profile"> <a target="_blank" rel="noopener noreferrer" href="${user.html_url}"><img id="img" src="${user.avatar_url}" width="100" height="100s" alt="Profile Picture"></a> <a target="_blank" rel="noopener noreferrer" href="${user.html_url}"><p id="login">${user.login}</p></a> <hr id="line"></div>` 
+                }
             }
+
         })
 
     }
     else{
+        error.style.visibility = "visible";
         error.style.display = "block";
         event.preventDefault();
     }

diff --git a/week-10/style.css b/week-10/style.css
@@ -1,9 +1,70 @@
-body {
+.container, #menu {
     display:flex;
     flex-direction: column;
     align-items: center;
 }
+html{
+    background-color: black;
+}
+
+#matches {
+    display: none;
+}
 
-#error, #matches, #id, #img {
+#error {
+    color: red;
+    visibility:hidden;
+}
+#error2 {
+    color: red;
     display: none;
+    padding-left: 3em;
+}
+#matches, #login {
+    color: whitesmoke;
+}
+#menu {
+    background-color:burlywood;
+    padding: 1em;
+    padding-top: 2em;
+    border-radius: 1em;
+    position: absolute;
+    top: 32%;
+}
+#results {
+    background-color: grey;
+    display: none;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+}
+#line {
+    width: 3em;
+}
+#profile {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    margin: 1em;
+}
+#login {
+    margin-bottom: 0;
+}
+a {
+    text-decoration: none;
+}
+#login:hover {
+    background-color:rgb(255, 252, 240);
+    color: black;
+}
+#img:hover {
+    box-shadow: 10px 10px 5px;
+}
+
+
+
+#footer {
+    color: white;
+    display: flex;
+    justify-content: center;
 }