كيفية إنشاء قائمة مهام باستخدام جافا سكريبت
مقدمة
تعتبر **قائمة المهام** من الأدوات الأساسية لتنظيم الوقت وزيادة الإنتاجية. من خلال استخدام **جافا سكريبت**، يمكننا إنشاء تطبيق بسيط لقائمة المهام يمكّن المستخدمين من إضافة، حذف، وعرض المهام بكل سهولة. في هذا المقال، سنستعرض الخطوات اللازمة لإنشاء تطبيق قائمة مهام باستخدام **جافا سكريبت**.
إنشاء هيكل HTML لقائمة المهام
أول خطوة هي إنشاء هيكل بسيط باستخدام HTML. سنقوم بإنشاء مدخل لإضافة المهام وزر لحفظها، بالإضافة إلى قائمة لعرض المهام المضافة.
<div>
<input type="text" id="taskInput" placeholder="أدخل مهمة جديدة">
<button id="addTaskButton">إضافة مهمة</button>
</div>
<ul id="taskList"></ul>
إضافة جافا سكريبت للتفاعل
بعد الانتهاء من هيكل HTML، نحتاج الآن لإضافة **جافا سكريبت** لجعل تطبيق قائمة المهام تفاعليًا. سنقوم بإنشاء وظيفة لإضافة مهمة جديدة وعرضها في القائمة.
<script>
document.getElementById("addTaskButton").onclick = function() {
var taskInput = document.getElementById("taskInput").value;
if (taskInput) {
var li = document.createElement("li");
li.appendChild(document.createTextNode(taskInput));
document.getElementById("taskList").appendChild(li);
document.getElementById("taskInput").value = "";
}
};
</script>
إضافة ميزات إضافية
يمكننا تحسين قائمة المهام بإضافة ميزات أخرى مثل حذف المهام. سنحتاج إلى تعديل الكود لإضافة زر “حذف” بجانب كل مهمة.
var deleteButton = document.createElement("button");
deleteButton.appendChild(document.createTextNode("حذف"));
deleteButton.onclick = function() {
this.parentElement.remove();
};
li.appendChild(deleteButton);
التخلص من المهام المنتهية
يمكن تحسين التطبيق أكثر من خلال إمكانية تمييز المهام المنتهية. يمكننا إضافة حدث للنقر على المهمة لتقوم بتغيير أسلوبها للإشارة إلى أنها اكتملت.
li.onclick = function() {
this.classList.toggle("completed");
};
تحسين واجهة المستخدم باستخدام CSS
لنجعل التطبيق يبدو أفضل، يمكننا استخدام بعض أنماط **CSS** لتنسيق قائمة المهام. إليك بعض الأنماط التي يمكنك تجربتها:
<style>
#taskList li {
cursor: pointer;
}
#taskList li.completed {
text-decoration: line-through;
color: grey;
}
</style>
استنتاج
لقد قمنا بتغطية كيفية إنشاء **قائمة مهام** بسيطة باستخدام **جافا سكريبت**. هذا التطبيق يمكن أن يكون نقطة انطلاق لتطوير تطبيقات أكثر تعقيدًا. يمكنك دائمًا تحسينه وإضافة ميزات جديدة تلبي احتياجاتك. جرب البدء في بناء تطبيقك الشخصي الآن عبر استخدام جافا سكريبت!
