update the code

Author: tajulafreen

Source-Code/GithubProfileFinder/index.html

@@ -24,7 +24,7 @@
           placeholder="Enter Github UserName"
           class=""
         />
-        <div id="search" onclick="getUser()">Search User</div>
+        <button id="search">Search User</button>
       </div>
 
       <div class="profile-card">

Source-Code/GithubProfileFinder/script.js

@@ -1,49 +1,47 @@
-//  API USED => https://api.github.com/user/user_name
-
-let input_user = document.querySelector("#input");
+const inputUser = document.querySelector("#input");
 
 const userImg = document.querySelector(".main-info");
-// const name = document.querySelector("#name");
-// const userName =document.querySelector("#username");
+const search = document.getElementById("search");
 const bio = document.querySelector("#bio");
 const repos = document.querySelector("#repo");
 const followers = document.querySelector("#followers");
 const following = document.querySelector("#following");
 
-const fetchUser = (user_name) => {
-  fetch(`https://api.github.com/users/${user_name}`)
+const fetchUser = (username) => {
+  fetch(`https://api.github.com/users/${username}`)
     .then((data) => data.json())
     .then((jsonData) => {
-      if (jsonData.message == "Not found") {
+      if (jsonData.message === "Not Found") {
         alert("User Not Found");
         return;
-        // console.log("Error" + jsonData.message);
       } else {
         userImg.innerHTML = `
             <img src="${jsonData.avatar_url}" alt="avatar" id="prof-img">
             <span class="name" id="name">${jsonData.name}</span>
             <a href="${jsonData.html_url}" id="username">@${jsonData.login}</a>
             `;
-        bio.innerHTML = jsonData.bio;
+        bio.innerHTML = jsonData.bio ? jsonData.bio : "No bio available.";
         repos.innerHTML = jsonData.public_repos;
         followers.innerHTML = jsonData.followers;
         following.innerHTML = jsonData.following;
       }
     })
     .catch((err) => {
-      console.log("Catch" + err.message);
+      console.log("Catch: " + err.message);
     });
 };
 
 const getUser = () => {
-  let user_name = input_user.value.trim();
-  //  trim will replace before and after spaces
+  let username = inputUser.value.trim();
 
-  if (user_name.length == 0) {
-    alert("Please enter a valid github username");
+  if (username.length === 0) {
+    alert("Please enter a valid GitHub username");
   } else {
-    fetchUser(user_name);
+    fetchUser(username);
   }
 
-  input_user.value = " ";
+  inputUser.value = "";
 };
+
+// Attach event listener to the search button
+search.addEventListener("click", getUser);

Source-Code/GithubProfileFinder/style.css

@@ -11,28 +11,22 @@ body{
     background-position: center;
     background-blend-mode: darken;
 }
-.container{
-    width: 100%;  
-}
+
 
 .search-container{
-    position: relative;
+    
     width: 550px;
     height: 50px;
     background-color: #fff;
-    border-radius: 15px;
-    overflow: hidden;
     display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
+    justify-content: space-evenly;
     margin: 0 auto;
-    margin-top: 50px;  
+    margin-top: 50px; 
     box-shadow: 0 3px 10px gray;
 }
 
 #input{
-    width: 100%;
+    width: 70%;
     height: 100%;
     background-color: #fff;
     border: none;
@@ -42,14 +36,9 @@ body{
 }
 
 #search{
-    width: 160px;
+    
     height: 100%;
-    position: absolute;
-    top: 0;
-    right: 0;
-    display: flex;
-    justify-content: center;
-    align-items: center;
+    width: 30%;
     background-color: #000;
     color : white;
     cursor: pointer;
@@ -60,8 +49,7 @@ body{
     padding: auto;
     width: 500px;
     background-color: rgba(255,255,255,0.6);
-    margin: 0 auto;
-    margin-top: 30px;
+    margin: 25px  auto;
     border-radius: 15px;
     overflow: hidden;
     margin-bottom: 15px;
@@ -104,7 +92,7 @@ a{
 .bio{
     width: 100%;
     text-align: center;
-    padding: 20px 0;
+    padding: 20px 10px;
     font-size: 23px;
 }
 
@@ -144,7 +132,7 @@ p{
         overflow: hidden;
         margin-bottom: 15px;
         box-shadow: 0 3px 10px gray;
-        font-family: 'Lobster Two', cursive;
+        font-family: 'Lobster Two';
     }
 }