script.js

let taskInput = document.querySelector("#taskInput");
let addBtn = document.querySelector("#addBtn");
let taskList = document.querySelector("#taskList");
let tasks = [];
let savedTasks = localStorage.getItem("tasks");
let editingTask = null;

let taskCounter = document.querySelector("#taskCounter");
let filterAll = document.querySelector("#filterAll");
let filterActive = document.querySelector("#filterActive");
let filterCompleted = document.querySelector("#filterCompleted");
let clearCompleted = document.querySelector("#clearCompleted");

if (savedTasks) tasks = JSON.parse(savedTasks);

// Render saved tasks
tasks.forEach(task => createTask(task));
updateCounter();

// Save to localStorage
function saveTasks() {
    localStorage.setItem("tasks", JSON.stringify(tasks));
    updateCounter();
}

// Update task counter
function updateCounter() {
    let activeTasks = tasks.filter(t => !t.completed).length;
    taskCounter.textContent = `Active Tasks: ${activeTasks}`;
}

// Create task DOM
function createTask(task) {
    let taskItem = document.createElement("li");

    let taskTextSpan = document.createElement("span");
    taskTextSpan.classList.add("task-text");
    taskTextSpan.textContent = task.text;
    taskItem.appendChild(taskTextSpan);

    let buttonsDiv = document.createElement("div");
    buttonsDiv.classList.add("task-buttons");

    let checkBtn = document.createElement("button");
    checkBtn.textContent = "Mark as completed";
    checkBtn.classList.add("complete-btn");
    buttonsDiv.appendChild(checkBtn);

    let editBtn = document.createElement("button");
    editBtn.textContent = "Edit";
    editBtn.classList.add("edit-btn");
    buttonsDiv.appendChild(editBtn);

    let deleteBtn = document.createElement("button");
    deleteBtn.textContent = "Delete";
    deleteBtn.classList.add("delete-btn");
    buttonsDiv.appendChild(deleteBtn);

    taskItem.appendChild(buttonsDiv);
    taskList.appendChild(taskItem);

    if (task.completed) taskItem.classList.add("completed");

    // Complete task
    checkBtn.addEventListener("click", () => {
        task.completed = true;
        taskItem.classList.add("completed");
        saveTasks();
    });

    // Edit task
    editBtn.addEventListener("click", () => {
        taskInput.value = task.text;
        addBtn.textContent = "Save Task";
        editingTask = task;
        taskInput.focus();
    });

    // Delete task
    deleteBtn.addEventListener("click", () => {
        taskList.removeChild(taskItem);
        tasks = tasks.filter(t => t.id !== task.id);
        saveTasks();
    });

    updateCounter();
}

// Add or save task
function addOrSaveTask() {
    let taskText = taskInput.value.trim();
    if (taskText === "") return;

    if (editingTask) {
        if (tasks.some(t => t.text === taskText && t.id !== editingTask.id)) {
            alert("This task already exists!");
            return;
        }
        editingTask.text = taskText;
        taskList.innerHTML = "";
        tasks.forEach(createTask);
        editingTask = null;
        addBtn.textContent = "Add Task";
        taskInput.value = "";
        saveTasks();
        return;
    }

    if (tasks.some(t => t.text === taskText)) {
        alert("This task already exists!");
        return;
    }

    let newTask = {
        id: Date.now(),
        text: taskText,
        completed: false
    };

    tasks.push(newTask);
    saveTasks();
    createTask(newTask);
    taskInput.value = "";
}

// Event listeners
addBtn.addEventListener("click", addOrSaveTask);

taskInput.addEventListener("keydown", (e) => {
    if (e.key === "Enter") addOrSaveTask();
});

// Filters
filterAll.addEventListener("click", () => {
    taskList.innerHTML = "";
    tasks.forEach(createTask);
});

filterActive.addEventListener("click", () => {
    taskList.innerHTML = "";
    tasks.filter(t => !t.completed).forEach(createTask);
});

filterCompleted.addEventListener("click", () => {
    taskList.innerHTML = "";
    tasks.filter(t => t.completed).forEach(createTask);
});

// Clear completed
clearCompleted.addEventListener("click", () => {
    tasks = tasks.filter(t => !t.completed);
    taskList.innerHTML = "";
    tasks.forEach(createTask);
    saveTasks();
});