How To Implement Infinite Scrolling With JavaScript

Let’s create infinite scrolling with javascript.

HTML

<div class="container">
  <div class="country_container"></div>
</div>

CSS

html {
    box-sizing: border-box;
}

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

body {
    padding: 0;
    margin: 0;
}

.container {
    width: 1100px;
    margin: 0 auto;
}

.country_container {
    width: 80%;
    margin: 25px auto;
}

.country {
    display: flex;
    border: 5px solid #000;
    border-radius: 12px;
    margin: 15px;
}

img {
    padding: 10px;
}

.info {
    font-family: Arial, Helvetica, sans-serif;
    padding: 15px;
}

JS

let country_container = document.querySelector('.country_container');

let list = [];
let x = 0;
let y = 5;

function fetchCountry() {
    fetch('https://restcountries.com/v3.1/all', {
        method: 'GET',
        headers: { Accept: "application/json" }
    })
        .then((response) => {
            return (response.json())
        })
        .then((data) => {
            showCountry(data)
        })
}

function showCountry(data) {
    list = data.slice(x, y);
    list.forEach(e => {
        const div = document.createElement('div');
        const div_img = document.createElement('div');
        const div_info = document.createElement('div');
        div.classList.add("country");
        div_info.classList.add("info");
        div_img.innerHTML = `
        <img src=${e.flags.png} />
        `
        div_info.innerHTML = `
            <h2>${e.name.common}</h2>
            <p>Capital: ${e.capital ? e.capital[0] : "N/A"} </p>
            <p>Continent: ${e.continents ? e.continents[0] : "N/A"} </p>
        `
        div.appendChild(div_img);
        div.appendChild(div_info);
        country_container.appendChild(div);
    })
}
window.addEventListener('scroll', () => {
    const { scrollTop, scrollHeight, clientHeight } = document.documentElement;

    if (scrollHeight - scrollTop === clientHeight) {
        x = y + 1;
        y = y + 5;
        fetchCountry();
    }
});

fetchCountry();