A responsive CRUD web application for creating, organizing, searching, updating, and deleting products. The application is built with HTML, CSS, and vanilla JavaScript and stores product data locally in the browser using localStorage.
View Product Inventory Manager Live
- Add new products
- Create multiple products at once
- Edit existing product information
- Delete individual products
- Delete all saved products
- Search products by title
- Search products by category
- Automatically calculate the total price
- Store product data in
localStorage - Keep data available after refreshing the page
- Display products dynamically in a table
- Responsive layout for desktop, tablet, and mobile
- Clear feedback messages for user actions
Each product can include:
- Title
- Price
- Taxes
- Advertising cost
- Discount
- Total price
- Quantity
- Category
- HTML5
- CSS3
- JavaScript
localStorage- DOM Manipulation
- Event Delegation
- Responsive Design
The application calculates the total product price from the entered values:
Total = Price + Taxes + Advertising Cost - Discount
When the form is submitted, the product is added to the product list and saved in localStorage. Products can later be searched, updated, or deleted without requiring a backend or database.
Product_Inventory_Manager/
├── index.html
├── style.css
├── main.js
└── README.md
- Clone or download the repository.
- Open the project folder.
- Open
index.htmlin your browser.
For a better development experience, you can run the project with a local server such as Live Server in Visual Studio Code.
The interface adapts to different screen sizes, including:
- Desktop
- Tablet
- Mobile
- Add product images
- Add product sorting options
- Add category statistics
- Export products to CSV
- Add dark mode
- Add cloud database integration
- Add user authentication
Kinan Ashkar
- GitHub: KinanAshkar
- Portfolio: Portfolio
This project was created for educational and portfolio purposes.