To Do List 만들기

1. Html 내에 todo-form 과 list 만들어주기

<form id = "todo-form>
<input required type = "text" placeholder = "Write a To Do and press Enter">
</form>
<ul id = "todo-list"></ul>

2. js 내에서 submit event 기능 추가

const toDoForm = document.getElementById("todo-form");
const toDoList = document.getElementById("todo-list");
const toDoInput = toDoForm.querySelector("input");

참고) toDoForm.querySelector("input") = document.querySelector(#todo-form input)

function handleTodoSubmite(event){
	event.preventDefault();
    const newTodo = toDoInput.value;
    toDoInput.value="";

참고) const newTodo = toDoInput.value는
input의 현재 value를 새로운 변수에 복사하는 것. 그 다음에 무엇을 하든 newTodo와는 아무상관없다.

3. todo- list 를 그리는 function 만들기-> list와 span 만들기

function paintToDo(newTodo){
 const li = document.createElement("li");
 const span = document.createElement("span");
 span.innerText = newToDo
 li.appendChild(span);
 toDoList.appendChild(li);
 
	

참고) 무엇을 그려야할 지 모르기 때문에 newTodo 라는 인자(argument)를 넣어주는 것!
function handleTodoSubmit 내에 paintTodo(newTodo) 를 추가하여 함수를 실행시킬 수 있게끔 한다.

4. button을 통하여 목록 삭제하는 기능 만들기

function paintToDo(newTodo){
중복 생략
const button = document.createElement("button");
button.innerText = "x";
li.appendChild(button);}

주의) appendChild는 함수 안에서 맨 마지막에 나올 것! button은 span뒤에 적기

5. button event

button 이 click된 건 알 수 있지만 list 중 어떤 button이 클릭되었는지는 알 수 없다.
-> click event 에 대한 정보를 알아내기
function deleteToDo(event){
console.log(event)}
-> target : button 이라는 정보를 확인.
-> event.target 내에 parentElement가 있다.
-> 어떤 li의 button을 click하였는지 파악할 수가 있다.

event.target.parentElement

target : 클릭된 HTML element
모든 HTML element는 한 개 이상의 property를 가지고 있는데 그 중 하나가 parentElement였던 것.

function paintToDo(newTodo){
중복생략
botton.addEventListener("click", deleteToDo);}


function deleteTodo(event){
	const li = event.target.paretElement;
    li.remove();}

6. todo list 저장하기

newToDo를 배열의 형태로 저장해주기!
먼저 변수를 만들어준다.

const toDos = [];
function handToDoSubmit(newToDo){
toDos.push(newToDo)}

toDos array의 내용을 localStorage에 넣어주는 함수를 만든다.

function saveToDos(){
localStorage.setItem("todos", toDos);}

위의 함수가 호출되는 시점 : function handleToDoSubmit 내에서 newToDo가 들어왔을 때 -> 그렇기에 위의 함수를 handleToDoSubmit내에 saveToDos()로 적어준다.

JSON.stringfy()

list 들을 array의 형태로 localstorage에 저장하고 싶을 때, script object나 array나 어떤 것들이든 string으로 바꾸어주는 함수를 이용할 수 있다. => JSON.stringfy()

ex) console내에

const player = {name : "nico"}
JSON.stringfy(player);

위의 player라는 객체를 문자열로 바꾸어준다.

이를 이용하여,saveToDos()내의 toDos를 JSON.stringfy(toDos)로 바꾸어준다.

function saveToDos(){
localStorage.setItem("todos", JSON.stringfy(toDos));}

7.새로고침해도 list를 화면에 띄우기

string을 array형태로 만들어주는 함수를 이용한다. => JSON.parse()

JSON.parse()

string => array
ex)

JSON.parse(localStorage.getItem("todos"))
=["a","b","c"]

위의 함수를 이용하여 localStorage 에 있는 toDos를 가져와서 단순한 string을 살아있는 array로 변환을 한다.

forEach()

array각각의 item을 가지고 작업을 수행하고 싶을 때 사용하는 함수 => forEach()

