Untitled
unknown
javascript
10 months ago
56 kB
16
Indexable
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Business Menu & Inventory App</title>
<style>
/* Base Styling */
body { font-family: sans-serif; margin: 0; padding: 20px; background-color: #f4f4f9; }
h1, h2 { color: #333; }
button { padding: 10px 15px; background-color: #007bff; color: white; border: none; cursor: pointer; border-radius: 5px; }
input[type="text"], input[type="number"] { padding: 8px; margin: 5px 0; border: 1px solid #ccc; border-radius: 4px; width: calc(100% - 16px); box-sizing: border-box; }
.container { max-width: 800px; margin: auto; background: white; padding: 20px; border-radius: 8px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); }
/* Admin specific styles (Hidden by default) */
#admin-panel { border: 1px dashed #ccc; padding: 15px; margin-bottom: 20px; display: none; }
.product-item { display: flex; justify-content: space-between; padding: 5px 0; border-bottom: 1px solid #eee; }
/* Menu specific styles */
#customer-menu { margin-top: 20px; }
.menu-item { background: #e9ecef; padding: 10px; margin-bottom: 10px; border-radius: 4px; display: flex; justify-content: space-between; }
.menu-name { font-weight: bold; }
.menu-price { color: #28a745; font-weight: bold; }
</style>
</head>
<body>
<div class="container">
<button onclick="toggleAdminPanel()">Open Inventory (Admin)</button>
<div id="admin-panel">
<h2>Inventory Management</h2>
<input type="text" id="product-name" placeholder="Product Name" required>
<input type="number" id="product-price" placeholder="Price (e.g., 9.99)" step="0.01" required>
<input type="number" id="product-qty" placeholder="Quantity in Stock" required>
<button onclick="addProduct()">Add/Update Product</button>
<hr>
<h3>Current Inventory</h3>
<div id="inventory-list">
</div>
<button onclick="saveInventory()">Save Inventory</button>
</div>
<hr>
<div id="customer-menu">
<h1>Our Menu</h1>
<div id="menu-items">
<p>Loading menu...</p>
</div>
</div>
</div>
<script>
// ... (We will add the JavaScript in the next section)
</script>
</body>
</html>
let inventory = JSON.parse(localStorage.getItem('inventory')) || [];
// --- ADMIN FUNCTIONS ---
// Toggles the visibility of the Admin Panel
function toggleAdminPanel() {
const panel = document.getElementById('admin-panel');
if (panel.style.display === 'none' || panel.style.display === '') {
panel.style.display = 'block';
renderInventoryList(); // Show current list when opened
} else {
panel.style.display = 'none';
}
}
// Adds a new product or updates an existing one
function addProduct() {
const nameInput = document.getElementById('product-name');
const priceInput = document.getElementById('product-price');
const qtyInput = document.getElementById('product-qty');
const name = nameInput.value.trim();
const price = parseFloat(priceInput.value);
const quantity = parseInt(qtyInput.value);
if (!name || isNaN(price) || isNaN(quantity)) {
alert('Please fill out all fields with valid data.');
return;
}
// Check if product already exists (case-insensitive update)
const existingIndex = inventory.findIndex(item => item.name.toLowerCase() === name.toLowerCase());
if (existingIndex > -1) {
// Update existing product
inventory[existingIndex].price = price;
inventory[existingIndex].quantity = quantity;
alert(`Updated quantity and price for ${name}!`);
} else {
// Add new product
inventory.push({ name, price, quantity });
alert(`Added new product: ${name}`);
}
// Clear inputs
nameInput.value = '';
priceInput.value = '';
qtyInput.value = '';
// Update both displays
renderInventoryList();
renderCustomerMenu();
}
// Displays the detailed inventory list in the Admin Panel
function renderInventoryList() {
const listDiv = document.getElementById('inventory-list');
listDiv.innerHTML = ''; // Clear existing list
inventory.forEach((item, index) => {
const itemDiv = document.createElement('div');
itemDiv.className = 'product-item';
itemDiv.innerHTML = `
<span style="flex-grow: 1;">${item.name}</span>
<span style="width: 100px;">Price: $${item.price.toFixed(2)}</span>
<span style="width: 100px;">Qty: ${item.quantity}</span>
<button onclick="removeProduct(${index})" style="background-color: #dc3545; margin-left: 10px;">Remove</button>
`;
listDiv.appendChild(itemDiv);
});
}
// Removes a product from the inventory array
function removeProduct(index) {
if (confirm(`Are you sure you want to remove ${inventory[index].name}?`)) {
inventory.splice(index, 1);
renderInventoryList();
renderCustomerMenu();
}
}
// Saves the current inventory array to the browser's local storage
function saveInventory() {
localStorage.setItem('inventory', JSON.stringify(inventory));
alert('Inventory saved successfully to your browser!');
}
// --- CUSTOMER FUNCTIONS ---
// Displays the public menu (only showing items with quantity > 0)
function renderCustomerMenu() {
const menuDiv = document.getElementById('menu-items');
menuDiv.innerHTML = ''; // Clear existing menu
const availableItems = inventory.filter(item => item.quantity > 0);
if (availableItems.length === 0) {
menuDiv.innerHTML = '<p>Sorry, we are currently sold out of all items!</p>';
return;
}
availableItems.forEach(item => {
const itemDiv = document.createElement('div');
itemDiv.className = 'menu-item';
itemDiv.innerHTML = `
<span class="menu-name">${item.name}</span>
<span class="menu-price">$${item.price.toFixed(2)}</span>
`;
menuDiv.appendChild(itemDiv);
});
}
// Initial load: render the customer menu when the page loads
window.onload = renderCustomerMenu;
Editor is loading...
Leave a Comment