crud - js

يعد هذا المشروع جزءًا من ملفي الشخصي الذي يعرض مهاراتي في تطوير الويب باستخدام JavaScript. المشروع عبارة عن موقع ويب بسيط يسمح بإجراء العمليات الأساسية على البيانات: الإنشاء (Create)، القراءة (Read)، التحديث (Update)، والحذف (Delete)، والمعروفة اختصارًا بعمليات CRUD.

مكونات المشروع

يتكون المشروع من ثلاثة مكونات رئيسية:

الواجهة الأمامية (Frontend): تم تصميم الواجهة باستخدام HTML و CSS و JavaScript لتوفير تجربة مستخدم تفاعلية وسلسة.

الوظائف (Functions): تم تطوير العمليات الأساسية باستخدام JavaScript لإدارة البيانات وإجراء العمليات CRUD.

التخزين (Storage): يتم تخزين البيانات محليًا باستخدام LocalStorage لتجنب الحاجة إلى خادم خلفي (Backend).

الميزات الرئيسية

1. إنشاء (Create)

يمكن للمستخدم إضافة عناصر جديدة إلى القائمة. يتم ذلك من خلال نموذج يحتوي على حقول الإدخال المطلوبة. عند الضغط على زر الإضافة، يتم حفظ البيانات في LocalStorage وتحديث القائمة المعروضة.

2. قراءة (Read)

يعرض الموقع قائمة بالعناصر المخزنة في LocalStorage. يتم جلب البيانات وعرضها عند تحميل الصفحة، مما يتيح للمستخدم رؤية كل العناصر الموجودة.

3. تحديث (Update)

يمكن للمستخدم تعديل أي عنصر موجود في القائمة. عند النقر على زر التعديل بجانب العنصر، يتم تعبئة النموذج بالبيانات الحالية للعنصر، مما يسمح للمستخدم بإجراء التعديلات اللازمة. بعد الضغط على زر الحفظ، يتم تحديث البيانات في LocalStorage وتحديث العرض.

4. حذف (Delete)

يمكن للمستخدم حذف أي عنصر من القائمة. يتم ذلك عن طريق النقر على زر الحذف بجانب العنصر المراد حذفه، حيث يتم إزالة العنصر من LocalStorage وتحديث العرض لإظهار التغييرات.

التكنولوجيا المستخدمة

HTML: لإنشاء هيكل الصفحة والعناصر الأساسية.

CSS: لتصميم وتنسيق الواجهة.

JavaScript: لإضافة التفاعلية والوظائف الخاصة بالعمليات CRUD.

LocalStorage: لتخزين البيانات على جهاز المستخدم بشكل محلي.