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

3:14:00 م
سنتعلم معاً في هذا الدرس كيفة عمل Todo List بإستخدام الجافاسكريبت دون استخدام أي مكتبات



 السلام عليكم ورحمة الله وبركاته

 في هذا الدرس سنقوم معاً بعمل تطبيق بسيط (Todo List) قائمة لتأدية المهام بإستخدام الجافاسكريبت
 سنركز في هذا الدرس على استخدام الجافسكريبت فقط دون الإعتماد على مكتبة جكويري أو أي مكتبات آخرى

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


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

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

 # متطلبات الدرس :
 * معرفة جيدة بأساسيات الجافاسكريبت بالإضافة إلى HTML&CSS

أهم خصائص ودوال javascrip التي يتوجب عليك معرفتها :




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

 الآن دعنا نبدأ الدرس :

 في البداية قم بإنشاء مجلد جديد على جهازك (قم بتسميته كما تريد) بداخل هذا المجلد سننشئ ثلاثة ملفات
 1- index.html
 2- style.css
 3- index.js

 الآن بعد أن أنشأت هذه الملفات سنقوم معاً بالبدء بفتح ملف index.html وقم بإضافة الكود التالي : 

<!DOCTYPE html>
<html lang="ar" dir="rtl">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="./style.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
    <title>Todo List</title>
  </head>
  <body>

    <div class="container">

      <form id="form">
        <input type="text" name="text" id="newTodo" placeholder="اكتب النص هنا...">
        <span id="error"></span>
        <button type="submit" name="button" id="submitButton">
          <i class="far fa-calendar-plus"></i>
           إضافة
        </button>
      </form>

      <h4 id="emptyMessage">لا يوجد لديك مهمام</h4>

      <ul id="list">
        <li>
          زيارة مدونة محمد جعفر
          <i class="fas fa-trash delete"></i>
        </li>
        <li class="checked">
          الذهاب إلى التسوق
          <i class="fas fa-trash delete"></i>
        </li>
      </ul>
    </div>

    <script type="text/javascript" src="./index.js"> </script>
  </body>
</html>


حسناً كما ترى مجرد ملف HTML عادي جدأً ليس هناك شيء غريب
 قمنا في البداية بإضافة مكتبة fontawesome فقط لنتسطيع من اضافة بعض الأيقونات
 كما قمنا ايضاً بإضافة form بسيط لنستطع ادخال البيانات من خلاله

 ربما لاحظت span اسفل الحقل يحتوي على id بإسم error هنا حيث سنقوم بإضافة رسالة الخطأ عند التحقق من محتوى الحقل، سنقوم بإخفاء هذا العنصر من CSS من البداية بشكل مباشر

 ربما لاحظت ايضاً تواجد عنوان h4 يحتوي على id بإسم emptyMessage وهذه الرسالة التي ستظهر عندما لا يكون هناك مهام متوفرة سنقوم بإخفائها ايضاً كما هو الحال مع رسالة الخطأ بإستخدام css فيما بعد عن طريق disply:none

 وبعد ذلك واخيراً لدينا قائمة المهام مع ايقونة الحذف (قمنا هنا بإستخدام مكتبة fontawesome)

 حسنا هنا انتهينا من ملف HTML ولا يوجد أي شيء يحتاج لشرح الآن سنتجه لملف style.css

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

@import url(//fonts.googleapis.com/earlyaccess/notokufiarabic.css);
* {
  margin: 0;
  padding: 0;
}

html, button {
 font-family: 'Noto Kufi Arabic', sans-serif;
}

body {
  background: #dfdfdf;
}

.container {
  display: block;
  margin: 0 auto;
  background: white;
  padding: 30px;
  border-radius: 4px;
  height: 70vh;
  width: 400px;
  overflow: scroll;
  overflow: auto;
}

form {
  margin-bottom: 25px;
}

input {
  border: none;
  width: 95%;
  height: 20px;
  padding: 10px;
  background: #dfdfdf;
  border-radius: 4px;
  display: block;
}

#submitButton {
  border: none;
  width: 90px;
  height: 30px;
  line-height: 30px;
  color: white;
  background: #ea5455;
  border-radius: 4px;
  cursor: pointer;
  display: block;
  margin: 10px auto;
  font-size: 13px;
}

