Merge pull request #479 from naikmubashir/gh-pages

Add pagination

Author: sanjay-kv

index.html

@@ -11,6 +11,7 @@
       rel="stylesheet"
     />
     <link rel="stylesheet" href="styles/styles.css" />
+    <link rel="stylesheet" href="styles/pagination.css" />
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
     <script src="https://www.gstatic.com/firebasejs/7.14.6/firebase-app.js"></script>
     <script src="https://www.gstatic.com/firebasejs/7.14.6/firebase-database.js"></script>
@@ -132,6 +133,14 @@ <h1 class="main-heading">Awesome GitHub Profile READMEs</h1>
       <div class="profiles">
         <!-- Profiles will be dynamically loaded here -->
       </div>
+
+      <!-- Buttons for pagination -->
+      <div class="pagination">
+        <button id="prev-page" disabled>Previous</button>
+        <span id="page-info"></span>
+        <button id="next-page">Next</button>
+      </div>
+      
     </div>
     <footer id="Contact" class="footer-2">
       <div class="footer-container">

scripts/retriveprofile.js

@@ -14,11 +14,14 @@ var firebaseConfig = {
 // Initialize Firebase
 firebase.initializeApp(firebaseConfig);
 
+let currentPage=1;
+const profilesPerPage = 12; // Number of profiles per page
+
 document.addEventListener("DOMContentLoaded", function () {
   let contributors = [];
   const noProfilesMessage = document.querySelector(".no-profiles-message");
   noProfilesMessage.style.display="none"
-  function renderProfiles(filter = "") {
+  function renderProfiles(filter = "", page=1, profilesPerPage=12) {
 
     const container = document.querySelector(".profiles");
     container.innerHTML = "";
@@ -34,7 +37,15 @@ document.addEventListener("DOMContentLoaded", function () {
 
       return
     } 
-    contributors.forEach((contributor,index) => {
+
+     // Calculate start and end index for pagination
+    const startIndex = (page - 1) * profilesPerPage;
+    const endIndex = startIndex + profilesPerPage;
+
+    // Slice the filtered contributors based on the current page
+    const paginatedContributors = filteredContributors.slice(startIndex, endIndex);
+
+    paginatedContributors.forEach((contributor,index) => {
       noProfilesMessage.style.display = "none";
 
       if (contributor.login.toLowerCase().includes(filter.toLowerCase())) {
@@ -175,14 +186,43 @@ document.addEventListener("DOMContentLoaded", function () {
 
       }
     });
+
+    // Update pagination controls
+    updatePaginationControls(page, profilesPerPage, filteredContributors.length);
+
+
+  }
+
+  function updatePaginationControls(currentPage, profilesPerPage, totalProfiles) {
+    const totalPages = Math.ceil(totalProfiles / profilesPerPage);
+    const pageInfo = document.getElementById("page-info");
+    pageInfo.textContent = `Page ${currentPage} of ${totalPages}`;
+  
+    // Disable previous button if on the first page
+    document.getElementById("prev-page").disabled = currentPage === 1;
+  
+    // Disable next button if on the last page
+    document.getElementById("next-page").disabled = currentPage === totalPages;
   }
 
+  document.getElementById("prev-page").addEventListener("click", function () {
+    if (currentPage > 1) {
+      currentPage--;
+      renderProfiles("", currentPage, profilesPerPage);
+    }
+  });
+  
+  document.getElementById("next-page").addEventListener("click", function () {
+    currentPage++;
+    renderProfiles("", currentPage, profilesPerPage);
+  });
+
   // Fetch contributors data
   fetch("https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/.all-contributorsrc")
     .then((response) => response.json())
     .then((data) => {
       contributors = data.contributors;
-      renderProfiles();
+      renderProfiles("", 1, profilesPerPage); //Start on page one
     });
 
   // Add event listener to the search bar

styles/pagination.css

@@ -0,0 +1,31 @@
+.pagination {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: 20px;
+}
+
+.pagination button {
+  font-size: medium;
+  margin: 0 10px;
+  padding: 10px 20px;
+  background-color: #007bff;
+  color: white;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+.pagination button:hover {
+  background-color: #3a90d5; /* Background color on hover */
+  transform: scale(1.05); /* Slightly enlarge button on hover */
+}
+
+.pagination button:disabled {
+  background-color: #c0c0c0;
+  cursor: not-allowed;
+}
+
+.pagination #page-info {
+  font-weight: bold;
+}