script.js

const todoInput = document.getElementById("todoInput");
const addTodoBtn = document.getElementById("addTodoBtn");
const todoList = document.getElementById("todoList");
const totalCount = document.getElementById("totalCount");
const completedCount = document.getElementById("completedCount");
const clearAllBtn = document.getElementById("clearAllBtn");

let totalTodos = 0;
let completedTodos = 0;

addTodoBtn.addEventListener("click", () => {
    const todoText = todoInput.value.trim();

    if (todoText === "") {
        alert("Please enter a todo!");
        return;
    }
    const li = document.createElement("li");

    const span = document.createElement("span");
    span.textContent = todoText;

    const buttonDiv = document.createElement("div");
    buttonDiv.className = "todo-buttons";

    const completeBtn = document.createElement("button");
    completeBtn.textContent = "Complete";

    const deleteBtn = document.createElement("button");
    deleteBtn.textContent = "Delete";

    // Complete Todo
    completeBtn.addEventListener("click", () => {
        span.classList.toggle("completed");

        if (span.classList.contains("completed")) {
            completedTodos++;
        } else {
            completedTodos--;
        }
        completedCount.textContent = completedTodos;
    });
    deleteBtn.addEventListener("click", () => {
        if (span.classList.contains("completed")) {
            completedTodos--;
            completedCount.textContent = completedTodos;
        }
        todoList.removeChild(li);
        totalTodos--;
        totalCount.textContent = totalTodos;
    });

    buttonDiv.appendChild(completeBtn);
    buttonDiv.appendChild(deleteBtn);

    li.appendChild(span);
    li.appendChild(buttonDiv);
    todoList.appendChild(li);

    totalTodos++;
    totalCount.textContent = totalTodos;

    todoInput.value = "";
});

clearAllBtn.addEventListener("click", () => {
    todoList.innerHTML = "";
    totalTodos = 0;
    completedTodos = 0;
    totalCount.textContent = 0;
    completedCount.textContent = 0;
});