6.load-more-button

<!DOCTYPE html>

<head>

<title>Load More Button API</title>

<style>

*{

margin: 0;

padding: 0;

box-sizing: border-box;

}

body {

padding: 15px;

line-height: 1.5;

}

.products-container {

display: flex;

flex-wrap: wrap;

gap: 10px;

}

.products-container .product-item-wrapper{

width: 32%;

height: 400px;

}

.product-item-wrapper img {

width: 100%;

height: 200px;

object-fit: cover;

}

.product-item-wrapper{

padding: 15px;

border: 2px solid rgb(220, 220, 20);

background-color: rgb(212, 0, 255);

}

.product-item-wrapper .product-title{

font-size: 20px;

font-weight: bold;

color: #fff;

}

.product-item-wrapper .product-price{

font-size: 30px;

font-weight: bolder;

color: #fff;

}

.product-item-wrapper .product-desc{

width: 80%;

overflow: hidden;

text-overflow: ellipsis;

white-space: nowrap;

font-size: 18px;

color: #060606;

font-weight: bold;

}

.load-more-btn{

padding: 10px 30px;

border: none;

background-color: rgb(255, 255, 119);

font-size: 25px;

cursor: pointer;

margin-top: 30px;

}

.load-more-btn:disabled {

cursor: not-allowed;

}

</style>

</head>

<body>

<button class="load-more-btn">Load More Products</button>

const productsContainer = document.querySelector(".products-container");

const loadMoreBtn = document.querySelector(".load-more-btn");

let currentStep = 0;

async function fetchListOfProducts(getCurrentStep) {

try {

const response = await fetch(

`https://dummyjson.com/products?limit=10&skip=${

getCurrentStep === 0 ? 0 : getCurrentStep * 10

}`,

{

method: "GET",

}

);

const result = await response.json();

console.log(result);

if (result && result.products) displayProducts(result.products);

} catch (e) {

console.log(e);

}

function displayProducts(productList) {

console.log(productList);

productList.forEach((productItem) => {

const productItemWrapper = document.createElement("div");

const productTitle = document.createElement("p");

const productThumbnail = document.createElement("img");

const productDescription = document.createElement("p");

const productPrice = document.createElement("p");

productTitle.textContent = productItem.title;

productDescription.textContent = productItem.description;

productThumbnail.src = productItem.thumbnail;

productPrice.textContent = productItem.price;

productItemWrapper.classList.add("product-item-wrapper");

productTitle.classList.add("product-title");

productThumbnail.classList.add("product-img");

productPrice.classList.add("product-price");

productDescription.classList.add("product-desc");

productItemWrapper.appendChild(productThumbnail);

productItemWrapper.appendChild(productTitle);

productItemWrapper.appendChild(productPrice);

productItemWrapper.appendChild(productDescription);

productsContainer.appendChild(productItemWrapper);

});

if (productsContainer.children.length === 100) {

loadMoreBtn.setAttribute("disabled", "true");

}

console.log(productsContainer.children.length);

}

fetchListOfProducts(currentStep);

loadMoreBtn.addEventListener("click", () => {

fetchListOfProducts((currentStep += 1));

});

</script>

</body>

</html>