Done

unknown · unknown · commit 19480a8dd8d8 · 2025-08-26T13:04:33.000+05:30
diff --git a/index.html b/index.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Github Users</title>
+    <link rel="stylesheet" href="./style.css">
+</head>
+
+<body>
+    <div class="container">
+        <h1>Github Users</h1>
+        <input type="text" placeholder="Search by username" id="inp">
+        <div class="users">
+
+        </div>
+    </div>
+
+    <script src="./script.js"></script>
+</body>
+
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,36 @@
+
+
+let getApi = async () => {
+    let a = await fetch("https://api.github.com/users");
+
+    let data = await a.json();
+
+    let users = document.querySelector(".users");
+
+    let inp = document.getElementById("inp");
+
+    data.map((ele) => {
+        let box = document.createElement("div");
+        box.classList.add("box")
+        box.innerHTML = `
+                    <img src="${ele.avatar_url}" alt="" height="80px" width="80px">
+                    <h1>${ele.login}</h1>
+                    <a href="${ele.html_url}">View Profile</a>`
+        users.appendChild(box);
+
+        inp.addEventListener("keyup", () => {
+            box.style.display = "none";
+            if (ele.login.includes(inp.value)) {
+                box.style.display = "flex";
+            }
+        })
+
+
+    })
+
+
+
+
+}
+
+getApi();
diff --git a/style.css b/style.css
@@ -0,0 +1,67 @@
+ * {
+            padding: 0%;
+            margin: 0%;
+            box-sizing: border-box;
+        }
+
+        .container {
+            height: 100vh;
+            overflow: auto;
+            width: 100vw;
+            background-color: azure;
+            border: 1px solid;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            gap: 10px;
+        }
+
+        #inp {
+            padding: 10px;
+            height: 30px;
+            width: 90%;
+            border-radius: 5px;
+            border: 2px solid blue;
+        }
+
+        #inp:focus {
+            border: 2px solid blue;
+        }
+
+        .users {
+            width: 90%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex-wrap: wrap;
+            gap: 10px;
+        }
+
+        .box {
+            height: 150px;
+            gap: 3px;
+            width: 200px;
+            background-color: white;
+            border-radius: 10px;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            box-shadow: 0 0 2px 2px rgb(208, 208, 208);
+            justify-content: center;
+        }
+
+        img {
+            border-radius: 50%;
+        
+        }
+
+        .box h1 {
+            font-size: medium;
+        }
+
+        a {
+            color: blue;
+            text-decoration: none;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            font-weight: bold;
+        }
