[JS] Todo list 만들기 230802

24일차

1. 이벤트 부분 작성

//checkbox가 checked인 상태를item.complete라 하고,
checkboxEl.addEventListener("change", () => {
    item.complete = checkboxEl.checked;

  //complete일때는 클래스에 complete를 추가, 아니면 complete 제거.
    if (item.complete) {
      itemEl.classList.add("complete");
    } else {
      itemEl.classList.remove("complete");
    }
    saveToLocalStorage(); // 그 후 저장
  });


//input에 입력된 값을 item.text에 할당
  inputEl.addEventListener("input", () => {
    item.text = inputEl.value;
    // saveToLocalStorage();
  });

//input 상태가 아니면 input disabled 처리 후저장
  inputEl.addEventListener("blur", () => {
    inputEl.setAttribute("disabled", "");
    saveToLocalStorage();
  });

//수정 버튼누르면 input의 disabled 삭제 후 input에 포커스
  editBtnEl.addEventListener("click", () => {
    inputEl.removeAttribute("disabled");
    inputEl.focus();
  });

//삭제 버튼 클릭시 필터하여 조건 맞는 요소들만 남김
  removeBtnEl.addEventListener("click", () => {
    todos = todos.filter(t => t.id !== item.id);
    itemEl.remove();
    saveToLocalStorage(); //삭제, 저장.
  });

addEventListener 정리 후에 함수를 추가했다.

displayTodos();

// localStorage에 JSON 문자열로 반환하여 저장
function saveToLocalStorage() {
  const data = JSON.stringify(todos);
  localStorage.setItem("my_todos", data);
}

// localStorage에서 데이터 가져오기
//JavaScript 값이나 객체로 변환해서 가져온다
function loadFromLocalStorage() {
  const data = localStorage.getItem("my_todos");

  if (data) {
    todos = JSON.parse(data);
  }
}

2. 저장하는 함수는 처음에 만든 새로운 객체 생성 함수에도 넣어준다.

function createNewTodo() {
    // 이하생략

  saveToLocalStorage();
}

filter

removeBtnEl.addEventListener("click", () => {
    todos = todos.filter(t => t.id !== item.id);
    itemEl.remove();
    saveToLocalStorage(); 
  });

사실 이 부분의 해석이 헷갈려서 질문을 해놓은 상태다.
t라는 투두리스트의 id가 item.id와 같지않다면 살리는 것으로 들었는데
혼자 읽어보려하니 t와 item이 정확히 어떤걸 지칭하는지 헷갈린다.

+230803 내용추가
t : todos 배열의 하나 하나의 객체
item.id : 선택한(삭제할) 아이템
todos = todos.filter(t => t.id !== item.id); > 비교 했을 때 item.id와 다른 객체만 살린다.