<div id="reportSummary" class="summary"></div> <div id="productTable"></div> </div>
<script> // Sample product data let products = [ { id: 1, name: "Laptop Pro X1", category: "Electronics", price: 1299.99, stock: 45, status: "In Stock" }, { id: 2, name: "Wireless Mouse", category: "Accessories", price: 29.99, stock: 120, status: "In Stock" }, { id: 3, name: "Mechanical Keyboard", category: "Accessories", price: 89.99, stock: 78, status: "In Stock" }, { id: 4, name: "4K Monitor 27\"", category: "Electronics", price: 349.99, stock: 23, status: "Low Stock" }, { id: 5, name: "USB-C Hub", category: "Accessories", price: 49.99, stock: 156, status: "In Stock" }, { id: 6, name: "Noise-Canceling Headphones", category: "Audio", price: 199.99, stock: 67, status: "In Stock" }, { id: 7, name: "Smartphone X", category: "Electronics", price: 899.99, stock: 12, status: "Low Stock" }, { id: 8, name: "Laptop Stand", category: "Accessories", price: 39.99, stock: 89, status: "In Stock" }, { id: 9, name: "External SSD 1TB", category: "Storage", price: 129.99, stock: 34, status: "In Stock" }, { id: 10, name: "Webcam HD", category: "Electronics", price: 79.99, stock: 0, status: "Out of Stock" } ]; product csv file download
function displayProducts() { let tableHtml = '<table>'; tableHtml += '<thead><tr>'; tableHtml += '<th>ID</th><th>Product Name</th><th>Category</th><th>Price</th><th>Stock</th><th>Status</th>'; tableHtml += '</tr></thead><tbody>'; products.forEach(product => { tableHtml += '<tr>'; tableHtml += `<td>${product.id}</td>`; tableHtml += `<td>${product.name}</td>`; tableHtml += `<td>${product.category}</td>`; tableHtml += `<td>$${product.price.toFixed(2)}</td>`; tableHtml += `<td>${product.stock}</td>`; tableHtml += `<td>${product.status}</td>`; tableHtml += '</tr>'; }); tableHtml += '</tbody></table>'; document.getElementById('productTable').innerHTML = tableHtml; } div id="reportSummary" class="summary">