index.js

const taskInput = document.getElementById("taskInput");
const taskForm = document.getElementById("taskForm");
const taskContainer = document.querySelector(".taskContainer");

let tasks = [];

const storedTasks = localStorage.getItem("tasks");

if (storedTasks) {
  tasks = JSON.parse(storedTasks);
  renderTasks();
}

function saveTasks() {
  localStorage.setItem("tasks", JSON.stringify(tasks));
}

function renderTasks() {
  taskContainer.innerHTML = "";
  tasks.forEach((task) => {
    let taskList = document.createElement("li");
    taskList.classList.add("tasks");

    let completeBtn = document.createElement("button");
    completeBtn.classList.add("icon-btn", "complete-btn");
    completeBtn.textContent = "✓";

    let deleteBtn = document.createElement("button");
    deleteBtn.classList.add("icon-btn", "delete-btn");
    deleteBtn.textContent = "🗑";

    let editBtn = document.createElement("button");
    editBtn.classList.add("icon-btn", "edit-btn");
    editBtn.textContent = "✏️";

    let textSpan;

    if (task.isEditing) {
      const editInput = document.createElement("input");
      editInput.type = "text";
      editInput.value = task.taskName;
      editInput.classList.add("edit-input");
      taskList.appendChild(editInput);

      editBtn.textContent = "💾"; // save icon
    } else {
      textSpan = document.createElement("span");
      textSpan.classList.add("task-text");
      textSpan.textContent = task.taskName;

      if (task.completed) {
        textSpan.classList.add("completed");
      }

      taskList.appendChild(textSpan);
    }

    taskList.appendChild(completeBtn);
    taskList.appendChild(deleteBtn);
    taskList.appendChild(editBtn);
    taskContainer.appendChild(taskList);

    completeBtn.addEventListener("click", function (e) {
      task.completed = !task.completed;
      saveTasks();
      renderTasks();
    });

    deleteBtn.addEventListener("click", function (e) {
      tasks = tasks.filter((t) => t.id !== task.id);
      saveTasks();
      renderTasks();
    });

    editBtn.addEventListener("click", function (e) {
      if (!task.isEditing) {
        task.isEditing = true;
        renderTasks();
      } else {
        const editInput = taskList.querySelector("input");
        const updatedValue = editInput.value.trim();

        if (updatedValue !== "") {
          task.taskName = updatedValue;
        }

        task.isEditing = false;
        saveTasks();
        renderTasks();
      }
    });
  });
}

taskForm.addEventListener("submit", function (e) {
  e.preventDefault();
  addTask();
});

function addTask() {
  let newTask = taskInput.value.trim();
  if (newTask === "") return;
  let taskObj = {
    id: Date.now(),
    taskName: newTask,
    completed: false,
    isEditing: false,
  };
  tasks.push(taskObj);
  saveTasks();

  taskInput.value = "";
  renderTasks();
}