Product Management System
تفاصيل العمل
Product Management System
A web-based CRUD application for managing product inventories with real-time data persistence
Features
Full CRUD Operations
Create new products with cost calculations
Read/display product details in dynamic tables
Update existing product information
Delete single items or clear all data
Smart Cost Calculation
Automatically calculates total cost using:
Total = Price + Taxes + Ads - Discount
with real-time updates as values change
Data Persistence
Stores all product data in browser localStorage
Survives page refreshes
Maintains data integrity
Advanced Search
Search products by title or category
Dynamic filtering as you type
Case-insensitive matching
User-Friendly Interface
Clean Bootstrap-based design
Smooth scroll animations
Input validation with error handling
Responsive table layout
Technologies Used
HTML5/CSS3
Bootstrap 5 (for styling and components)
JavaScript (for DOM manipulation and logic)
localStorage (for client-side data storage)
Responsive design principles
Core Functionality
Product Creation
Enter product details
Set quantity to create multiple entries
Automatic cost calculation
Data Management
Edit existing products
Delete individual items
Bulk delete all data
Search System
Toggle between title/category search
Real-time result filtering
Highlight matching entries
Setup Instructions
Clone the repository
Open index.html in your browser
Start managing products:
Fill required fields (title, price, category)
Use "Create" to add new products
Use search to find specific items
Customization Options
Modify the color scheme in CSS
Add more input validation rules
Enhance search functionality (e.g., multi-field search)
Implement export/import features
Add user authentication
Demo