rupeshbangar/Web-Development
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Basic JavaScript

Browse Source
This commit is contained in:
rupeshbangar
2026-02-23 23:26:34 +05:30
parent aa588af3fe
commit cad6ab1103
3 changed files with 156 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
Week-01/Day_05/index.html Normal file
View File

@@ -0,0 +1,22 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Basic JS Task - Week 1 Day 5</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>Gadget Store Inventory</h1>
<p>Click the button below to process the JSON data and calculate discounts.</p>
<button id="load-btn">Load Inventory</button>
<div id="product-container" class="product-grid"></div>
</div>
<script src="script.js"></script>
</body>
</html>

62
Week-01/Day_05/script.js Normal file
View File

@@ -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 = `<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();
});

72
Week-01/Day_05/style.css Normal file
View File

@@ -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; }