#submitButton:hover {
  background: #e26869;
}

.delete {
  color: white;
  cursor: pointer;
  position: absolute;
  left: 10px;
  top:10px;
}

.delete:hover {
  color: #ff5656;
}

ul li {
  list-style: none;
  text-align: right;
  font-size: 13px;
  background: #dfdfdf;
  border-radius: 4px;
  color: #5a5a5a;
  position: relative;
  height: 40px;
  line-height: 40px;
  margin: 15px 0;
  padding: 0 10px;
  cursor: pointer;
}

ul li.checked {
  text-decoration: line-through;
  background: #aba8a8;
  color: #fff;
}

ul li:hover {
  background: #d2cfcf;
}

ul li.checked:hover {
  background: #908e8e;
}

#error {
  text-align: right;
  display: block;
  color: red;
  font-size: 14px;
  font-family: sans-serif;
  margin-top: 3px;
  display: none;
}

#emptyMessage {
  display: block;
  text-align: center;
  margin: 0;
  width: 100%;
  color: #5a5a5a;
  background: #dfdfdf;
  height: 100px;
  line-height: 100px;
  border-radius: 4px;
  display: none;
}


الآن بعد أن انتهينا من نسخ الاستايل يفترض أن تظهر لديك النتيجة كما في التالي :



 حسناً الآن دعنا نذهب واخيراً الى ملف index.js حيث سنقوم بالبدء بكامل عملنا من هنا

 أول خطوة هنا سنقوم بإنشاء متغير from 

var form = document.getElementById("form");

الآن من خلال هذا المتغير سنستطيع الوصول للعنصر form والتعامل معه

 الآن دعنا نقوم بذلك سأقوم بكتابة الكود أولا ثم سأقوم بالشرح 

form.addEventListener("submit", function(event){
    event.preventDefault();
  addNewTodo();
  
});


هنا قمنا بإضافة addEventListener وهذه الدالة تسمح لنا بالإستماع لحدث معين للـ form الخاص بنا
 الخانة الأولى في الدلة هي الحدث الماراد الإستماع إليه وفي الخانة الثانية الدالة التي سنقوم بتنفيذها عند حدوث الحدث
 في حالتنا سنقوم بالإستماع للحدث submit (كما تلاحظ في الخانة الأولى) أي عند عمل submit للـ form الخاص بنا سنقوم بإضافة المهمة الجديدة للقائمة
 بعد ذلك داخل الدالة قمنا بإضافة event.preventDefault  لمنع تحديث الصفحة عند عمل submit
 وفي نهاية الدالة قمنا بإضافة الدالة addNewTodo وهذه الدالة التي سنقوم بتنفيذها عن عمل submit

 الآن دعنا نقوم بالذهاب لإنشاء هذه الدالة كما يلي : 

function addNewTodo(){
  alert('تم اضافة المهمة الجديد بنجاح');
}


الآن لو ذهبت وقمت بعمل submit النتيجة :



 حسناً بالتأكيد هذه ليست النتيجة التي نريدها أو نبحث عنها سنعود الآن لدالتنا addn newTodo وسنقوم بتعديلها كما في التالي : 

function addNewTodo(){
  var list = document.createElement('li');
  var text = document.getElementById('newTodo').value;
  var nodeText = document.createTextNode(text);
  var errorMessage = document.getElementById('error');
}


