Merge pull request #1054 from Akshithsaai/compare

Added a feature to search through github
recodehive · Oct 24, 2024 · 321d5cc · 321d5cc
2 parents 3053171 + aee04bb
commit 321d5cc
Show file tree

Hide file tree

Showing 3 changed files with 147 additions and 34 deletions.
diff --git a/pages/compare.html b/pages/compare.html
@@ -161,27 +161,22 @@
 
     <div class="container">
         <h1>GitHub Contributor Comparison</h1>
-
-        <div class="form-group">
-            <label for="contributorSelect1">Contributor 1:</label>
-            <select id="contributorSelect1" class="select">
-                <option value="">Select Contributor 1</option>
-            </select>
-        </div>
 
-        <div class="form-group">
-            <label for="contributorSelect2">Contributor 2:</label>
-            <select id="contributorSelect2" class="select">
-                <option value="">Select Contributor 2</option>
-            </select>
-        </div>
-
-        <button id="submitBtn" class="button">Submit</button>
-        <div id="loader" class="hidden">
-          <div class="spinner"></div>
+        <div class="search-bar-components">
+          <div class="form-group">
+            <input id="username1" placeholder="Enter Username" type="text" oninput="fetchGitHubUsers(this.value,1)" required/>
+            <div class="list" id="resultList1" style="border: 1px solid #ddd; margin-top: 10px; display: none;"></div>
+          </div>
+          <div class="form-group">
+            <input id="username2" placeholder="Enter Username" type="text" oninput="fetchGitHubUsers(this.value,2)" required/>
+            <div class="list" id="resultList2" style="border: 1px solid #ddd; margin-top: 10px; display: none;"></div>
+          </div>
+          <button id="submitBtn" class="button">Compare</button>
+          <div id="loader" class="hidden">
+            <div class="spinner"></div>
+          </div>
         </div>
-
-
+
         <div id="comparisonTable" class="comparison hidden">
             <h2>Contributor Comparison</h2>
             <table>

diff --git a/scripts/compare.js b/scripts/compare.js
@@ -25,15 +25,16 @@ document.addEventListener("DOMContentLoaded", function () {
                 select2.appendChild(option.cloneNode(true));
             });
         });
-
+    
     document.getElementById('submitBtn').addEventListener('click', function () {
-        const login1 = document.getElementById('contributorSelect1').value;
-        const login2 = document.getElementById('contributorSelect2').value;
-
-        document.getElementById('submitBtn').classList.add('hidden');
-        document.getElementById('loader').classList.remove('hidden');
+        const login1 = document.getElementById('username1').value;
+        const login2 = document.getElementById('username2').value;
 
         if (login1 && login2 && login1 !== login2) {
+
+            document.getElementById('loader').classList.add('hidden');
+            document.getElementById('submitBtn').classList.remove('hidden');
+
             Promise.all([
                 fetch(`https://api.github.com/users/${login1}`, {
                     headers: {
@@ -57,9 +58,9 @@ document.addEventListener("DOMContentLoaded", function () {
                 }).then(response => response.json()),
             ])
                 .then(([data1, data2,repoData1,repoData2]) => {
-                    console.log(data1,data2,repoData1);
 
-                    let stars1=0,stars2 = 0
+                    let stars1=0,stars2 = 0;
+
                     for( var i = 0;i<repoData1.length;i+=1)
                     {
                         stars1 += repoData1[i].watchers_count
@@ -122,8 +123,6 @@ document.addEventListener("DOMContentLoaded", function () {
                 })
                 .catch((error) => {
                     console.error("Error:", error);
-                    document.getElementById('loader').classList.add('hidden');
-                    document.getElementById('submitBtn').classList.remove('hidden');
                 });
         } else {
             alert("Please select two different contributors.");
@@ -302,3 +301,63 @@ document.addEventListener("DOMContentLoaded", function () {
         });
     }
 });
+
+async function fetchGitHubUsers(query,number) {
+    const headers = {
+        Accept: "application/vnd.github.v3+json",
+        Authorization: `token ${token}`, 
+    };
+
+    const resultList = document.getElementById(`resultList${number}`);
+    if (query.length === 0) {
+        resultList.style.display = 'none';
+        return; 
+    }
+
+    try {
+        const response = await fetch(`https://api.github.com/search/users?q=${query}&per_page=12`, {
+            headers: headers,
+        });
+        const data = await response.json();
+
+        // Display the results
+        if (data.items && query.length>0) {
+            displaySearchResults(data.items, number);
+        }
+
+    } catch (error) {
+        console.error("Error fetching users:", error);
+        resultList.innerHTML = "<p>There was an error fetching users. Please try again later.</p>";
+        resultList.style.display = 'block';
+    }
+}
+
+function displaySearchResults(users,number) {
+
+    let resultList = document.getElementById(`resultList${number}`);
+    let searchInput = document.getElementById(`username${number}`);
+
+    resultList.innerHTML = ''; 
+    if (users.length === 0) {
+        resultList.style.display = 'none';
+        return;
+    }
+
+    resultList.style.display = 'grid';
+
+    users.forEach(user => {
+        const listItem = document.createElement('div');
+        listItem.className = 'user'; 
+
+        listItem.innerHTML = `
+            <img src="${user.avatar_url}" alt="${user.login}" style="width: 30px; height: 30px; border-radius: 50%; margin-right: 10px;">
+            <span>${user.login}</span>
+        `;
+        listItem.onclick = function () {
+            searchInput.value = user.login;
+
+            resultList.style.display = 'none';
+        };
+        resultList.appendChild(listItem);
+    });
+}
diff --git a/styles/compare.css b/styles/compare.css
@@ -54,7 +54,8 @@ label{
 
 .button {
     display: block;
-    width: 100%;
+    width: 25%;
+    height: 30%;
     padding: 10px;
     background-color: #4CAF50;
     color: white;
@@ -195,11 +196,7 @@ select{
     display: none;
   }
 
-  #progressBarContainer {
-
-
 #progressBarContainer {
-
     position: fixed;
     top: 0;
     left: 0;
@@ -216,4 +213,66 @@ select{
     transition: width 0.2s ease;
 
 }
+.list {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr); 
+    gap: 10px; 
+    padding: 10px; 
+}
+.user {
+    display: flex;
+    align-items: center;
+    padding: 10px;
+    border: 1px solid #ddd;
+    border-radius: 5px;
+    cursor: pointer;
+}
+
+.user:hover{
+    border-color: #007bff; 
+    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5); 
+}
+
+.search-bar-components {
+    display: flex;
+    flex-wrap: wrap; 
+    justify-content:space-around; 
+}
+
+input {
+    width: 100%; 
+    max-width: 300px; 
+    height: 40px; 
+    padding: 10px;
+    font-size: 16px; 
+    border: 1px solid #ccc;
+    border-radius: 8px; 
+    outline: none;
+    box-sizing: border-box;
+    transition: all 0.3s ease; 
+}
+
+
+input:focus {
+    border-color: #007bff; 
+    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5); 
+}
+
+
+@media screen and (max-width: 768px) {
+    input {
+        max-width: 100%; 
+    }
+    .list{
+        display: grid;
+        grid-template-columns: repeat(1, 1fr); 
+        gap: 10px; 
+        padding: 10px; 
+    }
+    .search-bar-components{
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+    }
+}