درس عمل Todo List بإستخدام الجافاسكريبت (الجزء الثاني)

درس عمل Todo List بإستخدام الجافاسكريبت (الجزء الثاني)

محمد جعفر 1:50:00 ص

الجزء الثاني من الدرس السابق حيث سنقوم بإكمال قائمة  المهام وتفعيل إزرارا لحذف لحذف المهام  والمزيد ... 

السلام عليكم 

دعنا نكمل معاً مع بدأناه في الدرس السابق وإكمال تطبيق Todo List الخاص بنا

لمشاهدة الجزء الأول من الدرس اضغط هنا

توقفنا في الجزء الأول بعد أن أكملنا عملية إدخال المهام عن طريق الحقل ومن ثم إظهارها مباشرة

الآن سنبدأ بتفعيل أزرار الحذف التي لدينا عند الضغط عليها ستقوم مباشرة بحذف المهمة وإزالتها من القائمة
 دعنا نذهب مباشرة إلى ملف index.js اضف الكود التالي وبعدها سأقوم بالشرح :

// حذف المهام
var deleteButtons = document.getElementsByClassName("delete");
var i;
for (i = 0; i < deleteButtons.length; i++) {
  deleteButtons[i].onclick = function() {
    var list = this.parentElement;
    list.remove();
  }
}

هنا في البداية لدينا deleteBUttons استخدمنا getElementsByClassName وهذه ستقوم بجلب جميع العناصر التي تحتوي على كلاس بإسم delete

 فلو رجعت إلى صفحة HTML الخاصة بنا ستجد مع كل ايقونة هناك كلاس بإسم delete
 الآن سنقوم بتنفيذ حلقة تكرارية على كل هذه العناصر

 * ملاحظة : getElementsByClassName تقوم بإرجاع جميع قيم الكلاسات على شكل مصفوفة ولذلك نستطيع تنفيذ حلقتنا التكرارية من خلال هذه المصفوفة

 بداخل حلقة التكرار لدينا deleteButtons[i].onclick وهنا سنقوم بالمرور على كل كلاس ونضيف الحدث onclick
 بحيث عندما تقوم بالضغط على زر الحذف سيقوم بنفيذ دالة معينة وهنا مهمتنا هي حذف مهمة من القائمة

 بعد ذلك لدينا var list = this.parentElement هنا سنقوم بجلب العنصر الأب لزر الحذف
 فلو رجعت لصفحة HTML ستجد بأن ايقونة الحذف بداخل عنصر li

وهنا من اجل حذف المهمة لن نحتاج لحذف زر الحذف وإنما نحتاج لحذف عنصر li وما بداخله من نص (المهمة) وزر وغيرها سنقوم بحذف العنصر كاملاً من خلال list.remove()

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

 مهلاً !!
 ما هذا ؟!
لا استطيع حذف المهمة التي اضفتها !!
 ما الذي يحدث هنا ؟!!

 هناعندما قمنا في الأعلى بتحديد الكلاسات بإسم delete وعمل الحلقة التكرارية كان لدينا كلاسين فقط
 ولكن عندما قمنا بإضافة مهمتنا الجديد والتي تحتوي كلاس جديد لم يتم تحديدها فإضافة المهمة الجديدة تمت بعد أن قمنا بالحلقة التكرارية ولذلك لم يتم تحديد الزر الجديد معها

 الحل هو أن نعود من جديد في المكان الذي أنشأنا فيه زر الحذف اسفل list.appendChild(button)  مباشرة سنقوم بإضافة نفس الكود الذي اضفناه سابقاً مرة اخرى كما في التالي:

      // اضافة زر الحذف
      var button = document.createElement("i");
      button.className = "fas fa-trash delete ";
      list.appendChild(button);
      // ===================هنا=======================
      for (i = 0; i < deleteButtons.length; i++) {
        deleteButtons[i].onclick = function() {
          var list = this.parentElement;
          list.remove();
        }
      }

