Changed around line 1
+ const inventoryData = [
+ { id: 1, name: "Green Tea", quantity: 150, dailyUsage: 25 },
+ { id: 2, name: "Black Tea", quantity: 200, dailyUsage: 30 },
+ { id: 3, name: "Herbal Tea", quantity: 100, dailyUsage: 15 },
+ { id: 4, name: "Oolong Tea", quantity: 80, dailyUsage: 10 }
+ ];
+
+ const dashboard = document.querySelector('.inventory-grid');
+ const detailsSection = document.getElementById('details');
+ const detailTitle = document.querySelector('.detail-title');
+ const quantityInput = document.querySelector('.quantity-input');
+ const usageInput = document.querySelector('.usage-input');
+ const leafContainer = document.querySelector('.leaf-container');
+ let currentItem = null;
+
+ function renderDashboard() {
+ dashboard.innerHTML = inventoryData.map(item => `
+
+
${item.name}
+
Quantity: ${item.quantity}
+
Daily Usage: ${item.dailyUsage}
+
+ `).join('');
+
+ document.querySelectorAll('.inventory-item').forEach(item => {
+ item.addEventListener('click', showDetails);
+ });
+ }
+
+ function showDetails(e) {
+ const itemId = Number(e.currentTarget.dataset.id);
+ currentItem = inventoryData.find(item => item.id === itemId);
+
+ detailTitle.textContent = currentItem.name;
+ quantityInput.value = currentItem.quantity;
+ usageInput.value = currentItem.dailyUsage;
+
+ renderLeafIcons(Math.floor(currentItem.quantity / currentItem.dailyUsage));
+
+ detailsSection.classList.remove('hidden');
+ }
+
+ function renderLeafIcons(days) {
+ leafContainer.innerHTML = '';
+ for (let i = 0; i < days; i++) {
+ const leaf = document.createElement('div');
+ leaf.classList.add('leaf-icon');
+ leafContainer.appendChild(leaf);
+ }
+ }
+
+ document.querySelector('.close-detail').addEventListener('click', () => {
+ detailsSection.classList.add('hidden');
+ });
+
+ document.querySelector('.save-btn').addEventListener('click', () => {
+ currentItem.quantity = Number(quantityInput.value);
+ currentItem.dailyUsage = Number(usageInput.value);
+ renderDashboard();
+ detailsSection.classList.add('hidden');
+ });
+
+ // Initial render
+ renderDashboard();
