<div class="container">
<div id="items">
<h1>hello</h1>
</div>
<div id="pagination">
</div>
</div>
const itemsPerPage = 5;
let currentPage = 1;
let items = [];
items = [
{
id: 1,
title: 'Lorem Ipsum',
description:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit',
},
];
const renderItems = (page) => {
const startIndex = (page - 1) * itemsPerPage;
const endIndex = startIndex + itemsPerPage;
const paginatedItems = items.slice(startIndex, endIndex);
const itemsDiv = document.getElementById('items');
itemsDiv.innerHTML = '';
paginatedItems.forEach((item, index) => {
const itemElement = document.createElement('div');
itemElement.classList.add('item');
itemElement.innerHTML = `
<h3>${item.title}</h3>
<img src="https://qahubapi.hashmove.com///images/customer/ATCO/SecondaryLogo.png" alt="Logo" />
<p>${item.description}</p>
`;
itemElement.style.opacity = '0';
setTimeout(() => {
itemElement.style.transition = 'opacity 0.5s ease';
itemElement.style.opacity = '1';
}, index * 50);
itemsDiv.appendChild(itemElement);
});
};
const renderPagination = () => {
const totalPages = Math.ceil(items.length / itemsPerPage);
const paginationDiv = document.getElementById('pagination');
paginationDiv.innerHTML = '';
for (let i = 1; i <= totalPages; i++) {
const button = document.createElement('button');
button.textContent = i;
button.classList.add('pagination-button');
if (i === currentPage) {
button.classList.add('active');
}
button.addEventListener('click', () => {
currentPage = i;
fadeOutItems();
setTimeout(() => {
renderItems(currentPage);
updatePaginationButtons();
}, 0);
});
paginationDiv.appendChild(button);
}
};
const updatePaginationButtons = () => {
const buttons = document.querySelectorAll('.pagination-button');
buttons.forEach((button) => {
const pageNumber = parseInt(button.textContent);
if (pageNumber === currentPage) {
button.classList.add('active');
} else {
button.classList.remove('active');
}
});
};
const fadeOutItems = () => {
const itemsDiv = document.getElementById('items');
const itemsToFadeOut = itemsDiv.querySelectorAll('.item');
itemsToFadeOut.forEach((item) => {
item.style.transition = 'opacity 0.25s ease';
item.style.opacity = '0';
});
};
renderItems(currentPage);
renderPagination();