A dynamic Inventory Management System built using Vanilla JavaScript. This application allows users to manage products efficiently with full CRUDS capabilities (Create, Read, Update, Delete, Search). It features automatic calculations and persists data using the browser's Local Storage, simulating a real-world database experience.
- Create Products: Add new items with automated total price calculation based on (Price, Taxes, Ads, and Discount).
- Auto Calculation: The system automatically validates inputs and changes the total color (Red/Green) based on data availability.
- Read Data: Displays all inventory in a clean, responsive table.
- Update Mode: Smoothly retrieve data back to inputs for editing without refreshing the page.
- Delete: Options to delete a single item or Delete All items at once with one click.
- Advanced Search: Real-time search functionality by Title or Category.
- Data Persistence: Uses Local Storage to keep data saved even after closing the browser.
- HTML5 (Structure)
- CSS3 (Styling & Responsive Design)
- JavaScript (ES6+) (Logic & DOM Manipulation)
- Enter product details (Title, Price, Taxes, Ads, Discount).
- The Total will be calculated automatically.
- Click Create to add the product to the table.
- Use the Search bar to filter products by Title or Category.
- Click Update to edit a product or Delete to remove it.
You can try the application live here: [Click Here to View App] https://mohamedamerdev-coder.github.io/Product-Mangment-System/)
Mohamed Amer