Making a To Do List

const toDoForm = document.querySelector("#js-toDoForm"),
     toDoInput = toDoForm.querySelector("input"),
      toDoList = document.querySelector("#js-toDoList");
      
const TODOS_LS = "toDos";

function filterFn(toDo){
   return toDo.id === 1;
}

let toDos = [];

function deleteTodo(event){
   const btn = event.target; //이벤트 발생 시 정보호출
   const li = btn.parentNode; //버튼에 대한 부모요소 확인
   toDoList.removeChile(li); //자식 li태그 제거
   const cleanToDos = toDos.filter(function(toDo){ 
     return toDo.id !== parseInt(li.id);
   }); //filter는 해당함수가 toDos의 모든 items들에게 실행하도록 하여 true인 item으로 다시 배열구성
   //ex.클릭하여 제거된 버튼의 부모요소인 li의 id값이 3일경우, 나머지 id들은 다시 배열 정렬
   toDos = cleanToDos; //실행된 배열과 저장소의 배열의 차이가 있으므로 필터된 배열로 다시 할당
   saveToDos(); //로컬 스토리지 저장
}

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

function paintToDo(text){
   const li = document.createElement("li");
   const delBtn = document.createElement("button");
   const span = document.createElement("span");
   const newId = toDos.length + 1;
   delBtn.innerText = "❌";
   delBtn.addEventListener("click", deleteToDo); //버튼 눌렀을 경우 이벤트 감지, 함수호출
   span.innerText = text; //span과 button에 텍스트 추가
   li.appendChild(delBtn);
   li.appendChild(span); //span과 button태그를 부모li의 자식요소로 추가
   li.id = newId; //생성된 li에 id값 부여
   toDoList.appendChild(li); //li태그를 부모ul의 자식요소로 추가
   const toDoObj = {
      text: text,
      id: newId
   };
   toDos.push(toDoObj); //toDos배열에 오브젝트 값 추가
   saveToDos(); //저장
}

function handleSubmit(event){
   event.preventDefault();
   const currentValue = toDoInput.value;
   paintToDo(currentValue);
   toDoInput.value = "";
}

function loadToDos(){
   const loadedToDos = localStorage.getItem(TODOS_LS);
   if(loadedToDos !== null){
     const parsedToDos = JSON.parse(loadedToDos);
     parsedToDos.forEach(function(toDo){
        paintToDo(toDo.text);
     });
   }
}

function init(){
   loadToDos();
   toDoForm.addEventListener("submit", handleSubmit)
}

init();
}