From cad6ab11032ed4f16d0ebe7823611befa765b017 Mon Sep 17 00:00:00 2001 From: rupeshbangar Date: Mon, 23 Feb 2026 23:26:34 +0530 Subject: [PATCH] Basic JavaScript --- Week-01/Day_05/index.html | 22 ++++++++++++ Week-01/Day_05/script.js | 62 +++++++++++++++++++++++++++++++++ Week-01/Day_05/style.css | 72 +++++++++++++++++++++++++++++++++++++++ 3 files changed, 156 insertions(+) create mode 100644 Week-01/Day_05/index.html create mode 100644 Week-01/Day_05/script.js create mode 100644 Week-01/Day_05/style.css diff --git a/Week-01/Day_05/index.html b/Week-01/Day_05/index.html new file mode 100644 index 0000000..fe6d7ae --- /dev/null +++ b/Week-01/Day_05/index.html @@ -0,0 +1,22 @@ + + + + + + Basic JS Task - Week 1 Day 5 + + + + +
+

Gadget Store Inventory

+

Click the button below to process the JSON data and calculate discounts.

+ + + +
+
+ + + + \ No newline at end of file diff --git a/Week-01/Day_05/script.js b/Week-01/Day_05/script.js new file mode 100644 index 0000000..c56e13f --- /dev/null +++ b/Week-01/Day_05/script.js @@ -0,0 +1,62 @@ +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 = `Out of Stock`; + priceHTML = `${config.currencySymbol}${item.price}`; + } + else if (item.stock < config.lowStockThreshold) { + + const discountAmount = (item.price * config.discountPercent) / 100; + currentPrice = item.price - discountAmount; + + badgeHTML = `Low Stock Sale - ${config.discountPercent}% OFF`; + priceHTML = ` + ${config.currencySymbol}${item.price} + ${config.currencySymbol}${currentPrice.toFixed(0)} + `; + } + else { + badgeHTML = `In Stock: ${item.stock}`; + priceHTML = `${config.currencySymbol}${item.price}`; + } + + const card = document.createElement('div'); + card.className = 'card'; + card.innerHTML = ` +

${item.name}

+

${priceHTML}

+ ${badgeHTML} + `; + + container.appendChild(card); + }); +} + +loadBtn.addEventListener('click', () => { + console.log("Loading Inventory..."); + updateInventory(); +}); \ No newline at end of file diff --git a/Week-01/Day_05/style.css b/Week-01/Day_05/style.css new file mode 100644 index 0000000..63b1b32 --- /dev/null +++ b/Week-01/Day_05/style.css @@ -0,0 +1,72 @@ +body { + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + background-color: #f0f2f5; + color: #333; + padding: 20px; +} + +.container { + max-width: 900px; + margin: 0 auto; + text-align: center; +} + +button { + background-color: #007bff; + color: white; + border: none; + padding: 12px 24px; + font-size: 1rem; + border-radius: 5px; + cursor: pointer; + margin-bottom: 30px; +} + +button:hover { + background-color: #0056b3; +} + +.product-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + gap: 20px; +} + +.card { + background: white; + padding: 20px; + border-radius: 10px; + box-shadow: 0 4px 6px rgba(0,0,0,0.1); + text-align: left; +} + +.card h3 { + margin-top: 0; + color: #222; +} + +.price { + font-size: 1.2rem; + font-weight: bold; + color: #28a745; +} + +.old-price { + text-decoration: line-through; + color: #888; + font-size: 0.9rem; + margin-right: 10px; +} + +.badge { + display: inline-block; + padding: 4px 8px; + border-radius: 4px; + font-size: 0.75rem; + font-weight: bold; + margin-top: 10px; +} + +.sale { background-color: #ffc107; color: #000; } +.out-of-stock { background-color: #dc3545; color: #fff; } +.available { background-color: #e2e3e5; color: #383d41; } \ No newline at end of file