How to build a JavaScript-based inventory management system?
13/03/2024
•
5
min
Creating a JavaScript-based inventory management system is a complex task that involves both HTML for the basic structure of the pages and JavaScript for the backend logic. Here are step-by-step instructions to build a basic inventory management system using HTML, JavaScript and localStorage for data persistency.
Step 1
Create The HTML Structure
Let's start by creating a simple structure for the inventory system using HTML.
<!DOCTYPE html>
<html>
<head>
<title>Inventory Management System</title>
</head>
<body>
<h1>Inventory Management System</h1>
<form id="itemform">
<input type="text" id="item_name" placeholder="Item Name" required>
<input type="number" id="item_quantity" placeholder="Quantity" required>
<button type="submit">Add Item</button>
</form>
<table id="inventory_table">
<thead>
<tr>
<th>Item Name</th>
<th>Quantity</th>
<th>Action</th>
</tr>
</thead>
<tbody id="table_body">
</tbody>
</table>
<script src="inventory.js"></script>
</body>
</html>
Step 2
Initialize The Inventory With JavaScript
Create a JavaScript file named 'inventory.js' and initialize an inventory variable as an empty array. If there are items stored in the localStorage, load them into the inventory.
let inventory = JSON.parse(localStorage.getItem('inventory')) || [];
Step 3
Ask your specific question in Mate AI
In Mate you can connect your project, ask questions about your repository, and use AI Agent to solve programming tasks
Create functions to manage the inventory
Create a function that will handle adding new items in the inventory and will prevent adding duplicate items. It will update the quantity of existing items.
function addItem(name, quantity) {
let existing = inventory.find(item => item.name === name);
if(existing) {
existing.quantity += quantity;
} else {
inventory.push({name:name, quantity:quantity});
}
localStorage.setItem('inventory', JSON.stringify(inventory));
displayInventory();
}
Create a function that can remove items from the inventory.
function removeItem(name) {
let existing = inventory.find(item => item.name === name);
if(existing) {
inventory = inventory.filter(item => item.name !== name);
}
localStorage.setItem('inventory', JSON.stringify(inventory));
displayInventory();
}
Create a function that updates the HTML table whenever a change is made to the inventory.
function displayInventory() {
let tableBody = document.getElementById('table_body');
tableBody.innerHTML = '';
for(let item of inventory) {
let row = `<tr>
<td>${item.name}</td>
<td>${item.quantity}</td>
<td><button onclick="removeItem('${item.name}')">Delete</button>
`;
tableBody.innerHTML += row;
}
}
Step 4
Add Event Listeners To The Form
Add an event listener to the form that will prevent the default form submission and will call the addItem function.
document.getElementById('itemform').addEventListener('submit', function(e) {
e.preventDefault();
let name = document.getElementById('item_name').value;
let quantity = Number(document.getElementById('item_quantity').value);
addItem(name, quantity);
this.reset();
});
And finally, call the displayInventory function when the page is loaded:
document.body.onload = displayInventory;
This will set up a basic inventory management system where you can add and delete items. You can extend this to include more features, such as editing item details, searching and sorting items, etc. Please note that this simple inventory uses the browser's localStorage for data persistency across sessions. For a more robust database and optimization, consider integrating with server-side technologies like Express.js (for Node.js) and a database system such as MySQL or MongoDB.
AI agent for developers
Boost your productivity with Mate:
easily connect your project, generate code, and debug smarter - all powered by AI.
Do you want to solve problems like this faster? Download now for free.