Pagination – CodingNepal

How to create Pagination in HTML CSS & JavaScript

CodingNepal — Mon, 03 Apr 2023 09:06:40 +0000

You may have seen at the end of the website that there is a pagination section that is used to jump to the next webpage of the website. Did you know we can create that pagination using HTML CSS & JavaScript?

Today in this blog, you will learn how to create pagination using HTML CSS, and JavaScript. In addition to the pagination, there will be button validation and animations included as well. If you want to enhance your coding skills then I would like to recommend my latest blog on Rock Paper & Scissors Game.

Video Tutorial of Pagination in HTML CSS & JavaScript

As you saw in the video tutorial how can we create an Animated Pagination in HTML CSS & JavaScript step by step? We were able to move any number by clicking on the number or by using the arrow button.

I would highly recommend you watch the video tutorial to create this pagination because it will be easier for you to build this pagination step by step. Also, I have tried to explain every code with the comments.

Steps for creating Pagination in HTML CSS & JavaScript

To create a Pagination using HTML, CSS, and vanilla JavaScript, follow the given steps line by line:

Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
Create an index.html file. The file name must be index and its extension .html
Create a style.css file. The file name must be style and its extension .css
Create a script.js file. The file name must be script and its extension .js

Once you create these files, paste the given codes into the specified files. If you don’t want to do these then scroll down and download all the source code files of the Rock-Paper-Scissors Game, by clicking on the given download button.

First, paste the following codes into your index.html file.




  
    
    
    
   Pagination in HTML CSS & JavaScript
    
    
    
  
  
    
      
      

      
        1
        2
        3
        4
        5

Second, paste the following codes into your style.css file.

