javascript (12) - ToDoList #3

ToDoList 추가하기 #3

1. 삭제 버튼 추가 (삭제기능)

2. 내용 저장 (새로고침 후 내용 유지)

3. 저장된 내용 삭제하기

const toDoForm = document.querySelector("#todo-form");

const toDoInput = toDoForm.querySelector("input")

const toDoList = document.querySelector("#todo-list");

const TODOS_KEY = "todos";

let toDos = [];

function saveTodo() {

localStorage.setItem(TODOS_KEY, JSON.stringify(toDos));

}

function deleteTodo(event) {                     //삭제기능

const li = event.target.parentElement;

li.remove();

toDos = toDos.filter(todo => todo.id !== parseInt(li.id));

saveTodo();

}

function paintToDo(newTodo) {

const li = document.createElement("li");

li.id = newTodo.id;

const span = document.createElement("span");

span.innerText = newTodo.text;

const button = document.createElement("button");

button.innerText = "❌";

button.addEventListener("click", deleteTodo);

li.appendChild(span);

li.appendChild(button);

toDoList.appendChild(li);

}

function handleToDoSubmit(event) {

event.preventDefault();

const newTodo = toDoInput.value;

toDoInput.value = "";

const newTodoObj = {

text: newTodo,

id: Date.now(),

};

toDos.push(newTodoObj);

paintToDo(newTodoObj); //html에 id값을 전달하기 위해서

saveTodo();

}

toDoForm.addEventListener("submit", handleToDoSubmit);

const saveToDos = localStorage.getItem(TODOS_KEY);

if (saveToDos !== null) {

const parsedToDos = JSON.parse(saveToDos);

toDos = parsedToDos;

parsedToDos.forEach(paintToDo);

};

---

3-1. 삭제를 위한 id 할당 - object로 변경하기

html의 Element를 지울 수 있지만 LocalStorage중 어떤것을 삭제해야하는 지 모른다.

그래서 array toDos를 식별하기 좋은 형태 object형태로 바꿔줘야 한다. (id 할당 가능)

id할당을 자동으로 해주는 랜덤 ID할당 기능 활용.

const NewTodoObj = { text : newTodo, id: Date.now(),    //랜덤 id 생성 }; toDos.push(newTodoObj);   //전달해주는 인자를 text형태인 todo 에서 object형태인 NewTodoObj로 변경. paintToDo(newTodoObj);  ---> 여기만 변경했을 경우 화면에 text가 나오지 않고 [object] [object] 형식으로 출력되는데 이는 paintTodo에서 텍스트형태인 todo를 받기 때문에 span.innerText = newTodo  -->  span.innerText = newTodo.text; 변경해야 정상 출력

생성된 ID값은 입력된 todo값을 식별하기 위해 <li>에 ID값을 붙여준다.

painTodo() 함수에 <li> 태그 생성한 다음 ID값을 할당해주면 된다.

li.id = newTodo.id;

---

3-2. 저장된 내용 삭제하기

실제로 item을 삭제하는 것이  아니라 지우고 싶은 Item을 빼서 새로운 array를 만든다.(fitler기능)

해당 기능을 사용해서 Todo 입력값을 삭제한다.

function Filter(item) {return item !==3} // 3과 같지 않으면 true, 3과 같으면 false (true면 통과 false면 빼!) [1, 2, 3, 4, 5].filter(Filter) ===> (4) [1,2,4,5]

todo.id 와 내가 지우고 싶은 id랑 같은지 확인하면 된다.

function deleteTodo(event) {                     //삭제기능 const li = event.target.parentElement; li.remove(); toDos = toDos.filter(todo => todo.id !== parseInt(li.id)); saveTodo(); // 지운 후 localStorage에 저장해 줘야 한다. }

todo.id는 숫자고 li.id는 문자(String)이기 때문에 type을 parseInt로 숫자로 변경해줘야한다.