Week 10 Rough Draft

plb18001 · Apr 4, 2022 · 6d28414 · 6d28414
1 parent 57c2045
commit 6d28414
Show file tree

Hide file tree

Showing 4 changed files with 491 additions and 0 deletions.
diff --git a/week-10/index.html b/week-10/index.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Week-10 API Practice</title>
+    <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">
+
+
+    <script src="main.js"></script>
+    <script src="users.json"></script>
+</body>
+</html>
diff --git a/week-10/main.js b/week-10/main.js
@@ -0,0 +1,34 @@
+form = document.querySelector("#form");
+matches = document.querySelector("#matches");
+id = document.querySelector("#id");
+img = document.querySelector("#img");
+error = document.querySelector("#error");
+textbox = document.querySelector("#textbox");
+
+form.addEventListener("submit", function checkLength(event) {
+    if(textbox.value.length >= 1 && textbox.value.length <= 100){
+        event.preventDefault();
+        fetch('users.json').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) {
+
+            }
+        })
+
+    }
+    else{
+        error.style.display = "block";
+        event.preventDefault();
+    }
+}) 
diff --git a/week-10/style.css b/week-10/style.css
@@ -0,0 +1,9 @@
+body {
+    display:flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+#error, #matches, #id, #img {
+    display: none;
+}