Pagination Component | HTML, CSS & JavaScript

Pagination Component with HTML, CSS & JavaScript

30 DAYS 30 PROJECT CHALLENGE

Day #05

Project Overview

The Pagination Component is a simple beginner-friendly project built using HTML, CSS, and JavaScript. It allows users to move between different pages of content using page numbers along with Previous and Next buttons. The currently selected page is highlighted, making it easy for users to understand which page they are viewing.

This project is very helpful for beginners who want to understand how pagination works in web applications. It demonstrates concepts such as JavaScript variables, loops, event listeners, conditional statements, DOM manipulation, and dynamic rendering. The component can also be extended and connected to lists, APIs, or larger sets of data in future projects.

Key Features

Dynamic Page Numbers: The page numbers are created dynamically using JavaScript. It allows you to alter the number of pages by modifying some lines of code instead of manually creating every page button in HTML.
Previous Button: Users can click the Previous button to move back to the page before the currently selected page. This button will be disabled when on page 1.
Next Button: The Next button lets you go through all available pages sequentially until you reach the last one, which will disable this button then.
Direct Page Selection: Users can click directly on any available page number to move to that specific page without using the Previous or Next buttons.
Active Page Highlighting: The currently selected page receives an active style, making it visually different from the other page numbers and helping users understand their current position.
Navigation Limits: JavaScript prevents users from moving before the first page or after the last page. This helps keep the pagination functionality working correctly.
Dynamic UI Updates: Whenever the current page changes, JavaScript updates the pagination interface so the active page and navigation button states remain accurate.
Clean and Simple Interface: The component uses a simple layout with clearly visible page numbers and navigation buttons, making it easy to understand and use.
Responsiveness: The Pagination Component can adapt to different screen sizes and can be used as part of responsive web applications.
Reusability Functionality: The same codebase could easily expand upon itself later down road whenever more features get added such as products listing systems blogs etc.

What You'll Learn

Understand the basic concept of pagination in web applications.
Learn how to create HTML elements dynamically using JavaScript.
Practice using for loops to generate page numbers.
Understand how JavaScript variables can store the current page.
Learn how to add click events to dynamically created elements.
Practice updating the DOM when application data changes.
Understand how conditional statements control navigation limits.
Learn how to enable and disable buttons dynamically.
Practice adding and removing CSS classes using JavaScript.
Understand how functions can organize reusable application logic.

HTML Code

HTML creates the basic structure of the Pagination Component. First, the style.css file is linked inside the <head> section so CSS can control the appearance and layout of the pagination interface. The main content is placed inside the .pagination-container div, which acts as the main container for all pagination controls and the button with the prevBtn ID allows users to move to the previous page, while the button with the nextBtn ID allows users to move to the next page.

Between these buttons, the <ul> element with the pagination ID provides an empty container where JavaScript dynamically creates the page numbers. Finally, the script.js file is loaded at the bottom of the <body> so JavaScript can access these elements and handle the pagination functionality.

<!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

CSS controls the appearance and layout of the Pagination Component. The universal selector applies box-sizing and a consistent font to the page. The body uses Flexbox to center the pagination component both horizontally and vertically. First, the .pagination-container class styles the main container by adding a white background, padding, spacing, and rounded corners, the <ul> element uses Flexbox to arrange the page numbers in a horizontal row and each <li> represents a page number and receives padding, a background color, rounded corners, and a pointer cursor, .active class changes the appearance of the currently selected page, while the :hover selector provides visual feedback when users move over a page number, buttons are also styled, and :disabled selector gives a different appearance to buttons that cannot be clicked.

* {
  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

JavaScript provides the main functionality of the Pagination Component. First, it selects the pagination list, Previous button, and Next button from the HTML, totalPages variable stores the total number of pages, while currentPage keeps track of the page currently selected by the user and the renderPagination() function creates the page numbers dynamically using a for loop. It also checks which page is currently active and adds the active class to that page and each page number receives a click event so users can directly select a page.

The Previous and Next buttons update the currentPage value and call updatePagination() to refresh the interface. JavaScript also disables the Previous button on the first page and the Next button on the last page, preventing navigation outside the available pages. Finally, renderPagination() runs when the page loads to display the initial pagination component.

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();