index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Grocery Inventory Management</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }

        th, td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }

        th {
            background-color: #f2f2f2;
        }
    </style>
</head>
<body>
    <h1>Grocery Inventory Management</h1>
    <form id="addItemForm">
        <label for="itemName">Item Name:</label>
        <input type="text" id="itemName" required>
        <label for="itemQuantity">Quantity:</label>
        <input type="number" id="itemQuantity" required>
        <button type="button" onclick="addItem()">Add Item</button>
    </form>
    
    <h2>Inventory</h2>
    <table id="inventoryTable">
        <thead>
            <tr>
                <th>Name</th>
                <th>Quantity</th>
            </tr>
        </thead>
        <tbody id="inventoryBody"></tbody>
    </table>

    <script>
        async function addItem() {
            const itemName = document.getElementById('itemName').value;
            const itemQuantity = document.getElementById('itemQuantity').value;

            const response = await fetch('add_item.php', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                },
                body: `name=${itemName}&quantity=${itemQuantity}`,
            });

            const result = await response.json();
            alert(result.message);

            // Fetch and display updated inventory
            getInventory();
        }

        async function getInventory() {
            const response = await fetch('get_item.php');
            const result = await response.json();

            const inventoryBody = document.getElementById('inventoryBody');
            inventoryBody.innerHTML = '';

            result.inventory.forEach(item => {
                const row = document.createElement('tr');
                row.innerHTML = `<td>${item.name}</td><td>${item.quantity}</td>`;
                inventoryBody.appendChild(row);
            });
        }

        // Initial fetch and display inventory
        getInventory();
    </script>
</body>
</html>