Scribd
Upload
2 views

script.js

Uploaded by

asadalimanzoor45
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
2 views

script.js

Uploaded by

asadalimanzoor45
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 1

let currentPage = 1;

const productsPerPage = 5; // Number of products per page

// Dummy product data


const products = [
{ name: 'Product 1', description: 'Description of Product 1.', price: '$10' },
{ name: 'Product 2', description: 'Description of Product 2.', price: '$20' },
{ name: 'Product 3', description: 'Description of Product 3.', price: '$30' },
{ name: 'Product 4', description: 'Description of Product 4.', price: '$40' },
{ name: 'Product 5', description: 'Description of Product 5.', price: '$50' },
{ name: 'Product 6', description: 'Description of Product 6.', price: '$60' },
{ name: 'Product 7', description: 'Description of Product 7.', price: '$70' },
{ name: 'Product 8', description: 'Description of Product 8.', price: '$80' },
{ name: 'Product 9', description: 'Description of Product 9.', price: '$90' },
{ name: 'Product 10', description: 'Description of Product 10.', price:
'$100' }
// Add more products as needed
];

function showProducts(page) {
const startIndex = (page - 1) * productsPerPage;
const endIndex = startIndex + productsPerPage;
const productsToDisplay = products.slice(startIndex, endIndex);

const productsSection = document.getElementById('products');


productsSection.innerHTML = '';
productsToDisplay.forEach(product => {
const productDiv = document.createElement('div');
productDiv.classList.add('product');
productDiv.innerHTML = `
<h2>${product.name}</h2>
<p>${product.description}</p>
<p>Price: ${product.price}</p>
`;
productsSection.appendChild(productDiv);
});

const pageSpan = document.getElementById('page');


pageSpan.textContent = `Page ${currentPage}`;
}

function nextPage() {
if (currentPage < Math.ceil(products.length / productsPerPage)) {
currentPage++;
showProducts(currentPage);
}
}

function prevPage() {
if (currentPage > 1) {
currentPage--;
showProducts(currentPage);
}
}

// Display initial products on page load


showProducts(currentPage);

You might also like