Inventory management system

 Inventory Management System – Html Css JavaScript

📁 Project Structure

inventory-system/

│

├── index.html       ← Main HTML structure

├── style.css        ← Styles for layout and visuals

└── script.js        ← JavaScript logic (CRUD + storage)

 

 

---

🚀 Purpose

This is a simple inventory management web app that allows users to:

• Add items with name, quantity, and price
   
• View all added items in a table
   
• Delete items from the inventory
   
• Store and retrieve inventory data using browser localStorage
   

No backend server or external database is required. Everything runs locally in the browser.

 

---

🧱 Technologies Used

 

---

📄 File Explanations

1. index.html

Contains the structure:

• A form to add new items
   
• A table to display inventory items
   
• Connects to style.css and script.js
   

 

<form id="item-form">

  <input type="text" id="name" placeholder="Item Name" required>

  <input type="number" id="quantity" placeholder="Quantity" required>

  <input type="number" id="price" placeholder="Price ($)" required>

  <button type="submit">➕ Add Item</button>

</form>

 

 

---

2. style.css

Provides a clean and responsive design:

• Flexbox layout for inputs
   
• Button hover effects
   
• Table with alternating colors
   
• Rounded borders and shadows
   

 

.input-group button:hover {

  background-color: #2980b9;

}

 

tbody tr:hover {

  background-color: #f0f8ff;

}

 

 

---

3. script.js

Handles the logic:

• Loads existing items from localStorage
   
• Adds new items to the inventory array
   
• Deletes selected items
   
• Updates both UI and local storage
   

Key Functions:

 

function saveItems() {

  localStorage.setItem('inventory', JSON.stringify(items));

}

 

function renderItems() {

  // Loop through array and display each item in the table

}

 

 

---

💾 How It Stores Data

• Uses localStorage.setItem() to save the inventory as a JSON string.
   
• Uses localStorage.getItem() to load it on page load.
   
• Data stays saved even after refresh or browser close.
   

Example:

 

localStorage.setItem('inventory', JSON.stringify(items));

 

 

---

✅ Features

• Add Item ✅
   
• View Items in Table ✅
   
• Delete Item ✅
   
• Persistent Storage ✅
   
• Responsive UI ✅
   

 

---

📌 How to Use

1. Open index.html in any modern browser.
    
2. Use the form to add inventory items.
    
3. Items will appear below in a table.
    
4. Click Delete to remove an item.
    
5. Refresh the page — data will still be there!
    

 

---

🧠 Ideas for Future Improvements

 

 

Git Url: https://github.com/brahmaputraS/invantory_management.git

Screenshots::