script.js

function addTask() {
    const taskInput = document.getElementById("taskInput");
    const taskText = taskInput.value.trim();
    if (taskText === "") return;

    const taskList = document.getElementById("taskList");
    const li = document.createElement("li");
    li.innerHTML = `
            <span></span> <span>${taskText}</span>
            <button onclick="markDone(this)">Done</button>
            <button onclick="editTask(this)">Edit</button>
            <button onclick="deleteTask(this)">Delete</button>
        `;
    taskList.appendChild(li);
    taskInput.value = "";
    updateTaskNumbers();
}

function markDone(button) {
    const taskItem = button.parentElement;
    taskItem.querySelector("span:nth-child(2)").classList.toggle("done");
}

function editTask(button) {
    const taskItem = button.parentElement;
    const taskText = taskItem.querySelector("span:nth-child(2)");
    const input = document.createElement("input");
    input.type = "text";
    input.value = taskText.innerText;
    taskItem.replaceChild(input, taskText);
    input.focus();
    input.addEventListener("blur", function() {
        taskText.innerText = input.value;
        taskItem.replaceChild(taskText, input);
    });
}

function deleteTask(button) {
    button.parentElement.remove();
    updateTaskNumbers();
}

function updateTaskNumbers() {
    const taskList = document.getElementById("taskList").children;
    for (let i = 0; i < taskList.length; i++) {
        taskList[i].querySelector("span:first-child").innerText = (i + 1) + ". ";
    }
}