/* Import Google font - Poppins */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
body {
  height: 100vh;
  background: #4070f4;
}
body,
.container,
.button,
.links,
.link {
  display: flex;
  align-items: center;
  justify-content: center;
}
.container {
  padding: 20px;
  border-radius: 8px;
  column-gap: 12px;
  background: #fff;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}
.button {
  border: none;
}
.button i {
  pointer-events: none;
}
.button:disabled {
  color: #b3b3b3;
  pointer-events: none;
}
.button,
.link {
  height: 45px;
  width: 45px;
  font-size: 20px;
  color: #666666;
  background-color: #f2f2f2;
  border-radius: 6px;
  cursor: pointer;
}
.links {
  column-gap: 12px;
}
.link {
  font-weight: 500;
  text-decoration: none;
}
.button:hover,
.link:hover {
  color: #fff;
  background: #4070f4;
}
.link.active {
  color: #fff;
  background: #4070f4;
}

Third, paste the following codes into your script.js file.

// Selecting DOM elements
const startBtn = document.querySelector("#startBtn"),
  endBtn = document.querySelector("#endBtn"),
  prevNext = document.querySelectorAll(".prevNext"),
  numbers = document.querySelectorAll(".link");

// Setting an initial step
let currentStep = 0;

// Function to update the button states
const updateBtn = () => {
  // If we are at the last step
  if (currentStep === 4) {
    endBtn.disabled = true;
    prevNext[1].disabled = true;
  } else if (currentStep === 0) {
    // If we are at the first step
    startBtn.disabled = true;
    prevNext[0].disabled = true;
  } else {
    endBtn.disabled = false;
    prevNext[1].disabled = false;
    startBtn.disabled = false;
    prevNext[0].disabled = false;
  }
};

// Add event listeners to the number links
numbers.forEach((number, numIndex) => {
  number.addEventListener("click", (e) => {
    e.preventDefault();
    // Set the current step to the clicked number link
    currentStep = numIndex;
    // Remove the "active" class from the previously active number link
    document.querySelector(".active").classList.remove("active");
    // Add the "active" class to the clicked number link
    number.classList.add("active");
    updateBtn(); // Update the button states
  });
});

// Add event listeners to the "Previous" and "Next" buttons
prevNext.forEach((button) => {
  button.addEventListener("click", (e) => {
    // Increment or decrement the current step based on the button clicked
    currentStep += e.target.id === "next" ? 1 : -1;
    numbers.forEach((number, numIndex) => {
      // Toggle the "active" class on the number links based on the current step
      number.classList.toggle("active", numIndex === currentStep);
      updateBtn(); // Update the button states
    });
  });
});

// Add event listener to the "Start" button
startBtn.addEventListener("click", () => {
  // Remove the "active" class from the previously active number link
  document.querySelector(".active").classList.remove("active");
  // Add the "active" class to the first number link
  numbers[0].classList.add("active");
  currentStep = 0;
  updateBtn(); // Update the button states
  endBtn.disabled = false;
  prevNext[1].disabled = false;
});

// Add event listener to the "End" button
endBtn.addEventListener("click", () => {
  // Remove the "active" class from the previously active number link
  document.querySelector(".active").classList.remove("active");
  // Add the "active" class to the last number link
  numbers[4].classList.add("active");
  currentStep = 4;
  updateBtn(); // Update the button states
  startBtn.disabled = false;
  prevNext[0].disabled = false;
});

That’s all, now you’ve successfully created a project on Pagination. If your code doesn’t work or you’ve faced any problems, please download the source code files from the given download button. It’s free and a zip file containing the project folder with source code files will be downloaded.

CSS3 – Neumorphism Pagination Design

CodingNepal — Tue, 07 Jul 2020 09:15:00 +0000

Hello readers, Today in this blog you’ll learn how to create a CSS3 Neumorphism Pagination using only HTML & CSS. Earlier I have also shared a blog on Simple Pagination Design using HTML & CSS. But now I’m going to create Neumorphism Pagination Design.

Pagination is the process of splitting the contents of a website, or a part of contents from a website, into discrete pages. Pagination is helpful when the website includes lots of content on a single page, that a single page will not look good with all those topics together. Nowadays, Neumorphism design is a trend and most websites are based on this neomorphic effect.

In this program (CSS3 – Neumorphism Pagination Design), at first, there is pagination on the webpage and when you click on each button there is shown a neomorphic shadow effect which indicates to the user that this tab is currently active. This pagination design is simple and there are no advanced features because this is a pure CSS program and I didn’t use JavaScript but I used jQuery to make pagination buttons clickable.

If you’re feeling difficult to understand what I am saying. You can watch a full video tutorial on this program (CSS3 – Neumorphism Pagination Design).

Video Tutorial of CSS3 – Neumorphism Pagination

As you have seen in the video, this is a pure CSS program. This is simple and easy to create and I hope you’ve also understood the basic codes behind creating the Neumorphism Pagination. If you’re a beginner and you know only HTML & CSS then you can also create this type of pagination but if you know JavaScript then you can take this program to the next level by adding more and advanced features.

If you like this program (Neumorphism Pagination Design) and want to get source codes. You can easily get the source codes of this program. To get the source codes you just need to scroll down. You can use this program on your projects and HTML pages.

Neumorphism Pagination Design [Source Codes]

To create this program (Neumorphism Pagination Design). First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following codes in your file.




   
      
      Neumorphism Pagination | CodingNepal
      
      
   
   
      
         
            Previous
            1
            2
            3
            4
            5
            6
            7
            8
            Next

Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
  margin: 0;
  padding: 0;
  outline: none;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
html,body{
  display: grid;
  height: 100%;
  place-items: center;
  text-align: center;
  background: #dde1e7;
}
.container{
  background: #dde1e7;
  padding: 25px;
  border-radius: 3px;
  box-shadow: -3px -3px 7px #ffffff73,
              3px 3px 5px rgba(94,104,121,0.288);
}
.pagination{
  display: flex;
  list-style: none;
}
.pagination li{
  flex: 1;
  margin: 0px 5px;
  background: #dde1e7;
  border-radius: 3px;
  box-shadow: -3px -3px 7px #ffffff73,
               3px 3px 5px rgba(94,104,121,0.288);
}
.pagination li a{
  font-size: 18px;
  text-decoration: none;
  color: #4D3252;
  height: 45px;
  width: 55px;
  display: block;
  line-height: 45px;
}
.pagination li:first-child a{
  width: 120px;
}
.pagination li:last-child a{
  width: 100px;
}
.pagination li.active{
  box-shadow: inset -3px -3px 7px #ffffff73,
              inset 3px 3px 5px rgba(94,104,121,0.288);
}
.pagination li.active a{
  font-size: 17px;
  color: #6f6cde;
}
.pagination li:first-child{
  margin: 0 15px 0 0;
}
.pagination li:last-child{
  margin: 0 0 0 15px;
}

That’s all, now you’ve successfully created a CSS3 – Neumorphism Pagination Design. If your code doesn’t work or you’ve faced any error/problem then please comment down or contact us from the contact page.

Awesome Pagination Design in HTML & CSS

CodingNepal — Mon, 29 Jun 2020 09:14:00 +0000

Hello readers, Today in this blog you’ll learn how to create Awesome Pagination Design using only HTML & CSS. Pagination is the method of dividing the contents of a website, into discrete pages. Earlier I have shared a blog on how to create an Active Tab Hover Animation on Menu Icon using HTML CSS. And, now I’m going to create Pagination Design.

In this program (Pagination Design), there is a white pagination container with some texts and a gradient background color as you have seen in the image. And in the container, there is pagination with the ten buttons. When you click on the particular button there is a box-shadow effect to indicates you a button is clicked or not. This is a pure CSS program that means only HTML & CSS are used to create this Pagination.

If you’re feeling difficult to understand what I am saying. You can watch a full video tutorial on this program (Pagination Design).

Video Tutorial of Pagination Design using HTML CSS

As you have seen the Pagination program in the video. I hope you have understood the codes behind creating this design. As you know, I used only HTML & CSS to create this design so there are no vast codes on this program.

If you like this program (Pagination Design) and want to get source codes. You can easily get the source codes of this program. To get the source codes you just need to scroll down.
If you’re a beginner and you know HTML & CSS then you can also create this type of pagination design. But if you know JavaScript well, then you can take this design at the next level.

Pagination Design in HTML CSS [Source Codes]

To create this program (Pagination Design). First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following codes in your file. First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.




   
      
      Pagination Design | CodingNepal
      
      
   
   
      
         
            Pagination Design
         
         
            Awesome pagination design in HTML and CSS only.
         
         
            
               
               Previous
            
            1
            2
            3
            4
            5
            6
            7
            8
            9
            10
            
               Next