to-do-list/src/index.ts

import { v4 as uuidV4 } from "uuid";
import "./css/default.css";

type Task = {
  id: string;
  title: string;
  completed: boolean;
  createdAt: Date;
};

const list = document.querySelector<HTMLUListElement>("#list");
const form = document.getElementById("new-task-form") as HTMLFormElement | null;
const input = document.querySelector<HTMLInputElement>("#new-task-title");
const tasks: Task[] = loadTasks();
tasks.forEach(addListItem); //for each task we'll render

form?.addEventListener("submit", (e) => {
  e.preventDefault();

  if (input?.value == "" || input?.value == null) return;

  const newTask: Task = {
    id: uuidV4(),
    title: input.value,
    completed: false, //with this, checkbox is not (initially) ticked
    createdAt: new Date(),
  };
  tasks.push(newTask); //하나아이템 type then push, then it's uploaded(stored). <-wrote it after line 13

  addListItem(newTask);
  input.value = ""; //clear the input type part, as you already made one to-do-item
});

function addListItem(task: Task) {
  const item = document.createElement("li");
  const label = document.createElement("label");
  // const label = document.createElement("p") as HTMLElement;
  const textInside = label.innerHTML as string;
  // const textInside = (label.innerHTML = "<input></input>" as string);
  console.log(textInside);
  label.addEventListener("click", function () {
    label?.focus();
  });
  const deletebtn = document.createElement("button");
  const editbtn = document.createElement("button");
  deletebtn.classList.add("deletebtn");
  editbtn.classList.add("editbtn");
  const checkbox = document.createElement("input");
  checkbox.addEventListener("change", () => {
    task.completed = checkbox.checked; //with this, checkbox will be ticked
    saveTasks(); //create a function to save the item made -> after this, code 47 was written.
  });
  checkbox.type = "checkbox";
  checkbox.checked = task.completed;
  label.append(checkbox, task.title);
  item.append(label);
  item.append(deletebtn);
  item.append(editbtn);
  list?.append(item);
  deletebtn.addEventListener("click", function () {
    item.parentNode?.removeChild(item);
  });
  editbtn.addEventListener("click", function () {
    label?.focus();
    changeTask(item); //joseph 24th Oct 2022
  });
}

function saveTasks() {
  const taskJSON = localStorage.getItem("TASKS") || "[]"; //hmm... 24 Oct
  localStorage.setItem("TASKS", JSON.stringify(tasks));
}

function loadTasks(): Task[] {
  const taskJSON = localStorage.getItem("TASKS");
  if (taskJSON == null) return []; //if taskJSON is null, return to an empty array
  return JSON.parse(taskJSON); // if it's not null, return to the taskJSON. As : Task[] is written after func loadTasks(), it will specifically parse the array. Without it, it will parse anything
}

function changeTask(item: any) {
  var changer = document.createElement("input"); //joseph created another input field next to the item (,which is clicked and to be modified.)
  //I wanted to directly modify the item in the listed label, without making anothe input next to it.
  changer.className = "changer";
  var writtenLabel = item.firstChild.innerHTML;
  changer.value = writtenLabel.replace('<input type="checkbox">', "");
  item.append(changer);
  var button = document.createElement("button");
  button.innerHTML = "modify";
  item.append(button);
  button.addEventListener("click", function () {
    item.firstChild.innerHTML = '<input type="checkbox">' + changer.value;
    changer.remove();
    button.remove();
  }); //joseph 24th Oct 2022
  console.log(item.firstChild);
  console.log(item);
}

// function deleteTask(item: any) {
//   const deletebtn = document.createElement("button");
//   deletebtn.classList.add("deletebtn");

//   item.append(deletebtn);
//   deletebtn.addEventListener("click", function () {
//     item.parentNode?.removeChild(item);
//   });
//} Wanting to refactor, I attempted to separate the deleteTask function here but failed. 24 Oct