تعلم كيفية بناء قائمة مهام تفاعلية باستخدام JavaScript مع تطبيق مبادئ إدارة الحالة والتفاعلات الديناميكية.
// إدارة قائمة المهام
const tasks = [];
const tasksContainer = document.getElementById("tasksContainer");
document.getElementById("taskForm").addEventListener("submit", function(event) {
event.preventDefault();
const task = document.getElementById("taskInput").value.trim();
if (task) {
tasks.push(task);
displayTasks();
document.getElementById("taskInput").value = "";
}
});
function displayTasks() {
tasksContainer.innerHTML = "";
tasks.forEach((task, index) => {
const taskDiv = document.createElement("div");
taskDiv.className = "task";
taskDiv.innerHTML = `
<span>${task}</span>
<button onclick="deleteTask(${index})"><i class="fas fa-trash-alt"></i></button>
`;
tasksContainer.appendChild(taskDiv);
});
}