노마드코더 바닐라JS 로 크롬 앱 반들기 Day5

#7 TO DO LIST

7.0) Setup

-greetings를 만들어내던 과정과 매우 흡사함.

7.1) Adding TODos

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

• 자바스크립트에서 리스트를 만들고, 스팬을 만들고, 만든 스팬을 리스트 안에 다시 넣는 과정

7.2) Deleting To Dos

• event.target.parentElement
• 여러개의 버튼이 추가되었을때, 어떤 버튼을 눌렀는지 알기 어려움. > 이때 target

7.3) Saving To Dos

• localStorage에는 text형태만 들어갈 수 있음.

7.4) Loading To Dos part1

• JSON.stringify() > 배열, 객체 모두 String으로 만들어줌
• JSON.parse() > 단순한 string을 살아있는 array로 만들어줌.
• foreach > array의 각 item 에 대해 function을 실행하게 해줌.

7.5) Loading To DOs part2

7.6) Deleting TO Dos part1

• Date.now()를 통해서 고유한 랜덤 아이디를 부여함.

7.7) Deleting To Dos part2

• array.filter()
• 필터는 어레이의 엘레먼트들을 다 조회해서 펑션기능을 수행함. 반드시 TRUE를 반납할 때만 새 배열에 다시 담아줌.

function 함수명(item){return item !==3}
[1,2,3,4,5].filter(함수명) 
> [1.2.4.5]

const arr = ["pizza","banana","tomato"]
function 함수명(food){ return food !== "banana" }
arr.filter(함수명)
> ["pizza,"tomato"]

const arr = [1234,4545,333,141,66,5555,334]
function 함수명(potato){return potato <= 1000}
arr.filter(함수명)
>[333,141,66,334]

7.8) Deleting To Dos part3