main.js

let input = document.querySelector(".form .input");
let addBtn = document.querySelector(".form .add");
let tasksContainer = document.querySelector(".container .tasks");

// Get tasks from local storage if they exist, store them in an array, and show them.
let tasksArr = [];
if (window.localStorage.getItem("tasks")) {
  tasksArr = JSON.parse(localStorage.getItem("tasks"));
  updateTasks();
}

// add task button action
addBtn.addEventListener("click", function () {
  if (input.value) {
    let newTask = createTask(generateUniqueId(), input.value);
    saveTask(newTask);
    input.value = "";
    input.focus();
  }
});

// Add new task button clicks if pressing enter in keyboard
input.addEventListener("keydown", (event) => {
  if (event.code === "Enter") addBtn.click();
});

// create a task element
function createTask(id, value) {
  // create task container
  let task = document.createElement("div");
  task.className = "task";
  task.id = id;

  // create task paragraph
  let p = document.createElement("p");
  let taskName = document.createTextNode(value);
  p.appendChild(taskName);
  task.appendChild(p);

  // create delete button
  let deleteBtn = document.createElement("button");
  let deleteText = document.createTextNode("Delete");
  deleteBtn.appendChild(deleteText);

  // Add delete button action
  deleteBtn.addEventListener("click", function () {
    deleteTask(task.id);
  });

  // append button to task
  task.appendChild(deleteBtn);

  // return the task
  return task;
}

// Save the task in local storage
function saveTask(task) {
  let newTask = {
    id: task.id,
    title: task.firstElementChild.textContent,
  };
  tasksArr.push(newTask);
  saveInLocal();
  updateTasks();
}

// Generate a unique ID
function generateUniqueId() {
  return Date.now();
}

// delete specific task
function deleteTask(taskID) {
  for (let i = 0; i < tasksArr.length; i++) {
    if (tasksArr[i].id === taskID) {
      tasksArr.splice(i, 1);
      saveInLocal();
      updateTasks();
      break;
    }
  }
}

// Append all tasks to task Container in HTML
function updateTasks() {
  tasksContainer.innerHTML = "";
  for (let i = 0; i < tasksArr.length; i++) {
    tasksContainer.appendChild(createTask(tasksArr[i].id, tasksArr[i].title));
  }
}

// Save to local Storage
function saveInLocal() {
  window.localStorage.setItem("tasks", JSON.stringify(tasksArr));
}