To Do List 만들기!
html
간단한 to do list 를 만들기 위해서 기존 html파일 body에 todo를 입력할수 있는 form과 todo를 나열할수 있는 list를 만들겠습니다.
<form id="todo-form">
<input type="text" placeholder="Write a To Do and Press Enter" required>
</form>
<ul id="todo-list"></ul>ul 안에 list가 필요한데 이것은 javascript로 만들어 주기!
javascript
Form 과 ul 을 html에서 js로 가져가보자!
const toDoForm = document.getElementById("todo-form");
const toDoList = document.getElementById("todo-list");Input에 to do를 작성하면 새로고침이 되는데 이것은 preventDefault()로 막아주자
function handleToDoSubmit(event) {
event.preventDefault();
}
toDoForm.addEventListener("submit", handleToDoSubmit);Input에 작성한 내용(value)을 새로운 변수에 가져오고, Enter를 누르면 값이 없어져 보이게 function에 추가
const todoInput = toDoForm.querySelector("input");function handleToDoSubmit(event) {
event.preventDefault();
const newTodo = todoInput.value;
todoInput.value = "";
}List 에 item 추가하기
작성한 내용을 list up 하기 위해 새로운 function을 만들어주고, handleToDoSubmit() 함수가 새로운 function을 사용하게 호출해준다.
paintToDo(newTodo); 호출html에 추가할수있도록 li와 span을 만들어주고 span을 li안에다 넣어준다!
function paintToDo(newTodo) {
const li = document.createElement("li");
const span = document.createElement("span");
li.appendChild(span);
span.innerText = newTodo;
toDoList.appendChild(li);
}List 에 item 제거하기
pintToDo()함수에 To do 를 삭제하는 button 추가!
추가한 button도 li에 넣어주기
const button = document.createElement("button");
button.innerText = "❌";
li.appendChild(button);button 을 눌르면 삭제하는 function 을 만들고, paintToDo() 함수에 추가!
button.addEventListener("click", deleToDo);버튼을 눌렀을때 삭제될 li를 찾아 변수로 만들고, 삭제 하기 추가!
function deleteToDo(event) {
const li = event.target.parentElement;
li.remove();
}브라우저에 List 저장하기
브라우저에 List를 남기기 위해 localStorage에 저장을 해야함
1. Todo를 저장하고
2. Todo를 불러오기
새로운 변수에 List up 할 todo들을 배열로 담기
const toDos = [];새로운 변수에 배열로 push하기 위해서 handleToDoSubmit()함수에 push 추가
toDos.push(newTodo);localStorage에는 배열(arrays)를 저장못하고 텍스트만 저장할수 있음
localStorage에 toDos array 내용을 넣기위해 함수 만들기
function saveToDos(){
localStorage.setItem("todos", toDos);
}사용자가 form을 submit 하면
우리는 input을 비우고
newTodo를 toDos 배열에 push
화면에 toDo를 그려주고
toDo 들을 저장
function handleToDoSubmit(event) {
event.preventDefault();
const newTodo = todoInput.value;
todoInput.value = ""; input 비우기
toDos.push(newTodo); newTodo를 toDos 배열에 push
paintToDo(newTodo); 화면에 toDo를 그려주고
saveToDos(); toDo 들을 저장
}localStorage에 array로 저장하면 좋지만 텍스트로 저장이되기 때문에 array처럼 보이게 브라우저가 가지고있는 기능을 이용하여 string으로 바꿔주자!
JSON.stringify()
function saveToDos() {
localStorage.setItem("todos", JSON.stringify(toDos));
}바꿔준 string을 array로 변경하기 위해 JSON.parse() 사용!
저장된 값이 null일때도 있으므로 if문사용! (localStorage가 비어있을떄)
저장된 array에 각각의 item에 대해서 function을 실행해야할때는 .forEach() 사용!
const savedToDos = localStorage.getItem(TODOS_KEY);
if(savedToDos !== null){
const parsedToDos = JSON.parse(savedToDos);
parsedToDos.forEach(paintToDo);
}application이 시작될 때 toDos array를 빈 값으로 시작하는 대신에, const를 let으로 바꿔서 업데이트가 가능하도록 만들고, localStorage에 toDo 들이 있으면 toDos에 parsedToDos를 넣어서 전에 있던 toDo들을 복원하면된다.
let toDos = [];if (savedToDos !== null) {
const parsedToDos = JSON.parse(savedToDos);
toDos = parsedToDos;
parsedToDos.forEach(paintToDo);
}localStorage에서 list 삭제하기
list를 삭제할때 정확히 어떤 리스트를 삭제할지 알아야 하기때문에 우리는 각 todo들에게 id를 준다.
Date.now()는 밀리초 단위이기때문에 겹치지 않는 수로 id가 생성된다고 보면된다.
const newTodoObj = {
text: newTodo,
id: Date.now()
}toDos에 newToDo를 push하지 않고 newTodoObj를 push한다.
브라우저에 보여지는 paintTodo또한 newTodoObj로 text와 id를 불러오게 하는데 이때 object가 아닌 실제 글자를 출력하기위해 span.innerText = newTodo.text 로 바꿔준다.
toDos.push(newTodoObj);
paintToDo(newTodoObj);id로 각각의 li item을 구별해준다.
li.id = newTodo.id;filter()
array에서 지우고 싶은 item을 빼고 새 array를 만든다.
item을 지우는게 아니라 item을 제외하는것!
array의 item을 유지하고 싶으면 true를 리턴하고, 제외하고 싶으면 false를 리턴하면된다.
클릭했던 li의 id를 갖고 있는 toDo를 제외하고 다른 toDo는 남긴다.
클릭했을때 li에 부여되는 id값은 string이므로 type이 맞지 않음.
li.id를 number로 바꿔준다. parseInt()
toDos DB에서 todo를 지운뒤엔 저장하는걸 잊으면 안됨! saveToDos()
function deleteToDo(event) {
const li = event.target.parentElement;
li.remove();
toDos = toDos.filter(toDo => toDo.id !== parseInt(li.id));
saveToDos();
}소감
일단 모든 개발자분들 대단하시구요! 노마드코더 니코 난리나구요~
todo list를 만들어보고, 배운내용 정리하려고 또 보고, 이해안돼서 돌려보고 ㅜㅜ 다시보면 새롭고;; ㅎㅎㅎㅎㅎㅎㅎㅎ
꾸역꾸역 강의를 보며 완성은 했지만 이번꺼는 어려웠다!!
아직 100% 내것이라고 할순 없지만 getElementById(), querySelector(), preventDefault(), appendchild(), addEventListener(), setItem(), getItem(), JSON.stringify(), JSON.parse(), push(), forEach(), filter(), 등등 재미나기도하고 신기하기도했다!
끈기 있게 꾸준히 하다보면 한줄한줄 자유롭게 슉슉 써내려갈때가 올것이다! 화이팅!!!
