Merge pull request #1302 from vishanurag/Anurag-Branch

feat: Added pagination feature in contributors page
apu52 · Aug 4, 2024 · 9dc34e2 · 9dc34e2
2 parents 1585db8 + e91d205
commit 9dc34e2
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 4 deletions.
diff --git a/contributors.html b/contributors.html
@@ -20,6 +20,7 @@
       href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
       rel="stylesheet"
     />
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
 
     <style>
       html {
@@ -55,6 +56,21 @@
         z-index: -1;
         background-size: cover;
       }
+
+      .pagination-btns {
+        margin: 50px 0px;
+      }
+
+      .pagination-btns button.btn {
+        border-radius: 5px;
+        outline: none;
+        margin: 5px 10px;
+        border: 1px solid rgb(146, 110, 110);
+      }
+
+      .pagination-btns button.btn, .pagination-btns button.btn i.bi {
+        font-size: 2rem;
+      }
     </style>
   </head>
   <body>
@@ -66,6 +82,11 @@
     <div class="container">
       <h1 class="title">Contributors</h1>
       <div id="contributors" class="contributors-grid"></div>
+      <div class="pagination-btns">
+        <button class="btn" id="prevBtn"> <i class="bi bi-arrow-left-circle"></i> </button>
+        <button class="btn" id="pageNoBox">1</button>
+        <button class="btn" id="nextBtn"> <i class="bi bi-arrow-right-circle"></i> </button>
+      </div>
     </div>
     <button class="top-btn" id="goToTopBtn" onclick="goToTop()">
       <i class="fa-solid fa-chevron-up" style="color: #ffffff"></i>

diff --git a/contributors.js b/contributors.js
@@ -1,11 +1,23 @@
+let pageNo = 1;
+
 document.addEventListener('DOMContentLoaded', () => {
     const contributorsContainer = document.getElementById('contributors');
+    const nextBtn = document.getElementById('nextBtn');
+    const prevBtn = document.getElementById('prevBtn');
+    const pageNoBox = document.getElementById('pageNoBox');
 
-    async function fetchContributors() {
+    async function fetchContributors(page) {
+      pageNo += page;
       try {
-        const response = await fetch('https://api.github.com/repos/apu52/Travel_Website/contributors');
+        const response = await fetch(`https://api.github.com/repos/apu52/Travel_Website/contributors?page=${pageNo}`);
         const contributors = await response.json();
-
+        console.log(contributors.length)
+        if(contributors.length == 0 || pageNo < 1) {
+          return;
+        }
+
+        contributorsContainer.innerHTML = "";
+        pageNoBox.innerText = pageNo;
         contributors.forEach(contributor => {
           const contributorCard = document.createElement('div');
           contributorCard.className = 'contributor-card';
@@ -25,6 +37,15 @@ document.addEventListener('DOMContentLoaded', () => {
       }
     }
 
-    fetchContributors();
+    fetchContributors(0);
+
+    prevBtn.addEventListener('click', (e)=> {
+      e.preventDefault();
+      fetchContributors(-1);
+    })
+    nextBtn.addEventListener('click', (e)=> {
+      e.preventDefault();
+      fetchContributors(1);
+    })
   });