Scribd
Upload
5 views4 pages

Catalog (HTML+CSS)

The document contains an HTML structure for a responsive product catalog with a table displaying product images, names, prices, and descriptions. It includes JavaScript for pagination functionality, allowing users to navigate through products, and a CSS file for styling the layout. The catalog showcases various products such as wireless headphones, smartwatches, and gaming mice.

Uploaded by

sambackupno03
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
5 views4 pages

Catalog (HTML+CSS)

The document contains an HTML structure for a responsive product catalog with a table displaying product images, names, prices, and descriptions. It includes JavaScript for pagination functionality, allowing users to navigate through products, and a CSS file for styling the layout. The catalog showcases various products such as wireless headphones, smartwatches, and gaming mice.

Uploaded by

sambackupno03
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

Index.

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Product Catalog</title>
<link rel="stylesheet" href="[Link]" />
</head>
<body>
<h2>Responsive Product Catalog</h2>
<div class="table-container">
<table>
<thead>
<tr>
<th>Product Image</th>
<th>Product Name</th>
<th>Price (INR ₹)</th>
<th>Description</th>
</tr>
</thead>
<tbody id="product-table-body"></tbody>
</table>
</div>

⬅️
<div class="pagination">
<button id="prev"> Previous</button>

➡️
<span id="page-info">Page 1</span>
<button id="next">Next </button>
</div>

<script src="[Link]"></script>
</body>
</html>

[Link]

const products = [
{
name: "Wireless Headphones",
price: "₹7,999",
desc: "Noise-cancelling over-ear headphones.",
image: "images/[Link]",
},
{
name: "Smartwatch",
price: "₹12,999",
desc: "Fitness tracking smartwatch.",
image: "images/[Link]",
},
{
name: "Gaming Mouse",
price: "₹2,499",
desc: "Ergonomic gaming mouse.",
image: "images/[Link]",
},
{
name: "Laptop Stand",
price: "₹1,999",
desc: "Adjustable aluminium stand.",
image: "images/[Link]",
},
// Add more objects for testing pagination
];

const rowsPerPage = 2;
let currentPage = 1;

function displayProducts() {
const start = (currentPage - 1) * rowsPerPage;
const end = start + rowsPerPage;
const paginatedItems = [Link](start, end);

const tbody = [Link]("product-table-body");


[Link] = "";

[Link](p => {
const row = `<tr>
<td><img src="${[Link]}" alt="${[Link]}"></td>
<td>${[Link]}</td>
<td>${[Link]}</td>
<td>${[Link]}</td>
</tr>`;
[Link] += row;
});
[Link]("page-info").textContent = `Page ${currentPage} of
${[Link]([Link] / rowsPerPage)}`;
}

[Link]("prev").addEventListener("click", () => {
if (currentPage > 1) {
currentPage--;
displayProducts();
}
});

[Link]("next").addEventListener("click", () => {
if (currentPage < [Link]([Link] / rowsPerPage)) {
currentPage++;
displayProducts();
}
});

displayProducts();

[Link]

body {
font-family: Arial, sans-serif;
padding: 20px;
}

.table-container {
overflow-x: auto;
}

table {
width: 100%;
border-collapse: collapse;
margin-bottom: 20px;
}

th, td {
border: 1px solid #ddd;
padding: 12px;
text-align: left;
}

th {
background-color: #f4f4f4;
}

img {
width: 60px;
height: auto;
border-radius: 4px;
}

.pagination {
text-align: center;
margin-top: 10px;
}

button {
padding: 6px 12px;
margin: 0 5px;
}

You might also like