|
| 1 | +<!DOCTYPE html> |
| 2 | +<html lang="en"> |
| 3 | +<head> |
| 4 | + <meta charset="UTF-8"> |
| 5 | + <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| 6 | + <title>Product List</title> |
| 7 | + <style> |
| 8 | + .pagination { |
| 9 | + display: flex; |
| 10 | + justify-content: center; |
| 11 | + margin-top: 20px; |
| 12 | + } |
| 13 | + .pagination button { |
| 14 | + margin: 0 5px; |
| 15 | + padding: 5px 10px; |
| 16 | + cursor: pointer; |
| 17 | + } |
| 18 | + .pagination button.active { |
| 19 | + background-color: #007bff; |
| 20 | + color: white; |
| 21 | + border: none; |
| 22 | + } |
| 23 | + .pagination button:disabled { |
| 24 | + cursor: not-allowed; |
| 25 | + opacity: 0.5; |
| 26 | + } |
| 27 | + </style> |
| 28 | +</head> |
| 29 | +<body> |
| 30 | + <div id="productList"></div> |
| 31 | + <div class="pagination" id="pagination"></div> |
| 32 | + |
| 33 | + <script> |
| 34 | + const products = [ |
| 35 | + {"id": "P001", "name": "Ergonomic Chair", "description": "Comfortable office chair with lumbar support"}, |
| 36 | + {"id": "P002", "name": "Wireless Mouse", "description": "High-precision wireless mouse with long battery life"}, |
| 37 | + {"id": "P003", "name": "Mechanical Keyboard", "description": "Tactile mechanical keyboard with RGB backlighting"}, |
| 38 | + {"id": "P004", "name": "4K Monitor", "description": "Ultra-high definition monitor with wide color gamut"}, |
| 39 | + {"id": "P005", "name": "Noise-Cancelling Headphones", "description": "Over-ear headphones with active noise cancellation"}, |
| 40 | + {"id": "P006", "name": "Laptop Stand", "description": "Adjustable aluminum laptop stand for better ergonomics"}, |
| 41 | + {"id": "P007", "name": "Desk Lamp", "description": "LED desk lamp with adjustable color temperature"}, |
| 42 | + {"id": "P008", "name": "External SSD", "description": "Fast and portable solid-state drive for extra storage"}, |
| 43 | + {"id": "P009", "name": "Webcam", "description": "Full HD webcam with built-in microphone"}, |
| 44 | + {"id": "P010", "name": "USB Hub", "description": "Multi-port USB hub with power delivery"}, |
| 45 | + {"id": "P011", "name": "Graphics Tablet", "description": "Digital drawing tablet with pressure sensitivity"}, |
| 46 | + {"id": "P012", "name": "Wireless Charger", "description": "Qi-compatible wireless charging pad"}, |
| 47 | + {"id": "P013", "name": "Document Scanner", "description": "Portable document scanner with OCR functionality"}, |
| 48 | + {"id": "P014", "name": "Desk Organizer", "description": "Multi-compartment organizer for office supplies"}, |
| 49 | + {"id": "P015", "name": "Ergonomic Mouse Pad", "description": "Gel-filled mouse pad with wrist support"}, |
| 50 | + {"id": "P016", "name": "Portable Projector", "description": "Mini LED projector for presentations on-the-go"}, |
| 51 | + {"id": "P017", "name": "Smart Power Strip", "description": "Wi-Fi enabled power strip with individual outlet control"}, |
| 52 | + {"id": "P018", "name": "Cable Management Kit", "description": "Set of cable clips and sleeves for tidy workspaces"}, |
| 53 | + {"id": "P019", "name": "Desk Fan", "description": "USB-powered desk fan with adjustable speed"}, |
| 54 | + {"id": "P020", "name": "Blue Light Glasses", "description": "Computer glasses that filter out harmful blue light"}, |
| 55 | + {"id": "P021", "name": "Wireless Presenter", "description": "Remote control for presentations with laser pointer"}, |
| 56 | + {"id": "P022", "name": "Laptop Cooling Pad", "description": "Laptop stand with built-in cooling fans"}, |
| 57 | + {"id": "P023", "name": "USB Microphone", "description": "Cardioid condenser microphone for clear audio recording"}, |
| 58 | + {"id": "P024", "name": "Desk Pad", "description": "Large mouse pad that covers the entire desk area"}, |
| 59 | + {"id": "P025", "name": "Portable Monitor", "description": "Slim and lightweight secondary monitor for laptops"} |
| 60 | + ]; |
| 61 | + |
| 62 | + const itemsPerPage = 5; |
| 63 | + let currentPage = 1; |
| 64 | + |
| 65 | + function displayProducts(page) { |
| 66 | + const start = (page - 1) * itemsPerPage; |
| 67 | + const end = start + itemsPerPage; |
| 68 | + const pageProducts = products.slice(start, end); |
| 69 | + |
| 70 | + const productList = document.getElementById('productList'); |
| 71 | + productList.innerHTML = pageProducts.map(product => ` |
| 72 | + <div> |
| 73 | + <h3>${product.name}</h3> |
| 74 | + <p>ID: ${product.id}</p> |
| 75 | + <p>${product.description}</p> |
| 76 | + </div> |
| 77 | + `).join(''); |
| 78 | + } |
| 79 | + |
| 80 | + function setupPagination() { |
| 81 | + const pageCount = Math.ceil(products.length / itemsPerPage); |
| 82 | + const pagination = document.getElementById('pagination'); |
| 83 | + pagination.innerHTML = ''; |
| 84 | + |
| 85 | + for (let i = 1; i <= pageCount; i++) { |
| 86 | + const button = document.createElement('button'); |
| 87 | + button.innerText = i; |
| 88 | + button.onclick = () => changePage(i); |
| 89 | + if (i === currentPage) { |
| 90 | + button.classList.add('active'); |
| 91 | + button.disabled = true; |
| 92 | + } |
| 93 | + pagination.appendChild(button); |
| 94 | + } |
| 95 | + } |
| 96 | + |
| 97 | + function changePage(page) { |
| 98 | + currentPage = page; |
| 99 | + displayProducts(currentPage); |
| 100 | + setupPagination(); |
| 101 | + } |
| 102 | + |
| 103 | + displayProducts(currentPage); |
| 104 | + setupPagination(); |
| 105 | + </script> |
| 106 | +</body> |
| 107 | +</html> |
0 commit comments