app.js

const form = document.querySelector("form");
const input = document.querySelector("input");
const taskList = document.querySelector(".task-list");
const progress = document.getElementById("progress");
const numbers = document.getElementById("numbers");

let totalTasks = 0;
let completedTasks = 0;

// Update progress bar & numbers
function updateStats() {
    numbers.textContent = `${completedTasks}/${totalTasks}`;

    if (totalTasks === 0) {
        progress.style.width = "0%";
    } else {
        const percent = (completedTasks / totalTasks) * 100;
        progress.style.width = percent + "%";
    }
}

// Add task
form.addEventListener("submit", function (e) {
    e.preventDefault();

    const taskText = input.value.trim();
    if (taskText === "") return;

    totalTasks++;

    const li = document.createElement("li");
    li.textContent = taskText;

    // Complete button
    const completeBtn = document.createElement("button");
    completeBtn.textContent = "✔";
    completeBtn.style.marginLeft = "10px";

    // Delete button
    const deleteBtn = document.createElement("button");
    deleteBtn.textContent = "✖";
    deleteBtn.style.marginLeft = "5px";

    li.appendChild(completeBtn);
    li.appendChild(deleteBtn);
    taskList.appendChild(li);

    input.value = "";
    updateStats();

    // Mark complete
    completeBtn.addEventListener("click", function () {
        if (!li.classList.contains("done")) {
            li.classList.add("done");
            li.style.textDecoration = "line-through";
            li.style.opacity = "0.6";
            completedTasks++;
            updateStats();
        }
    });

    // Delete task
    deleteBtn.addEventListener("click", function () {
        if (li.classList.contains("done")) {
            completedTasks--;
        }
        totalTasks--;
        li.remove();
        updateStats();
    });
});