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 @@ + + +
+ + +Click the button below to process the JSON data and calculate discounts.
+ + + + +${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