todo list html
할 일을 적을 form 태그와, 적은 할 일들을 리스트로 만들 ul 태그를 만들어준다.
todo list
변수에 담긴 위치들
리스트를 배열에 넣어 관리하자.
할 일을 저장하기 위해 배열을 만들고 그 배열을 사용해서 localstorage에 저장을 할 건데, localstorage에는 텍스트만 저장되기 때문에
배열을 텍스트로 바꾸는 JSON.stringify를 사용하여 저장한다.
화면에 보여주는 함수
todo list를 그릴 paintToDo 함수.
paintToDo함수는 화면에 할 일의 리스트와 삭제 버튼을 만들어준다.
li 변수에 li 태그를 만드는 코드를 담는다. span과 button도 마찬가지.
li의 id를, toDoSubmit 속, paintToDo 함수의 newTodoObj id값으로 준다.
(toDoSubmit 속 paintToDo 함수의 '(newTodoObj)'는, paintToDo함수의 '(todolist)'가 된다.)
appendChild를 사용해서 li의 자식태그로 span과 button을 준다.
버튼에 클래스를 준 건 css 때문에 그렇다. js와는 상관없다.
버튼에 innerText를 사용해서 텍스트를 넣어주고, 버튼을 클릭했을 때 deleteToDo함수를 실행할 이벤트리스너를 만들어준다.
li에 span과 button을 자식태그로 넣어줬기 때문에, li를 toDoList의 자식태그로 넣어줘야한다.
삭제 함수
삭제 버튼을 클릭했을 때 실행될 함수
이벤트 리스너로 실행되는 삭제함수다. 이벤트리스너의 deleteToDo에는 없지만, 여기에는 deleteEvent라는 파라미터가 있다!
보통은 event라고 하지만, 내 마음대로 바꿔서 사용할 수도 있다.
저 deleteEvent는 클릭했을 때의 정보를 담고 있다. js에서 기본적으로 제공하는 프로퍼티다.
그래서 기본적으로 제공하는 저것을 가지고, 삭제를 클릭했을 때 어떤 걸 삭제해야 하는지 알려줄 수 있다.
li 변수에 deleteEvent의 target의 parentElement를 담고, 그 li를 삭제한다.
그리고 toDos (저 위의 배열) 를 filter를 사용해서 바꿔버린다.
여기서 filter란 배열의 값들을 하나하나 비교해서 true인 값들만 모아, 다시 반환한다.
filter의 괄호속 toDo는 toDos의 값이다. (값들 x, 값 하나 o)
toDo의 id와 li변수의 id값이 다르면 true인데, 우리가 삭제하려는 id와 버튼을 눌렀을 때의 id는 같기 때문에 false가 되어 삭제가 된다.
(toDo.id와 li.id의 타입이 다르기 때문에 비교가 안된다. 그래서 parseInt로 li.id를 감싸서 같은 타입으로 만든 후 비교를 해준다.)
그 후에 saveToDos를 실행해서 저장을 한다.
todo를 제출했을 때 실행될 함수
toDoForm.addEventListener("submit", toDoSubmit)는 form 태그가 submit 됐을 때, toDoSubmin 함수를 실행한다.
toDoSubmit 함수가 실행되면, 기본적으로 일어나는 새로고침을 preventDefault로 막는다.
할 일을 적고 보내면 다른 할 일을 적기 위해 적는 부분을 빈 공간으로 만들어준다.
그리고 로컬스토리지에 저장할 정보들을 객체로 만들어 변수에 담는다.
객체의 id는 중복을 방지하기 위해 Date.now로 랜덤과 비슷하게 만든다.
toDos라는 배열에 push를 사용하여 객체를 넣고,
그 후 화면에 todolist를 그리는 paintTodo와, 저장을 하는 saveToDos 함수를 실행시킨다.
savedToDos가 null이 아니라면, (localStorage에 get할 item이 있다면) 중괄호 안의 코드를 실행한다.
조건문에 있는 JSON.parse는, JSON.stringify를 사용해서 저장한 정보들을 배열의 형태로 바꿔서 js가 사용할 수 있게 한다.
그리고 toDos를 parsedToDos의 변수에 담긴 값들로 바꾸고, 그 바꾼 값들(parsedToDos)을 하나하나 paintToDo에 넣어 실행한다.
(forEach가 값을 하나하나 넣어 실행해준다. 바뀐 toDos의 값(parsedToDos)을 하나하나 paintToDo 함수에 넣어 실행하는 것.)
