/ PROJECT

투두리스트 Chrome Extension (2) - 할 일 등록하기

목차

구현 아이디어

  1. 기존 submit에서 input만 추가해서, object에 각각 key 값 설정 후 저장
  2. 저장한 데이터를 테이블 형태로 표시하기

예상 구현 결과

  • 할 일에 대한 데이터를 입력받고 표 형태로 화면에 보여주기
  • 할 일 완료시 해당 할 일 삭제하기

Rate-Determining Step (걸림돌)

const deleteTargetSubject = subjectDropdown.querySelector(`[id="${tr.id}"]`);

.queryselector(`#${tr.id}`)

아래 첨부한 코드에서 Line 21에서 삭제할 element를 가져오는 과정에서 아래와 같은 방식으로 계속 코드를 작성하다가 오류가 발생했다. 구글링을 통해 [id=" "]도 같은 기능을 한다고 알게 되어 해결은 했지만, 아직도 아래 코드가 실행이 안되는 이유는 잘 모르겠다.

구현 코드

const toDoForm = document.getElementById("todo-form");
const toDoInput = document.querySelector("#work-form");
const subjectInput = document.querySelector("#subject-form");
const formatInput = document.querySelector("#format-form");
const toDoList = document.getElementById("todo-list");
const worktable = document.getElementById("work-columns");

const TODOS_KEY = "todos";

const savedToDos = localStorage.getItem(TODOS_KEY);

let toDos = [];

function saveToDos() {
  localStorage.setItem(TODOS_KEY, JSON.stringify(toDos));
}

function deleteTodo(event) {
  const tr = event.target.parentElement.parentElement;
  tr.remove();
  const deleteTargetSubject = subjectDropdown.querySelector(`[id="${tr.id}"]`);
  deleteTargetSubject.remove();
  toDos = toDos.filter((targetId) => targetId.id !== parseInt(tr.id));
  saveToDos();
}

function paintToDo(newToDo) {
  const tr = document.createElement("tr");
  tr.id = newToDo.id;
  const th1 = document.createElement("th");
  th1.innerText = newToDo.text;
  const th2 = document.createElement("th");
  th2.innerText = newToDo.subject;
  const th3 = document.createElement("th");
  th3.innerText = newToDo.format;
  const th4 = document.createElement("th");
  th4.innerText = newToDo.total_usage_time;
  const th5 = document.createElement("th");
  const button = document.createElement("button");
  button.innerText = "❌";
  th5.appendChild(button);
  tr.appendChild(th1);
  tr.appendChild(th2);
  tr.appendChild(th3);
  tr.appendChild(th4);
  tr.appendChild(th5);
  worktable.appendChild(tr);
  button.addEventListener("click", deleteTodo);

  const option = document.createElement("option");
  option.id = newToDo.id;
  option.innerText = newToDo.text;
  subjectDropdown.appendChild(option);
}

function handleToDoSubmit(event) {
  event.preventDefault();
  const newToDo = toDoInput.value;
  const newSubject = subjectInput.value;
  const newFormat = formatInput.value;
  toDoInput.value = "";
  subjectInput.value = "";
  formatInput.value = "";
  const newTodoObj = {
    text: newToDo,
    subject: newSubject,
    format: newFormat,
    id: Date.now(),
    total_usage_time: "00:00:00",
  };
  toDos.push(newTodoObj);
  paintToDo(newTodoObj);
  saveToDos();
}

toDoForm.addEventListener("submit", handleToDoSubmit);

if (savedToDos !== null) {
  const parsedToDos = JSON.parse(savedToDos);
  toDos = parsedToDos;
  parsedToDos.forEach(paintToDo);
}