Merge pull request #3964 from ShreeluSantosh/ShreeluSantosh

[Enhancement]: Pagination for Contributor section

assets/css/contributors.css

@@ -11,6 +11,14 @@
     margin-bottom: 4%;
 }
 
+.contributors h2 {
+    font: 5.5vw/1 Permanent Marker;
+    text-align: center;
+    color: white;
+    font-size: 2rem;
+    margin-bottom: 4%;
+}
+
 .contributors h1:hover {
     text-decoration: underline;
 }
@@ -20,6 +28,7 @@
     padding: 2%;
     display: flex;
     flex-wrap: wrap;
+    justify-content: center;
 }
 
 .contributor-card {
@@ -45,3 +54,34 @@
 .contributor-card:nth-child(4n+3) {
     margin-top: -4px;
 }
+
+.pagination {
+    display: flex;
+    justify-content: center;
+    margin: 20px 0;
+}
+
+.pagination button {
+    background-color: #333;
+    color: white;
+    border: none;
+    padding: 10px 20px;
+    margin: 0 5px;
+    cursor: pointer;
+    transition: background-color 0.3s, transform 0.3s;
+}
+
+.pagination button:hover {
+    background-color: #555;
+    transform: scale(1.1);
+}
+
+.pagination button.active {
+    background-color: #f39c12;
+    transform: scale(1.2);
+}
+
+.pagination button:disabled {
+    background-color: #bbb;
+    cursor: not-allowed;
+}

assets/js/contributors.js

@@ -1,41 +1,58 @@
 (function() {
-const contributorContainer = document.getElementById('contributor');
+    const contributorContainer = document.getElementById('contributor');
+    const paginationContainer = document.getElementById('pagination');
+    const totalContributorsParagraph = document.getElementById('total-contributors');  // fetch total number of contributors for h2 heading
 
-// Replace these with the owner and repository name of the repository
-const owner = 'kunjgit';
-const repoName = 'GameZone';
+    const owner = 'kunjgit';
+    const repoName = 'GameZone';
+    const contributorsPerPage = 38;  // for pagination
 
-// Function to fetch contributors for a given page number
-async function fetchContributors(pageNumber) {
-    const perPage = 100; // You can adjust this based on your needs
-    const url = `https://api.github.com/repos/${owner}/${repoName}/contributors?page=${pageNumber}&per_page=${perPage}`;
+    let allContributors = [];
+    let currentPage = 1;
 
-    const response = await fetch(url);
-    if (!response.ok) {
-        throw new Error(`Failed to fetch contributors data. Status code: ${response.status}`);
-    }
+    // Function to fetch contributors for a given page number
+    async function fetchContributors(pageNumber) {
+        const perPage = 100; // GitHub API maximum is 100 per page
+        const url = `https://api.github.com/repos/${owner}/${repoName}/contributors?page=${pageNumber}&per_page=${perPage}`;
 
-    const contributorsData = await response.json();
-    return contributorsData;
-}
+        const response = await fetch(url);
+        if (!response.ok) {
+            throw new Error(`Failed to fetch contributors data. Status code: ${response.status}`);
+        }
 
-// Function to fetch all contributors
-async function fetchAllContributors() {
-    let allContributors = [];
-    let pageNumber = 1;
+        const contributorsData = await response.json();
+        return contributorsData;
+    }
 
-    try {
-        while (true) {
-            const contributorsData = await fetchContributors(pageNumber);
-            if (contributorsData.length === 0) {
-                break;
+    // Function to fetch all contributors
+    async function fetchAllContributors() {
+        try {
+            let pageNumber = 1;
+            while (true) {
+                const contributorsData = await fetchContributors(pageNumber);
+                if (contributorsData.length === 0) {
+                    break;
+                }
+                allContributors = allContributors.concat(contributorsData);
+                pageNumber++;
             }
-            allContributors = allContributors.concat(contributorsData);
-            pageNumber++;
+
+            displayContributors();
+            setupPagination();
+            displayTotalContributors();
+        } catch (error) {
+            console.error(error);
         }
+    }
+
+    // Function to display contributors for the current page
+    function displayContributors() {
+        contributorContainer.innerHTML = '';
+        const start = (currentPage - 1) * contributorsPerPage;
+        const end = start + contributorsPerPage;
+        const contributorsToShow = allContributors.slice(start, end);
 
-        // Display contributors in the honeycomb-like layout
-        allContributors.forEach((contributor) => {
+        contributorsToShow.forEach((contributor) => {
             const contributorCard = document.createElement('div');
             contributorCard.classList.add('contributor-card');
 
@@ -48,14 +65,44 @@ async function fetchAllContributors() {
             loginLink.appendChild(avatarImg);
 
             contributorCard.appendChild(loginLink);
-
-            contributorContainer.appendChild(contributorCard); // Append the contributor card to the  container
+            contributorContainer.appendChild(contributorCard);
         });
-    } catch (error) {
-        console.error(error);
     }
-}
 
-// Call the function to fetch all contributors and display them in the honeycomb-like layout
-fetchAllContributors();
+    // Function to setup pagination buttons
+    function setupPagination() {
+        paginationContainer.innerHTML = '';
+        const totalPages = Math.ceil(allContributors.length / contributorsPerPage);
+
+        for (let i = 1; i <= totalPages; i++) {
+            const pageButton = document.createElement('button');
+            pageButton.textContent = i;
+            if (i === currentPage) {
+                pageButton.classList.add('active');
+            }
+            pageButton.addEventListener('click', () => {
+                currentPage = i;
+                displayContributors();
+                updatePaginationButtons();
+            });
+            paginationContainer.appendChild(pageButton);
+        }
+    }
+
+    // Function to update pagination buttons
+    function updatePaginationButtons() {
+        const buttons = paginationContainer.getElementsByTagName('button');
+        for (const button of buttons) {
+            button.classList.remove('active');
+        }
+        buttons[currentPage - 1].classList.add('active');
+    }
+
+    // Function to display the total number of contributors
+    function displayTotalContributors() {
+        totalContributorsParagraph.textContent = `${allContributors.length} contributors so far!`;
+    }
+
+    // Fetch all contributors and initialize display
+    fetchAllContributors();
 })();

index.html

@@ -211,7 +211,10 @@
   <!-- Contributors section -->
   <div class="contributors">
     <h1 style="font-family: 'Agency FB', Times, serif;">Our Valuable Contributors</h1>
+     <!-- display number of contributors-->
+    <h2 id="total-contributors" style="text-align: center; font-family: 'Agency FB', Times, serif;"></h2> 
     <div id="contributor"></div>
+    <div class="pagination" id="pagination"></div>
   </div>
 
   <!--