script.js

//All the elements....
const input = document.getElementById("todo-input");
const addBtn = document.getElementById("add-btn");
const list = document.getElementById("todo-list");

// try to load local storage 1st
const saved = localStorage.getItem("todos"); //chatgpt this line to understand better
const todos = saved ? JSON.parse(saved) : [];

function saveTodos() {
  //storage todos in local storage....
  localStorage.setItem("todos", JSON.stringify(todos));
}

//create a dom node and append todo here
function createTodoNode(todo, index) {
  const li = document.createElement("li");
  //checkbox
  const checkbox = document.createElement("input");
  checkbox.type = "checkbox";
  checkbox.checked = !!todo.completed;
  checkbox.addEventListener("change", () => {
    todo.completed = checkbox.checked;

    //TODO: visual feed back ; stricking the lines
    textSpan.style.textDecoration = todo.completed ? "line-through" : "";

    saveTodos();
  });
  //text to todo
  const textSpan = document.createElement("span");
  textSpan.textContent = todo.text;
  textSpan.style.margin = "4px 8px";

  if (todo.completed) {
    textSpan.style.textDecoration = "line-through";
  }
  //Double click to editg
  textSpan.addEventListener("dblclick", () => {
    const newText = prompt("Edit todo", todo.text);
    if (newText !== "") {
      todo.text = newText.trim();
      textSpan.textContent = todo.text;
      saveTodos();
    }
  });

  //Delete todo
  const delBtn = document.createElement("button");
  delBtn.textContent = "Delete";
  delBtn.addEventListener("click", () => {
    todos.splice(index, 1);
    render();
    saveTodos();
  });

  li.appendChild(checkbox);
  li.appendChild(textSpan);
  li.appendChild(delBtn);
  return li;
}

//render all todo list here
function render() {
  list.innerHTML = "";
  todos.forEach((todo, index) => {
    const node = createTodoNode(todo, index);
    createTodoNode(todo, index);
    list.appendChild(node);
  });
}

function addTodo() {
  const text = input.value.trim();
  if (!text) {
    return;
  }
  //push the todo object
  todos.push({ text, completed: false });
  input.value = "";
  render();
  saveTodos();
}
addBtn.addEventListener("click", addTodo);
input.addEventListener("keydown", (e) => {
  if (e.key == "Enter") {
    addTodo();
  }
});
render();