كما تلاحظ اضفنا ثلاثة متغييرات
 الأول list وهنا قمنا بإنشاء عنصر li جديد بإستخدام createElement
 المتغير الثاني text سنقوم فيه بحفظ النص الذي قمنا بإدخاله من خلال الحقل
 المتغير الثالث nodeText قمنا بعمل نود من نوع text بإستخدام createTextNode حتى نستطيع إدخال النص الخاص داخل العنصر list
 واخيرا لدينا errorMessage وهذا هو span في صفحة html الخاصة بنا الذي قمنا بإعطائه معرف بإسم error وهنا حيث سنقوم بإضافة رسالة الخطأ إن وجدت عند التحقق من محتويات الحقل الخاص بنا

 الآن أول خطوة سنقوم بها أثناء ادخال المهمة الجديدة هي validations التحقق من محتوى الحقل
 وهنا سنتحقق من أمرين فقط الأمر
 الأول أن لا يكون الحقل فارغاً عند عمل submit
 الأمر الثاني أن لا يكون النص المدخل أقل من ثلاثة أحرف

 الآن دعنا نبداً بإضاف ذلك كما يلي: ( لا تنسى بأننا لا زلنا نعلم داخل دالة addNewTodo لذلك اضف هذ الكود اسفل المتغيير error message مباشرةً) 

    
    // التحقق من النص
    if(text === ''){
      errorMessage.innerText = 'الرجاء ملئ الحقل';
      // اظهار رسالة الخطأ
      errorMessage.style.display = 'block';
  
    }else if (text.length < 3) {
      errorMessage.innerText = 'النص قصير جداً، يجب أن لا يقل عن ثلاثة احرف';
      // اظهار رسالة الخطأ
      errorMessage.style.display = 'block';
  
    }else{
      // اضافة المهمة الجديدة
  
    }


هنا بكل بساطة استخدمنا الشرط if للتحق في البداية من أن النص المدخل غير فارغ فإن كان فارغاً سنقوم بإرسال رسالة الخطأ
 كما تعلم لدينا العنصر span مع معرف error داخل html قمنا بتعرفه سابقاً في متغيير بإسم errorMessage وهنا بإستخدام innerText نستطيع أن ندخل أي نص بداخل العنصر
 بعد ذلك سنقوم بتغيير إستايل ذلك العنصر وتغيير خاصية display إلى block
 ففي الأساس نحن هنا قمنا بإخفاء هذا العنصر بإستخدام css عن طريق display:none وهنا قمنا بتغييرها عن طريق الجافاسكريبت

 اتمنى أن تكون هذه النقطة قد اتضحت

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

 الآن لو ذهبت وقمت بتجربة عمل submit دون ادخال نص يفترض أن تظهر لك رسالة الخطأ



 خطوتنا التالية هي اضافة المهام واظهارها بشكل مباشر

 الآن بعد else if الآخيرة بعد التحقق من محتويات الحقل هناك eles قمت بإضافة تعليق
 // اضافة المهمة الجديدة

  اسفل هذا التعليق مباشرة سنقوم بإدخال الكود التالي : 

    list.appendChild(nodeText);
    document.getElementById('list').prepend(list);
    document.getElementById('newTodo').value = '';

    // اخفاء رسالة الحطأ في حال كانت ظاهرة
    errorMessage.style.display = 'none';
      // اضافة زر الحذف
      var button = document.createElement("i");
      button.className = "fas fa-trash delete ";
      list.appendChild(button);

هنا في البداية قمنا بإستخدام appendChild لإضافة النص (المهمة الجديد)
بعدها بإستخدام prepend ستسمح لنا بإضافة العنصر الجديد كأول عنصر
 في حال أردت اضافة العنصر في النهاية استخدم appendChild
 بعدها قمنا بإخفاء رسالة الخطأ الخاصة بالحقل
 واخيرا في النهاية قمنا بإضافة عنصر جديد من نوع i واضفنا له الكلاسات fas fa-trash delete وطبعاً هذا العنصر هو زر الحذف الخاص بنا

 لا تنسى أننا نستخدم fontawesome  لذلك استخدمنا العنصر i

 الآن إذهب وقم بالتجربة يفترض الآن عند إضافة مهمتك الجديد أن تظهر بشكل مباشر كالتالي:



 حسناً،  إلى هنا نكون قد انتهينا من الجزء الأول من الدرس بعد أن قمنا بعمل التالي:
 1 - التحقق من النص المدخل
 2 - ادخال النص وإظهاره مباشرة أعلى القائمة

 الآن يتبقى لنا 3 أشياء اخرى وهي :
 1- حذف المهمة
 2- تحديد المهمة بعد الإنتهاء منها
 3- إظهار رسالة تفيد بإنه لا يوجد مهام عند حذف جميع المهام

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

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

ليست هناك تعليقات

المقالات الاكثر مشاهدة

قالب هاش تك 2016 © - منتج إبداعي طور بواسطة حيّاك