// Select elements from the DOM
const taskInput = document.getElementById("task");
const addTaskButton = document.getElementById("add");
const taskList = document.getElementById("task-list");
const clearButton = document.getElementById("clear");

// Function to add a new task
function addTask() {
    const taskText = taskInput.value.trim();
    if (taskText === "") return;

    const taskItem = document.createElement("li");
    taskItem.innerHTML = `
        ${taskText}
        <button class="delete">Delete</button>
    `;

    taskList.appendChild(taskItem);
    taskInput.value = "";

    // Add an event listener for deleting tasks
    const deleteButton = taskItem.querySelector(".delete");
    deleteButton.addEventListener("click", () => {
        taskList.removeChild(taskItem);
    });
}

// Function to clear completed tasks
function clearCompletedTasks() {
    const completedTasks = taskList.querySelectorAll("li");
    completedTasks.forEach(task => {
        if (task.querySelector("button.delete")) {
            taskList.removeChild(task);
        }
    });
}

// Add event listeners
addTaskButton.addEventListener("click", addTask);
taskInput.addEventListener("keyup", (event) => {
    if (event.key === "Enter") {
        addTask();
    }
});
clearButton.addEventListener("click", clearCompletedTasks);