Solution Files
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bonus Exercise 8 - Product Inventory</title>
</head>
<body>
<h1>Bonus Exercise 8: Product Inventory System</h1>
<script src="script.js"></script>
</body>
</html>script.js
// Create array of product objects
const products = [
{
name: 'Laptop',
price: 999.99,
quantity: 15,
category: 'Electronics'
},
{
name: 'Mouse',
price: 29.99,
quantity: 8,
category: 'Electronics'
},
{
name: 'Desk Chair',
price: 199.99,
quantity: 12,
category: 'Furniture'
},
{
name: 'Notebook',
price: 5.99,
quantity: 25,
category: 'Office Supplies'
}
];
// Function to calculate total value of a product
function calculateTotalValue(product) {
return product.price * product.quantity;
}
// Function to get products by category
function getProductsByCategory(productsArray, category) {
return productsArray.filter(product => {
return product.category === category;
});
}
// Display all products using forEach
document.write("<h2>All Products:</h2><ul>");
products.forEach(function(product) {
const totalValue = calculateTotalValue(product);
document.write(`<li>${product.name} - $${product.price} x ${product.quantity} = $${totalValue.toFixed(2)} (${product.category})</li>`);
});
document.write("</ul>");
// Calculate total inventory value using for loop
let totalInventoryValue = 0;
for (let i = 0; i < products.length; i++) {
totalInventoryValue += calculateTotalValue(products[i]);
}
document.write(`<p><strong>Total Inventory Value: $${totalInventoryValue.toFixed(2)}</strong></p>`);
// Filter products with low stock (quantity < 10)
const lowStockProducts = products.filter(product => {
return product.quantity < 10;
});
document.write("<h2>Low Stock Products (Quantity < 10):</h2><ul>");
lowStockProducts.forEach(product => {
document.write(`<li>${product.name}: ${product.quantity} units</li>`);
});
document.write("</ul>");
// Bonus: Display products by category
const electronics = getProductsByCategory(products, 'Electronics');
document.write("<h2>Electronics Products:</h2><ul>");
electronics.forEach(product => {
document.write(`<li>${product.name}</li>`);
});
document.write("</ul>");