الهدف التعليمي

تعلم كيفية بناء قائمة مهام تفاعلية باستخدام 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);
    });
}