index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Inventory Management System</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1>Inventory Management System</h1>
        <div class="form-container">
            <h2>Add New Product</h2>
            <form id="productForm">
                <label for="productName">Product Name:</label>
                <input type="text" id="productName" required>
                
                <label for="productQuantity">Quantity:</label>
                <input type="number" id="productQuantity" required>
                
                <label for="productPrice">Price:</label>
                <input type="number" id="productPrice" required>

                <button type="submit">Add Product</button>
            </form>
        </div>
        <div class="inventory-list">
            <h2>Inventory List</h2>
            <table id="inventoryTable">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Name</th>
                        <th>Quantity</th>
                        <th>Price</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- Inventory items will be inserted here dynamically -->
                </tbody>
            </table>
        </div>
    </div>

    <script src="script.js"></script>
</body>
</html>