الآن لو ذهبت وقمت بالتجربة فستجد أن كل شيء على ما يرام

 خطوتنا التالية هي أن نقوم بتحديد المهمة عند الإنتهاء منها

 لو ذهبت ورأيت قائمة المهام التي اضفناها يدوياً عن طريق HTML ستجد هناك مهمة "الذهاب للتسوق" وتم تحديدها على أنها قد تم الإنتهاء منها
 لو ذهبت ورأيت هذا العنصر على صفحة HTML ستجد بأننا اضفنا له كلام "checkd"

 هنا الفكرة التي سنتبعها بسيط جداً وهي كالتالي :
 عند الضغط على مهمة معين سنقوم بالتأكد من أنها تحتوي على كلاس "checkd"
 فإن لم تكن تحتوي على الكلاس سنقوم بإضافته وإن كانت تحتوي فعلاً على هذا الكلاس سنقوم بحذفه
 طبعاً سنقوم بكل هذا بإستخدام الجافاسكريبت فهيا بنا إلى الكود
 قم بإضافة الكود التالي :

// تحديد المهام المنتهية مع اضافة كلاس checked
var list = document.querySelector('ul');
list.addEventListener('click', function(e) {
  if (e.target.tagName === 'LI') {
    e.target.classList.toggle('checked');
  }
}, false);

هنا استخدمنا querySelector وقمنا بتحديد ul وهي القائمة الخاصة بنا
 بعدها اضفنا لها addEventListener هنا طبعاً سنستمع للحدث click
 قمنا بعدها بتبع العنصر الذي سيتم الضغط عليه وهل هو li عن طريق e.target.tagName
 بعدها بكل بساطة اضفنا e.target.classList.toggle('checked')
هنا toggle تقوم بشكل مباشر بإضافة الكلاس checked إن لم يكن متواجد وبنفس الوقت تقوم بحذفه في حال كان متواجد

 إذا كما نرى الموضوع هنا بسيط وسهل جداً
 الآن لنذهب ونجرب معاً ... النتيجة :

 إلا هنا نكون قد إنتهينا ولكن كخطوة إضافة سنقوم بإضافة رسالة تفيد بإنه لا يوجد لديك مهام في حال تم حذف جميع المهام

 لا تخف ستكون خطوة سريعة سنقوم بإضافة دالة جدديد كما في التالي:

// إظهار أو إخفاء الرسالة التي تظهر في حال لم يكن هناك مهام
var showEmptyMessage = function(){
  var message = document.getElementById("emptyMessage");
  var todos = document.getElementsByTagName('li');

  return message.style.display = todos.length < 1 ? 'block' : 'none';
}

هنا في البداية عرفنا متغيير بإسم message وهو يحدد عنصر h4 في صفحة HTML الخاصة بنا
 طبعاً هذا العنصر قمنا بإخفائه بإستخدام css وكل ما نحتاج إليه الآن هو إظهاره عند حذف جميع المهام

 بعدها بإستعمال getElementsByTagName طبعاً هنا قمنا بتحديد جميع عناصر li وهذه العناصر طبعاً هي عناصر المهام التي لدينا
 وطبعاً getElementsByTagName تعود لنا على شكل مصفوفة ومن خلالها نستطيع الوصول إلى عدد مهامنا بإستخدام الخاصية length

 الآن سنقوم باللتغيير في الإستايل وبالتحديد في خاصية display ستكون block في حال كانت اصغر من 1 اما غير ذلك فسنجعلها none

 طبعاً في css display: none تقوم بإخفاء العنصر

 الآن بعد أن اكملنا هذه الدالة سنحتاج لتشغيلها عند الحذف
 سنضيفها في 3 اماكن لدينا في الكود

 الأولى بعد عملية اضافة المهمة الجديدة وذلك حتى يتم إخفاء الرسالة في حال تمت اضافة مهمة جديد وكانت الرسالة موجودة
 الثانية والثالثة بعد عملية الحذف مباشرة لإظهار الرسالة في حال تم حذف جميع المهام

 في حال لم تستطع معرفة أين تضع الدالة راجع الكود النهائي

 الآن دعنا نقم بالتجربة ونقوم بحذف جميع المهمات وبعدها اضافة مهمة جديدة النتيجة :

 كما لاحظت عند حذف جميع المهام تظهر الرسالة مباشرة وعند اضافة مهمة بعد ذلك تحتفي الرسالة تلقائياً

 مبروك !! إلى هنا يكون درسنا قد انتهى

وهذه النتيجة النهائية للدرس



الكود على Github (اضغط هنا)

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