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 todos = document.getElementsByTagName('li'); console.log(todos); return message.style.display = todos.length < 1 ? 'block' : 'none'; } var form = document.getElementById("form"); // اضافة مهمة جديدة form.addEventListener("submit", function(event) { event.preventDefault(); addNewTodo(); });
<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>
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; font-family: monospace; } @keyframes lighting { 0% { opacity: 1; } 25% { opacity: 0.25; } 75% { opacity: 0.75; } 1000% { opacity: 1; } }