قم بإنشاء قائمة المهام التي يمكن للمستخدمين القيام بها

1. أضف مهمة إلى القائمة
2. احذف مهمة من القائمة
3. قم بوضع علامة على المهمة كمكتملة

1. أضف مهمة إلى القائمة: سيقوم المستخدمون بكتابة مهمة في مربع إدخال النص وعندما ينقرون على زر "إضافة"، يجب إضافة عنصر div داخل < ul class="todo-list">
ملاحظة: استخدم أسلوب الحدث PreventDefault() لمنعه من إرسال نموذج، نظرًا لأن الزر "إضافة" في HTML من النوع "إرسال".

يجب أن يحتوي عنصر div الجديد المُضاف ضمن <ul class="todo-list"> على ما يلي بالترتيب المحدد:
(أ) عنصر قائمة يعرض اسم المهمة التي أدخلها المستخدم في مربع الإدخال. يجب أن يحتوي على عنصر المهام الواجبة في الفصل الدراسي
(ب) "زر كامل" مع الفصل كامل btn
(ج) "زر الحذف" مع سلة المهملات الخاصة بالفئة

ملاحظة: تأكد من الحفاظ على ترتيب العناصر الثلاثة المذكورة أعلاه.
2. وضع علامة على المهمة كمكتملة: عند النقر فوق الزر مكتمل، يجب أن يتم وضع خط على اسم المهمة الموجود داخل عنصر القائمة. على سبيل المثال قم بإعداد القهوة وعند النقر فوق الزر المكتمل مرة أخرى، يجب إزالة الشطب. على سبيل المثال اصنع قهوة
ملحوظة: استخدم فقط خاصية text-decoration: line-through Solid rgb(0, 0, 0); لتنفيذ هذا.

يجب أن يحتوي الزر المكتمل على Complete-btn كفئة ويجب أن يعمل كما هو موضح، وإلا فلن تنجح حالات الاختبار الخاصة بك.

3. حذف مهمة من القائمة: عند النقر فوق زر الحذف، يجب حذف المكون المقابل الذي يحتوي على زر الحذف هذا، وإزالته من < ul class="todo-list">

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

لا تقم بإجراء أية تغييرات على ملف HTML.
هنا هو رمز HTML

 قائمة المهام الخاصة بي
 
 
 
 يضيف
{"source": "ewof/sharegpt-instruct-unfiltered-deduped", "kind": "human", "evolved_from": null}