add week-12 assignment

yuk23003 · Apr 13, 2024 · 1eb2371 · 1eb2371
1 parent ae5f3fa
commit 1eb2371
Show file tree

Hide file tree

Showing 3 changed files with 110 additions and 0 deletions.
diff --git a/week-12/index.html b/week-12/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Assignment-12</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="container">
+        <h1>Uconn Github User Search</h1>
+        <input type="text" id="searchInput" class="form-control" placeholder="Enter a username">
+        <button class="btn btn-primary" onclick="searchUsers()">Search</button>
+        <p id="resultsCount"></p>
+        <div id="results"></div>
+    </div>
+
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/week-12/script.js b/week-12/script.js
@@ -0,0 +1,38 @@
+function searchUsers() {
+    const searchInput = document.getElementById('searchInput').value;
+    if (searchInput.length < 1) {
+    alert('Please enter a username');
+    return;
+    }
+
+    const apiUrl = `https://github.uconn.edu/api/v3/search/users?q=${searchInput}`;
+
+    fetch(apiUrl)
+    .then(response => response.json())
+    .then(data => {
+    const results = document.getElementById('results');
+    const resultsCount = document.getElementById('resultsCount');
+
+    results.innerHTML = '';
+    resultsCount.innerText = `Found ${data.total_count} result(s).`;
+
+        data.items.forEach(user => {
+            const userElement = document.createElement('div');
+            userElement.innerHTML = `
+                <div class="card">
+                    <img src="${user.avatar_url}" class="card" alt="Avatar">
+                    <div class="card-body">
+                    <h5 class="card-title">${user.login}</h5>
+                    <a href="${user.html_url}" class="btn btn-primary" id="profilebtn">View Profile</a>
+                    </div>
+                </div>
+            `;
+            results.appendChild(userElement);
+        });
+    })
+    .catch(error => {
+    console.error('Error:', error);
+    alert('An error occurred. Please try again.');
+    });
+    }
+
diff --git a/week-12/style.css b/week-12/style.css
@@ -0,0 +1,52 @@
+body {
+    font-family: Arial, sans-serif;
+    margin: 10%;
+    }
+
+input{
+    padding: 10px;
+    border-radius: 10px;
+    width: 200px;
+}
+
+button{
+    padding: 10px;
+    border-radius: 10px;
+}
+
+#results{
+    display: flex;
+    flex-wrap: wrap;
+    float: left;
+}
+
+.card{
+    border: 2px solid;
+    border-radius: 20px;
+    margin: 10px;
+    padding: 20px;
+    align-items:center;
+}
+
+img{
+    width: 280px;
+    height: 280px;
+    color:rgb(0, 0, 0);
+    border-radius: 20px;
+}
+
+
+h5{
+    text-align: left;
+    font-size: 20px;
+}
+
+#profilebtn{
+    text-align: left;
+    padding: 5px;
+    border: 2px solid;
+    border-radius: 10px;
+    margin-bottom: 30px;
+    text-decoration: none;
+}
+