نظام إدارة المنتجات (CRUD) التفاعلي باستخدام JavaScript و Local Storage

هذا التطبيق هو نظام إدارة منتجات بسيط وكامل (CRUD) يتيح للمستخدمين إنشاء، قراءة، تحديث، وحذف سجلات المنتجات. يتميز النظام بالاحتفاظ بالبيانات حتى بعد إغلاق المتصفح عن طريق استخدام Local Storage، ويقدم واجهة مستخدم داكنة وجذابة تركز على الكفاءة وسرعة إدخال البيانات

HTML Structure هيكلة نموذج الإدخال (Form) وجدول العرض. يشمل حقول إدخال لـ (Title, Price, Taxes, Ads, Discount, Count, Category)، وزر الإضافة (submit).

التصميم (CSS) Dark Mode Theme خلفية داكنة (#222) ونص أبيض، مما يوفر تبايناً عالياً وراحة بصرية.

المدخلات (Inputs) تصميم عصري لحقول الإدخال. خلفية داكنة للحقول (#111) بدون حدود، مع تأثير التكبير والتحول إلى اللون الأسود (scale(1.1)) عند التركيز (Focus) لزيادة التفاعل.

زر الإجمالي (#total) إبراز الإجمالي المحسوب. خلفية حمراء داكنة افتراضية، تتحول إلى اللون الأخضر الداكن عند وجود قيمة موجبة للإجمالي، مما يوفر ملاحظات بصرية فورية.

الأزرار تصميم موحد وجذاب. أزرار ذات خلفية أرجوانية داكنة (#470053) وتأثير زيادة تباعد الأحرف (letter-spacing: 1px) عند التمرير (Hover) لرد فعل مرئي سريع.

وظائف JavaScript الرئيسية (Core Functionality)

حساب الإجمالي (Get Total):

وظيفة تحسب الإجمالي تلقائيًا بناءً على (السعر + الضرائب + الإعلانات - الخصم).

يتم استدعاؤها في حدث onkeyup على حقول السعر لتوفير تحديث فوري.

يتم تغيير لون خلفية حقل الإجمالي إلى الأخضر إذا كان الإجمالي موجباً، وإلى الأحمر إذا كان فارغاً (لتنبيه المستخدم).

تخزين البيانات (CRUD - Create & Read):

يتم تخزين جميع المنتجات في مصفوفة (dataProduct) ضمن Local Storage لضمان استمرار البيانات.

وظيفة submit.onclick: تُنشئ كائناً جديداً للمنتج وتضيفه إلى مصفوفة البيانات.

ميزة التكرار (Count Logic): إذا كانت قيمة حقل Count أكبر من 1، يتم إنشاء نسخ متعددة من المنتج وإضافتها للمصفوفة.

وظيفة showData(): تنشئ جدول HTML كاملاً بشكل ديناميكي من المصفوفة المعروضة (dataProduct).

وظائف التعديل والحذف (Update & Delete):

deleteData(i): تحذف المنتج من المصفوفة باستخدام splice()، وتُحدِّث Local Storage، ثم تعيد عرض البيانات.

deleteAll(): تُمسح جميع البيانات من Local Storage وتُفرغ المصفوفة بالكامل.

updateData(i): تُحضر بيانات المنتج المحدد إلى حقول الإدخال، وتغيّر وضع التطبيق إلى "Update"، وتغيّر نص زر الإضافة إلى "update now !".

وظيفة البحث (Search Block):

يتيح البحث عن المنتجات حسب "Title" أو "Category".

وظيفة getSearchMood(id): تُحدد وضع البحث وتُغيّر الـ placeholder لحقل البحث بشكل ديناميكي.

وظيفة searchData(value): تقوم بترشيح (Filtering) بيانات الجدول بناءً على قيمة الإدخال المُحوّلة إلى أحرف صغيرة (toLowerCase()) لضمان مطابقة غير حساسة لحالة الأحرف.

الخلاصة

يمثل هذا المشروع تطبيقاً عملياً وفعالاً لمفاهيم CRUD الأساسية في Vanilla JavaScript، مُركزاً على تجربة المستخدم (UX) من خلال التغذية الراجعة البصرية الفورية (حساب الإجمالي، تأثيرات التركيز) وإدارة البيانات بكفاءة عبر Local Storage.