Todo List

todo list without jquery or any library

by MoJaffer

HTML

<link rel="stylesheet" href="//fonts.googleapis.com/earlyaccess/notokufiarabic.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
<div class="moJaffer">
  <a href="https://mohammed-jaffer.blogspot.com/">
        <img src="https://lh3.googleusercontent.com/1z6nB9VGU7AwzmyKk1IHeqihB_V4M3l3CfgkxazDh2M1FEakw4uKt-Fam4MqQlNh5UtadqjZMDdWUTyOrg=w247-h68-rw" alt="Mohammed Jaffer">
        <span>mohammed-jaffer.blogspot.com</span>
      </a>
</div>

<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>

CSS

html,
button {
  direction: rtl;
  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;
  color: #ea5455;
  font-size: 14px;
  font-family: sans-serif;
  margin-top: 3px;
  display: none;
}

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

/* ---------- MoJaffer ---------- */

.moJaffer {
  width: 400px;
  margin: 30px auto;
  text-align: center;
  animation: lighting 1.5s infinite;
}

.moJaffer a {
  text-decoration: none;
  text-align: center;
  color: #5a5a5a;
}

.moJaffer:hover {
  animation-name: none;
}

.moJaffer img {
  width: 200px;
}

.moJaffer span {
  display: block;
  margin-top: 5px;
 ...

JavaScript

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

  // التحقق من النص
  if (text === '') {
    errorMessage.innerText = 'الرجاء ملئ الحقل';
    // اظهار رسالة الخطأ
    errorMessage.style.display = 'block';

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

  } else {
    // اضافة المهمة الجديدة
    list.appendChild(nodeText);
    document.getElementById('list').prepend(list);
    document.getElementById('newTodo').value = '';

    // اخفاء رسالة الحطأ في حال كانت ظاهرة
    errorMessage.style.display = 'none';

    // إظهار رسالة في حال كانت قائمة المهام فاراغة
    showEmptyMessage();

    // اضافة زر الحذف
    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();
        // إظهار رسالة في حال كانت قائمة المهام فاراغة
        showEmptyMessage();
      }
    }

  }

}


// حذف المهام
var deleteButtons = document.getElementsByClassName("delete");
var i;
for (i = 0; i < deleteButtons.length; i++) {
  deleteButtons[i].onclick = function() {
    var list = this.parentElement;
    list.remove();
    // إظهار رسالة في حال كانت قائمة المهام فاراغة
    showEmptyMessage();
  }
}

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

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