Note-Taking Application

تطبيق تدوين الملاحظات

هذا تطبيق بسيط لتدوين الملاحظات يسمح للمستخدمين بإضافة وحذف الملاحظات. يستخدم التطبيق React لإدارة واجهة المستخدم والحالة. يتم تنفيذ ميزتين رئيسيتين في هذا التطبيق:

إضافة الملاحظات:

يمكن للمستخدمين إنشاء ملاحظات جديدة عن طريق إدخال عنوان ومحتوى.

يتم تخزين كل ملاحظة ككائن في مصفوفة ضمن حالة مكون الـ App الرئيسي.

يعرض التطبيق قائمة بمكونات الـ Note ديناميكيًا بناءً على البيانات المخزنة في الحالة، مع عرض عنوان الملاحظة ومحتواها.

حذف الملاحظات:

تحتوي كل ملاحظة على زر لحذفها. عند النقر عليه، يتم حذف الملاحظة المقابلة من المصفوفة.

يتولى مكون الـ App منطق الحذف باستخدام دالة filter لإزالة الملاحظة ذات المعرف الفريد (ID).

كيف يعمل التطبيق:

إدارة الحالة:

يحتوي مكون الـ App على متغير حالة notes الذي يحتوي على مصفوفة من كائنات الملاحظات.

تمثل كل ملاحظة ككائن يحتوي على id فريد، وtitle (العنوان)، وcontent (المحتوى).

إضافة ملاحظة:

يوجد نموذج في التطبيق لالتقاط عنوان الملاحظة ومحتواها.

عند إرسال النموذج، يتم إنشاء كائن ملاحظة جديد وإضافته إلى مصفوفة notes باستخدام دالة addNote، التي تقوم بتحديث الحالة.

عرض الملاحظات:

يقوم مكون الـ App بعرض قائمة من مكونات Note باستخدام دالة map.

كل مكون Note يستقبل بيانات الملاحظة كـ props ويعرض العنوان والمحتوى.

حذف ملاحظة:

يحتوي كل مكون Note على زر حذف.

عند النقر على زر الحذف، يتم تفعيل الدالة onDelete، التي يتم تمريرها من المكون الأب.

تقوم دالة handleDelete في المكون الأب بتصفية الملاحظة التي تحتوي على المعرف (ID) المطابق، وتحديث الحالة بناءً على ذلك.

التقنيات المستخدمة:

React: يتم استخدام React لإدارة واجهات المستخدم والحالة.

JavaScript: لتنفيذ منطق إضافة وحذف الملاحظات وعرضها.

النتيجة النهائية:

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