const TODOS_KEY = "todos" ----> 자주쓰이므로 변수 취급해주기
const savedToDos = localStorage.getItem(TODOS_KEY);
if(savedToDos!== null){
	const parsedToDos = JSON.parse(savedToDos);
    parsedToDos.forEach(sayHello);
    
function sayHello(item){
	console.log("this is the turn of ", item)}

위의 forEach()를 통하여 parsedToDos 배열 내의 각각의 item들에 sayHello 기능이 실현된다.

더 간단히 사용하는 방법으로는, function을 만드는 대신

parsedToDos.forEach((item)=> console.log("this is the turn of " + item)

위의 JSON.parse와 forEach를 이용하여 parseToDos array 내부의 item 들 화면에 나타내기 => paintToDo 함수 이용하기

if(savedToDos !== null){
	const parsedToDos = JSON.parse(savedToDos);
    parseToDos.forEach(paintToDo);}

문제 발생) reload 했을 때 새로 추가한 것들만 localStorage에 저장되고 예전 것들은 없어진다.
why? => const toDos =[]; 로인해 application이 시작될 때 tooDos array 는 항상 비어있기 때문.
const를 let으로 바꾸어주어 변수를 변동시킬 수 있게한다.
추가로 if 문 내에 toDos = parsedToDos 적어주기!

let toDos = [];
if(savedToDos !== null){
중복 생략
toDos = parsedToDos}

8. localStorage 내의 item 삭제하기

local storage는 toDos array를 복사해두는 곳.
toDos array는 데이터베이스.
이 둘은 같지 않음!

toDos의 각각의 item 값에 id를 주어 toDos를 object형태로 바꾸어주기
ex)

[{id:123, text:"a"}, {id:456, text:"b"}]

random 한 id값 얻기=> Date.now()

Date.now() 는 현재의 milli second를 제공한다.
이를 이용하여 newToDoObj라는 변수를 통하여 toDos를 객체의 형태로 만들어주기

function handleToDoSubmit(event){
	const newToDoObj = { text : newToDO, id : Date.now(),};
   	toDos.push(newToDoObj);
    paintToDo(newToDoObj);}

화면상의 text를 보기위해

paintTodofunction(newToDo){
span.innerText = newToDo.text;}

위와 같이 바꾸어준다.
newToDo가 인자값이기 때문에, submit함수 내의 인자값이 newToDoObj로 바뀌었으므로 text내용도 함께 바꾸어주어야함.

이후 li 에 id 값을 준다. why? 각각의 li item을 구별하고자.

paintTodofunction(newToDo){
li.id = newToDo.id}

생성한 li에 id를 생성해주는 것!
img.src property와 같은 원리! 위의 코드를 통하여 li의 id값을 받을 수 있다.

filter()

array에서 무언가를 삭제할 때 실제로 array에서 지우는 것 X
지우고 싶은 item을 제외하고 새로운 array만드는 원리이다.
이 때 사용할 수 있는 함수 => filter()
ex)

function sexyFilter(){
	return true};

[1,2,3,4].filter(sexyFilter)

위의 함수를 통해여 [1,2,3,4] 값이 출력이 된다.
sexyFilter는 반드시 true 값을 return하는 값만 출력을 하는 함수이다.

ex) item이 3이 아니면 true를 return하는 함수 만들기

function sexyFilter(item){
	return item !==3}
[1,2,3,4].filter(sexyFilter)

[1,2,4] 출력된다.
ex)

const arr = [1234, 5454, 223, 122, 45, 6775, 334]

function sexyFilter(item){return item <= 1000}

arr.filter(sexyFilter)

실제 작업 -> deleteToDo 함수 내에 toDos 배열 내의 item 삭제할 때마다 local storage 내에 업데이트 되도록 하기

function deleteToDo(event){
	toDos = toDos.filter((toDo) => toDo.id !== parseInt(li.id));
    
    saveToDos();}
    
   

li.id 자체가 문자열 값이라 parseInt함수를 적용.
위의 filter함수를 통해 toDo의 id가 li의 id와 다른 item들로만 이루어진 새로운 array를 만든다.

local storage에 업데이트 해주기 위해 꼭 saveToDos() 실행해주기