Learn How To Create Pagination with JavaScript 

In this tutorial we will use https://restcountries.com/ api to generate data for pagination.

We will use XMLHttpRequest to fetch data from the api.

HTML

<div class="container">
  <div class="countries_wrapper"></div>
  <div class="pagination"></div>
</div>

CSS

html {
    box-sizing: border-box;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

body {
    padding: 0;
    margin: 0;
    height: 100vh;
    background-color: #48014B;
    display: flex;
    justify-content: center;
}

.container {
    width: 80%;
    margin-top: 50px;
}

.countries_wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.country_detail {
    display: flex;
    flex-direction: column;
}

.country {
    padding: 5px;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    color: #fff;
    background-color: #FC255A;
    border-top: 2px solid #000;
}

h2,
p {
    margin: 0;
    padding: 0;
}

ul {
    margin-top: 50px;
    padding: 0;
}

li {
    display: inline-block;
    padding: 15px;
    color: #ddd;
    background-color: #FC255A;
    border: 1px solid #000;
    cursor: pointer;
}

.current {
    background-color: #fff;
    color: #FC255A;
}

JS

let list = [];
let postPerPage = 3;

const countries = document.querySelector('.countries_wrapper');
const pagination = document.querySelector('.pagination');

function getCountries() {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', 'https://restcountries.com/v3.1/all');

    xhr.onreadystatechange = function () {
        if (this.readyState === 4) {
            if (this.status === 200) {
                list = JSON.parse(this.response).slice(0, 15);
                loadCountries(1)
            }
        }
    };
    xhr.send();
}

function loadCountries(page) {
    countries.innerHTML = '';
    pagination.innerHTML = '';
    let startPost = (page - 1) * postPerPage;
    let endPost = page * postPerPage;
    let totalPages = Math.ceil(list.length / postPerPage);
    let currentPage = list.slice(startPost, endPost)
    let ul = document.createElement('ul');
    currentPage.forEach(element => {
        console.log(element.name.common);
        let mainDiv = document.createElement('div');
        mainDiv.classList.add('country_detail');
        let detailDiv = document.createElement('div');
        detailDiv.classList.add('country');
        let header2 = document.createElement('h2');
        let p = document.createElement('p');
        let elem = document.createElement("img");
        elem.setAttribute("src", element.flags.png);
        header2.innerHTML = element.name.common;
        if (element.capital) {
            p.innerHTML = `Captial: ${element.capital[0]}`;
        }
        mainDiv.append(elem);
        detailDiv.append(header2)
        detailDiv.append(p);
        mainDiv.append(detailDiv)
        countries.append(mainDiv)
    })
    for (let i = 0; i < totalPages; i++) {
        let li = document.createElement('li');
        li.textContent = (i + 1);
        li.addEventListener('click', () => {
            loadCountries(i + 1);
        });
        if (i + 1 === page) {
            li.classList.add('current');
        }
        ul.appendChild(li);
    }
    pagination.appendChild(ul);
}
document.addEventListener('DOMContentLoaded', getCountries);