(Local Storage CRUD App)
وصف المشروع
مشروع إدارة المنتجات تم تطويره باستخدام HTML, CSS, JavaScript, و Bootstrap، يهدف إلى إنشاء واجهة بسيطة وسهلة الاستخدام لإضافة المنتجات، تعديلها، حذفها، والبحث عنها، مع حفظ البيانات في Local Storage داخل المتصفح دون الحاجة إلى قاعدة بيانات خارجية.
الوظائف الأساسية (Features):
إضافة منتج جديد:
إدخال اسم المنتج، السعر، الفئة، الوصف، وصورة المنتج، ثم حفظه محليًا.
✏️ تعديل المنتج:
يمكن تعديل بيانات أي منتج مخزن مسبقًا.
حذف المنتج:
إمكانية حذف أي منتج من القائمة بسهولة.
البحث المباشر:
البحث عن منتج بالاسم أثناء الكتابة (Live Search).
التخزين المحلي (Local Storage):
حفظ واسترجاع البيانات حتى بعد إغلاق الصفحة أو تحديثها.
عرض الصور:
يتم عرض صورة المنتج مع تفاصيله في بطاقة (Bootstrap Card) أنيقة.
التقنيات المستخدمة:
HTML5 – لبناء الهيكل العام.
CSS3 & Bootstrap 5 – لتنسيق الواجهة والعناصر الجاهزة.
JavaScript (Vanilla JS) – لتنفيذ عمليات CRUD (Create, Read, Update, Delete).
Local Storage – لتخزين البيانات داخل المتصفح.
طريقة التشغيل:
افتح الملف index.html في المتصفح.
أضف منتجًا جديدًا عبر النموذج.
يمكنك تعديل أو حذف أو البحث عن المنتجات في أي وقت.
أهم ما يميز المشروع:
لا يحتاج إلى خادم (Server) أو قاعدة بيانات خارجية.
تصميم بسيط وسهل الاستخدام.
يحاكي فكرة نظم إدارة المنتجات الصغيرة (Inventory Systems).