62 lines
2.1 KiB
JavaScript
62 lines
2.1 KiB
JavaScript
const jsonInventory = `[
|
|
{"id": 1, "name": "Wireless Headphones", "price": 2500, "stock": 15},
|
|
{"id": 2, "name": "Smart Watch", "price": 5000, "stock": 3},
|
|
{"id": 3, "name": "Gaming Mouse", "price": 1200, "stock": 0},
|
|
{"id": 4, "name": "Laptop Stand", "price": 1800, "stock": 8}
|
|
]`;
|
|
|
|
const config = {
|
|
currencySymbol: "₹",
|
|
discountPercent: 15, // 15% discount for low stock items
|
|
lowStockThreshold: 5
|
|
};
|
|
|
|
const loadBtn = document.getElementById('load-btn');
|
|
const container = document.getElementById('product-container');
|
|
|
|
function updateInventory() {
|
|
const products = JSON.parse(jsonInventory);
|
|
|
|
container.innerHTML = '';
|
|
|
|
products.forEach(item => {
|
|
let currentPrice = item.price;
|
|
let badgeHTML = '';
|
|
let priceHTML = '';
|
|
|
|
if (item.stock === 0) {
|
|
badgeHTML = `<span class="badge out-of-stock">Out of Stock</span>`;
|
|
priceHTML = `<span class="price">${config.currencySymbol}${item.price}</span>`;
|
|
}
|
|
else if (item.stock < config.lowStockThreshold) {
|
|
|
|
const discountAmount = (item.price * config.discountPercent) / 100;
|
|
currentPrice = item.price - discountAmount;
|
|
|
|
badgeHTML = `<span class="badge sale">Low Stock Sale - ${config.discountPercent}% OFF</span>`;
|
|
priceHTML = `
|
|
<span class="old-price">${config.currencySymbol}${item.price}</span>
|
|
<span class="price">${config.currencySymbol}${currentPrice.toFixed(0)}</span>
|
|
`;
|
|
}
|
|
else {
|
|
badgeHTML = `<span class="badge available">In Stock: ${item.stock}</span>`;
|
|
priceHTML = `<span class="price">${config.currencySymbol}${item.price}</span>`;
|
|
}
|
|
|
|
const card = document.createElement('div');
|
|
card.className = 'card';
|
|
card.innerHTML = `
|
|
<h3>${item.name}</h3>
|
|
<p>${priceHTML}</p>
|
|
${badgeHTML}
|
|
`;
|
|
|
|
container.appendChild(card);
|
|
});
|
|
}
|
|
|
|
loadBtn.addEventListener('click', () => {
|
|
console.log("Loading Inventory...");
|
|
updateInventory();
|
|
}); |