modified search

maa17019 · Mar 29, 2021 · 11d4a36 · 11d4a36
1 parent 1913d90
commit 11d4a36
Show file tree

Hide file tree

Showing 6 changed files with 93 additions and 8 deletions.
diff --git a/week-10/search-utility/.DS_Store b/week-10/search-utility/.DS_Store
diff --git a/week-10/search-utility/img/.DS_Store b/week-10/search-utility/img/.DS_Store
diff --git a/week-10/search-utility/img/avatar.png b/week-10/search-utility/img/avatar.png
diff --git a/week-10/search-utility/img/logo.png b/week-10/search-utility/img/logo.png
diff --git a/week-10/search-utility/index.html b/week-10/search-utility/index.html
@@ -5,25 +5,70 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <title>Search Utility</title>
-
+    <!--Bootstrap link-->
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
+    <!--CSS-->
     <style>
         body{
             background-color: lightgray;
         }
+        nav{
+          height: 100px;
+        }
+        .container-fluid{
+          margin-left: 2%;
+        }
+        .d-inline-flex{
+          margin-right:1%
+        }
+        .alert-danger{
+          text-align: left;
+          text-indent: 1.5%;
+        }
+        .card{
+          margin: 3%;
+          display:inline-flex;
+          max-width: 200px;
+          font-size: 2rem;
+          color: black;
+          padding: px;
+
+
+
+        }
+        #number{
+          margin-left: 3%;
+          margin-top: 1%;
+          font-weight: 100;
+        }
+
     </style>
 </head>
 <body>
-
-        <nav class="navbar navbar-dark bg-dark">
+      <!--Form (Bootstrap)-->
+       <nav class="navbar navbar-dark bg-dark">
         <div class="container-fluid">
-          <a class="navbar-brand">GitHub Enterprise</a>
-          <form class="d-flex">
+          <a class="navbar-brand" href="https://github.uconn.edu/">GitHub Enterprise</a>
+
+          <form class="d-inline-flex">
             <input class="form-control me-2" type="search" placeholder="Search for user" aria-label="Search">
             <button class="btn btn-primary" type="submit" >Search</button>
           </form>
         </div>
+
       </nav>
+
+      <!--<div class="alert alert-danger" role="alert">
+        Search not found. Try again.
+      </div>-->
+
+
+      <div id="number"></div>
+
+      <div id="results">
+      <div class="card">
+      </div>
+      </div>
 
 
 
@@ -34,12 +79,11 @@
 
 
 
-    <!-- Optional JavaScript -->
     <!-- jQuery first, then Popper.js, then Bootstrap JS -->
     <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
-
-
+    <!--Main JavaScript link-->
+    <script src="js/main.js"></script>
 </body>
 </html>
diff --git a/week-10/search-utility/js/main.js b/week-10/search-utility/js/main.js
@@ -0,0 +1,41 @@
+
+    const search = 'https://github.uconn.edu/api/v3/search/users?q=';
+
+
+    function numResults(n) {
+      if (n < 1) {
+        return "Nothing found. Try another search.";
+      } else if (n === 1) {
+        return "Found 1 result";
+      } else {
+        return "Found " + n + " results:";
+      }
+    }
+    let form =  document.querySelector("button.btn-primary").
+    form.addEventListener('submit', function(event) {
+      event.preventDefault();
+
+      if (event.target[0].value.length === 0) {
+        document.getElementById("number").innerHTML = "No search found. Try again."
+      } else 
+
+      return fetch(search + event.target[0].value)
+        .then(response => response.json())
+        .then(data => { 
+
+          var items = data["total_count"];
+
+
+          document.getElementById("number").innerHTML = numResults(items);
+
+
+          document.getElementById("results").innerHTML = "";
+
+
+          for (i = 0; i < items; i++) {
+            document.getElementById("results").innerHTML += '<a href="' + data["items"][i].html_url + '" class="card"><img src="' + data["items"][i].avatar_url + '" alt="' + data["items"][i].login + ' Avatar"><h2>' + data["items"][i].login + '</h2></a>';
+          }
+
+        }) 
+        .catch(error => console.error(error))
+    })