Pagination Component | HTML, CSS & JavaScript

Pagination Component with HTML, CSS & JavaScript

30 DAYS 30 PROJECT CHALLENGE

Day #05

Project Overview

A Pagination Component built using HTML, CSS, and JavaScript that allows users to navigate through multiple pages of content efficiently.
The component includes previous and next controls, active page highlighting, and dynamic rendering, all wrapped in a clean and responsive UI with a custom background theme.

Key Features

Dynamic page number generation.
Previous and Next navigation buttons.
Active page highlighting for better user clarity.
Prevents navigation beyond first and last pages.
Clean, reusable, and responsive UI design.
Easy to integrate with lists or data-driven content.

HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Pagination Component</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>

  <div class="pagination-container">
    <button id="prevBtn">Prev</button>
    <ul id="pagination"></ul>
    <button id="nextBtn">Next</button>
  </div>

  <script src="script.js"></script>
</body>
</html>

CSS Code

* {
  box-sizing: border-box;
  font-family: "Segoe UI", sans-serif;
}

body {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #042453; /* Requested background */
}

.pagination-container {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #ffffff;
  padding: 15px 20px;
  border-radius: 12px;
}

ul {
  list-style: none;
  display: flex;
  gap: 8px;
  padding: 0;
  margin: 0;
}

li {
  padding: 8px 14px;
  border-radius: 6px;
  cursor: pointer;
  background: #e5e7eb;
  font-size: 14px;
}

li.active {
  background: #4f46e5;
  color: white;
}

li:hover {
  background: #c7d2fe;
}

button {
  padding: 8px 14px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  background: #4f46e5;
  color: white;
}

button:disabled {
  background: #9ca3af;
  cursor: not-allowed;
}

Javascript Code

const pagination = document.getElementById("pagination");
const prevBtn = document.getElementById("prevBtn");
const nextBtn = document.getElementById("nextBtn");

const totalPages = 5;
let currentPage = 1;

// Render pagination
function renderPagination() {
  pagination.innerHTML = "";

  for (let i = 1; i <= totalPages; i++) {
    const li = document.createElement("li");
    li.innerText = i;

    if (i === currentPage) {
      li.classList.add("active");
    }

    li.addEventListener("click", () => {
      currentPage = i;
      updatePagination();
    });

    pagination.appendChild(li);
  }

  prevBtn.disabled = currentPage === 1;
  nextBtn.disabled = currentPage === totalPages;
}

// Update state
function updatePagination() {
  renderPagination();
}

// Previous
prevBtn.addEventListener("click", () => {
  if (currentPage > 1) {
    currentPage--;
    updatePagination();
  }
});

// Next
nextBtn.addEventListener("click", () => {
  if (currentPage < totalPages) {
    currentPage++;
    updatePagination();
  }
});

// Initial render
renderPagination();