Merge pull request #714 from vishanurag/main

Added Pagination Feature in Contributors page

js/contributors.js

@@ -1,12 +1,25 @@
-document.addEventListener("DOMContentLoaded", function () {
-	const contributorsContainer = document.getElementById("contributors");
+let pageNo = 1;
+
+const nextBtn = document.getElementById('nextBtn');
+const prevBtn = document.getElementById('prevBtn');
+const pageNoBox = document.getElementById('pageNoBox');
 
-	async function fetchContributors() {
+document.addEventListener("DOMContentLoaded", function () {
+
+	async function fetchContributors(page) {
+		pageNo += page;
 		try {
 			const response = await fetch(
-				"https://api.github.com/repos/ChromeGaming/Dot-Box/contributors"
+				`https://api.github.com/repos/ChromeGaming/Dot-Box/contributors?page=${pageNo}`
 			);
 			const contributors = await response.json();
+			const contributorsContainer = document.getElementById("contributors");
+
+			if(contributors.length == 0 || pageNo < 1) {
+				return;
+			}
+			contributorsContainer.innerHTML = "";
+			pageNoBox.innerText = pageNo;
 
 			contributors.forEach((contributor) => {
 				const contributorCard = document.createElement("a");
@@ -25,5 +38,14 @@ document.addEventListener("DOMContentLoaded", function () {
 		}
 	}
 
-	fetchContributors();
+	fetchContributors(0);
+
+	prevBtn.addEventListener('click', (e)=> {
+		e.preventDefault();
+		fetchContributors(-1);
+	  })
+	  nextBtn.addEventListener('click', (e)=> {
+		e.preventDefault();
+		fetchContributors(1);
+	  })
 });

pages/contributors.html

@@ -13,6 +13,7 @@
 			href="../assets/favicon.ico"
 			type="image/x-icon"
 		/>
+		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css">
 		<link rel="stylesheet" href="/styles/global.css" />
 		<link rel="stylesheet" href="../styles/contributors.css" />
 
@@ -91,6 +92,12 @@
 					id="contributors"
 					class="contributors flex flex-wrap justify-center gap-8"
 				></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>
 		</div>
 

styles/contributors.css

@@ -175,6 +175,26 @@ body {
 	box-shadow: 0 4px 9px rgb(51, 235, 255);
 }
 
+.pagination-btns {
+	margin: 50px 0px;
+	width: 100%;
+	display: flex;
+	justify-content: center;
+  }
+
+  .pagination-btns button.btn {
+	border-radius: 5px;
+	outline: none;
+	margin: 5px 10px;
+	border: 1px solid rgb(146, 110, 110);
+	width: 50px;
+	height: 50px;
+  }
+
+  .pagination-btns button.btn, .pagination-btns button.btn i.bi {
+	font-size: 2rem;
+  }
+
 .text-lg {
 	font-size: 1.125rem;
 }