كيفية انشاء قائمة باستخدام HTML CSS و JavaScript

ستتعلم اليوم في هذه المدونة كيفية إنشاء تطبيق قائمة باستخدام HTML CSS وجافا سكريبت

مرحبًا أيها الأصدقاء ، ستتعلم اليوم في هذه المدونة كيفية إنشاء تطبيق قائمة باستخدام HTML CSS وجافا سكريبت.

 

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

 

كما تعلم ، فإن قائمة المهام هي قائمة بالمهام التي تحتاج إلى إكمالها أو الأشياء التي تريد القيام بها وفي تصميمنا [تطبيق قائمة] ، يوجد مربع محتوى يحتوي فقط على حقل الإدخال مع بعض الأزرار و نص. عند إدخال بعض الأحرف والنقر فوق زر الإضافة (+) ، ستتم إضافة القائمة إلى قائمة المهام الخاصة بك وسيتم أيضًا تحديث عدد المهام المعلقة.

 

يمكنك أيضًا حذف كل قائمة من خلال النقر على أيقونة سلة المهملات ، وتذكر أن أيقونة سلة المهملات تظهر فقط عند التمرير فوق القائمة المعينة وحذف جميع المهام بنقرة واحدة. إذا كنت ترغب في رؤية تطبيق قائمة المهام هذا وكيفية إنشائه ، فيمكنك مشاهدة فيديو تعليمي كامل على هذا البرنامج [Todo List App in JavaScript].

 

في الفيديو ، شاهدت تطبيق قائمة المهام وكيفية إنشائه باستخدام HTML CSS و JavaScript. آمل أن تكون قد فهمت الرموز وراء إنشاء هذا البرنامج. قد يكون من الصعب فهم رموز JavaScript لهذا البرنامج ولكن لا تقلق بمجرد تنزيل ملفات الأكواد الخاصة بهذا البرنامج والمحاولة بنفسك ، فاستفهم ذلك بسهولة.

 

قد تتساءل كيف تظل مهام تطبيق المهام هذه حتى بعد تحديث صفحة الويب بشكل صحيح؟ حسنًا ، في البداية ، سيتم تخزين المهام التي أضفتها في التخزين المحلي لمتصفحك ثم يتم استرداد هذه القوائم في ملف HTML في النموذج <li> علامة باستخدام JavaScript.

 

قد تشعر بصعوبة في فهم ما أقوله ، أليس كذلك؟ إذا كانت الإجابة بنعم ، فعليك مشاهدة الفيديو مرارًا وتكرارًا لأنني كتبت في الفيديو تعليقًا على كل سطر من أسطر جافا سكريبت وحاولت قصارى جهدي لفهم الرموز نيابةً عنك.

 

تطبيق Todo List في JavaScript

لإنشاء هذا البرنامج [تطبيق قائمة t]. أولاً ، تحتاج إلى إنشاء ثلاثة ملفات ، ملف HTML ، ملف CSS ، و ملف جافا سكريبت. بعد إنشاء هذه الملفات ، قم فقط بلصق الرموز التالية في ملفاتك. يمكنك أيضًا تنزيل ملفات التعليمات البرمجية المصدر لتطبيق قائمة المهام من زر التنزيل المحدد.

الملفات

ما هو رد فعلك؟

like

dislike

love

funny

angry

sad

wow