added UI indicator of active pagination

noskofficial · Oct 1, 2024 · 7126c95 · 7126c95
1 parent 02d6b1e
commit 7126c95
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 1 deletion.
diff --git a/site/js/event.js b/site/js/event.js
@@ -77,10 +77,14 @@ function createPaginationControls() {
   for (let i = 1; i <= totalPages; i++) {
     const button = document.createElement("button");
     button.textContent = i;
+    if (i === currentPage) {
+      button.classList.add("active");
+    }
     button.addEventListener("click", () => {
       currentPage = i;
       renderEvents();
+      createPaginationControls();
     });
     paginationControls.appendChild(button);
   }
-}
+}
diff --git a/site/style/events.css b/site/style/events.css
@@ -30,3 +30,7 @@
 .pagination button:hover:not(.active) {
   background-color: #ddd;
 }
+.pagination button.active {
+  background-color: #689775;
+  color: white;
+}