TodoProjectList

main.js

class Todo {
  constructor(text, finished) {
    this.id = String(Date.now());
    this.text = text;
    this.finished = finished;
  }
}

class InputDOM {
  constructor() {
    this.inputDOM = undefined;
  }

  getInputValue() {
    this.inputDOM = document.querySelector(".input");
    return this.inputDOM.value;
  }

  clearInput() {
    this.inputDOM.value = "";
  }
}

class FormDOM {
  constructor() {
    this.formDOM = document.querySelector(".form");
    this.listDOM = document.querySelector(".list");
  }

  addLiToList(todo) {
    const liTag = this.createLiTag(todo);
    this.listDOM.appendChild(liTag);
  }

  createLiTag(todo) {
    const li = document.createElement("li");
    if (todo.finished) li.classList.add("checked");

    const checkedIcon = document.createElement("i");
    checkedIcon.classList.add("fas", "fa-check-square");

    const trashIcon = document.createElement("i");
    trashIcon.classList.add("fas", "fa-trash");

    li.appendChild(document.createTextNode(todo.text));
    li.appendChild(checkedIcon);
    li.appendChild(trashIcon);

    checkedIcon.addEventListener("click", () => {
      li.classList.toggle("checked");
      fetch("http://localhost:3000/todoList/" + todo.id, {
        method: "PATCH",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          text,
          finished: !todo.finished,
        }),
      });
    });

    trashIcon.addEventListener("click", () => {
      li.remove();
      fetch("http://localhost:3000/todoList/" + todo.id, {
        method: "DELETE",
      });
    });

    return li;
  }

  renderList(todos) {
    todos.forEach((todo) => {
      this.addLiToList(todo);
    });
  }

  submit() {
    this.formDOM.addEventListener("submit", (e) => {
      e.preventDefault();

      const input = new InputDOM();
      const todo = new Todo(input.getInputValue(), false);
      this.addLiToList(todo);
      input.clearInput();

      fetch("http://localhost:3000/todoList", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify(todo),
      });
    });
  }
}

document.addEventListener("DOMContentLoaded", function () {
  const formDOM = new FormDOM();

  fetch("http://localhost:3000/todoList")
    .then((res) => res.json())
    .then((data) => {
      formDOM.renderList(data);
    });

  formDOM.submit();
});