script.js

const addTaskBtn = document.getElementById("addTaskBtn");
const taskInput = document.getElementById("taskInput");
const taskList = document.getElementById("taskList");

const allBtn = document.getElementById("allBtn");
const completedBtn = document.getElementById("completedBtn");
const pendingBtn = document.getElementById("pendingBtn");

let currentFilter = "all";

// Load tasks on page load
window.onload = function () {
  renderTasks();
};

addTaskBtn.addEventListener("click", function () {
  const taskText = taskInput.value;

  if (taskText === "") {
    alert("Please enter a task");
    return;
  }

  saveTask(taskText, false);
  taskInput.value = "";
  renderTasks();
});

allBtn.addEventListener("click", function () {
  currentFilter = "all";
  renderTasks();
});

completedBtn.addEventListener("click", function () {
  currentFilter = "completed";
  renderTasks();
});

pendingBtn.addEventListener("click", function () {
  currentFilter = "pending";
  renderTasks();
});

function renderTasks() {
  taskList.innerHTML = "";
  const tasks = JSON.parse(localStorage.getItem("tasks")) || [];

  tasks
    .filter(task => {
      if (currentFilter === "completed") return task.completed;
      if (currentFilter === "pending") return !task.completed;
      return true;
    })
    .forEach(task => {
      createTaskElement(task.text, task.completed);
    });
}

function createTaskElement(taskText, isCompleted) {
  const li = document.createElement("li");

  const checkbox = document.createElement("input");
  checkbox.type = "checkbox";
  checkbox.checked = isCompleted;

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

  if (isCompleted) {
    span.style.textDecoration = "line-through";
  }

  checkbox.addEventListener("change", function () {
    updateTaskStatus(taskText, checkbox.checked);
    renderTasks();
  });

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

  deleteBtn.addEventListener("click", function () {
    removeTask(taskText);
    renderTasks();
  });

  li.appendChild(checkbox);
  li.appendChild(span);
  li.appendChild(deleteBtn);

  taskList.appendChild(li);
}

function saveTask(text, completed) {
  const tasks = JSON.parse(localStorage.getItem("tasks")) || [];
  tasks.push({ text: text, completed: completed });
  localStorage.setItem("tasks", JSON.stringify(tasks));
}

function removeTask(taskText) {
  let tasks = JSON.parse(localStorage.getItem("tasks")) || [];
  tasks = tasks.filter(task => task.text !== taskText);
  localStorage.setItem("tasks", JSON.stringify(tasks));
}

function updateTaskStatus(taskText, completedStatus) {
  let tasks = JSON.parse(localStorage.getItem("tasks")) || [];
  tasks = tasks.map(task => {
    if (task.text === taskText) {
      return { text: task.text, completed: completedStatus };
    }
    return task;
  });
  localStorage.setItem("tasks", JSON.stringify(tasks));
}