script.js

const inputTask = document.getElementById("inputTask");
const addTaskBtn = document.getElementById("addTaskBtn");
const taskList = document.getElementById("taskList");
addTaskBtn.addEventListener("click", () => {
  const task = inputTask.value;
  if (task.trim() === "") {
    alert("Task is required");
    return;
  }
  if (task !== "") {
    const li = document.createElement("li");
    li.innerHTML = `
           
                    <div>
                    <input type="checkbox" id="taskCheckbox">
                    <span class="taskText">${task}</span>
                    </div>
                    <div>
                    <span class="status-none taskStatus">Completed</span>
                    <i class="fa-solid editTask fa-pen-to-square"></i>
                     <i class="fas fa-trash-alt deleteTask"></i>
                    </div>
                 
        `;
    taskList.appendChild(li);
    saveTodosInLocalStorage();
    inputTask.value = "";
  }
});

const saveTodosInLocalStorage = ()=>{
    let todos = [];
    document.querySelectorAll("#taskList li").forEach((li)=>{
        todos.push({
            task: li.querySelector(".taskText").textContent,
            completed: li.querySelector("#taskCheckbox").checked
        });
    })
    localStorage.setItem("todos", JSON.stringify(todos));
}

const loadTodosFromLocalStorage = () => {
    const todos = JSON.parse(localStorage.getItem("todos")) || [];
    todos.forEach((todo) => {
      const li = document.createElement("li");
      li.innerHTML = `
                    <div>
                    <input type="checkbox" id="taskCheckbox" ${todo.completed ? "checked" : ""}>
                    <span class="taskText ${todo.completed ? "completed" : ""}">${todo.task}</span>
                    </div>
                    <div>
                    <span class="${todo.completed ? "completed-status" : "status-none"} taskStatus">Completed</span>
                    ${todo.completed ? "" : '<i class="fa-solid editTask fa-pen-to-square"></i>'}
                     <i class="fas fa-trash-alt deleteTask"></i>
                    </div>
        `;
      taskList.appendChild(li);

    })
}

document.addEventListener("DOMContentLoaded" , loadTodosFromLocalStorage)


taskList.addEventListener("click", (event) => {
  if (event.target.classList.contains("deleteTask")) {
    event.target.parentElement.parentElement.remove();
    saveTodosInLocalStorage();
  }
  if (event.target.classList.contains("editTask")) {
    const li = event.target.closest("li");
    const taskText = li.querySelector(".taskText");
    const input = document.createElement("input");
    input.classList.add("editInput");
    input.value = taskText.textContent;
    taskText.replaceWith(input);
    input.focus();

    const saveIcon = document.createElement("i");
    saveIcon.classList.add("fas", "fa-save", "saveTask");
    event.target.replaceWith(saveIcon);

    // Add event listeners for updating text on save or blur
    const saveTask = () => {
        let updatedTaskInput = input.value.trim();
        if (updatedTaskInput === "") {
          alert("Task is required");
          return;
        }
        if (updatedTaskInput !== "") {
          const newTaskText = input.value;
          taskText.textContent = newTaskText;
          input.replaceWith(taskText);
          saveIcon.replaceWith(event.target);
        }
        saveTodosInLocalStorage()
      }
    saveIcon.addEventListener("click", saveTask);
    input.addEventListener("blur", saveTask);
    input.addEventListener("keydown", (e) => {
      if (e.key === "Enter") {
        saveTask();
      }
    });
  }
  // Mark task as completed
  if (event.target.id === "taskCheckbox") {
    const li = event.target.closest("li");
    const taskText = li.querySelector(".taskText");
    taskText.classList.toggle("completed");
    const taskStatus = li.querySelector(".taskStatus");
    if (taskStatus.classList.contains("completed-status")) {
        taskStatus.classList.remove("completed-status");
        taskStatus.classList.add("status-none")
    }
    else {
        taskStatus.classList.remove("status-none");
        taskStatus.classList.add("completed-status")
    }
    if (taskText.classList.contains("completed")) {
      li.querySelector(".editTask").remove();
    }
    else{
        const editIcon = document.createElement("i");
        editIcon.classList.add("fa-solid", "editTask", "fa-pen-to-square");
        li.querySelector(".deleteTask").before(editIcon);
    }
    saveTodosInLocalStorage();
    
  }
});