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();
}