투두리스트 만들기
<form id="todo-form">
<input type="text" placeholder="Write a To Do and Press Enter" required>
</form>
<ul id="todo-list">
</ul>
먼저 폼태그가 있어야 한다.
그리고 리스트를 만들어 주는데, ul태그를 만들고 li는 자바스크립트로 추가할 것이기 때문에 ul 태그의 내용은 비워놓는다.
const toDoForm = document.getElementById("todo-form");
const toDoInput = toDoForm.querySelector("input");
const toDoList = document.getElementById("todo-list");
function handleToDoSubmit(event) {
event.preventDefault();
console.log(toDoInput.value);
}
toDoForm.addEventListener("submit", handleToDoSubmit);
html 문서의 투두리스트과 관련한 내용을 자바스크립트로 불러와 준다.
form의 기본동작을 막기 위해(제출하면 페이지 새로고침) preventDefault()해준다.
이제 input의 값을 가져와야 하는데 가져오기 위해 두 번째 줄과 같이 입력한다.
input은 form 태그 안에 있기 때문에, document에서 가져오지 않고 toDoForm에서 가져오면 편하다.
이제 콘솔로 출력되는지 확인해보자
잘 나타난다. 하지만 input태그 안의 내용이 그대로 남아있다.
없애기 위해서 value에 ""(빈값)을 넣어야 한다.
function handleToDoSubmit(event) {
event.preventDefault();
const newToDo = toDoInput.value;
toDoInput.value = "";
}
함수를 이와 같이 만들어 준다.
이것은 입력했던 value 값은 newToDo라는 변수에 복사해서 저장하는 것이기 때문에 toDoInput값을 ""으로 바꾸어도 newToDo라는 변수에는 영향이 없다.
function paintToDo(newTodo) {
const li = document.createElement("li");
const span = document.createElement("span");
li.appendChild(span)
span.innerText = newTodo;
toDoList.appendChild(li);
}
function handleToDoSubmit(event) {
event.preventDefault();
const newToDo = toDoInput.value;
toDoInput.value = "";
paintToDo(newToDo);
}
toDoForm.addEventListener("submit", handleToDoSubmit);
이제 li를 ul에 추가해야 한다.
그러기 위해서 paintToDo라는 함수를 만들어 준다. 제출할 때 handleToDoSubmit가 실행되면 실행될 것이므로 handleToDoSubmit안에서 실행시켜준다. 인자로 handleToDoSubmit안에 있는 newToDo를 넣어준다.
이전에 배웠던 createElement라는 함수로 li와 span을 만들어 준다.
그리고 이것을 html에 추가해 주어야 하는데, appendChlid를 이용한다.
li안에 span을 넣어주고(나중에 버튼을 따로 만들 것이기 때문에 li안에 들어갈 텍스트 내용을 span으로 구분함) span의 텍스트 내용은 함수의 인자 newTodo를 넣어 준다(handleToDoSubmit에 있는 newToDo가 인자로 들어가서 실행될 것이다)
마지막으로 li도 toDoList(ul태그)안으로 넣어준다.
이렇게 잘 추가되는 모습을 볼 수 있다.
이제 삭제버튼과 새로고침하면 투두리스트 목록이 사라지는 문제를 해결해야 한다.
function paintToDo(newTodo) {
const li = document.createElement("li");
const span = document.createElement("span");
span.innerText = newTodo;
const button = document.createElement("button");
button.innerText = "❌";
li.appendChild(span);
li.appendChild(button);
toDoList.appendChild(li);
}
일단 버튼을 li와 같은 방법으로 만들어서 추가해 준다. append는 마지막에 위치해 있어야 한다.
function deleteToDo(event) {
}
function paintToDo(newTodo) {
const li = document.createElement("li");
const span = document.createElement("span");
span.innerText = newTodo;
const button = document.createElement("button");
button.innerText = "❌";
button.addEventListener("click", deleteToDo)
li.appendChild(span);
li.appendChild(button);
toDoList.appendChild(li);
}
이제 버튼을 누르면 삭제하게 해야 하는데 일단 deleteToDo 함수를 만들고 paintToDo 안에서 button에게 이벤트를 추가해주고 del~~함수 연결.
문제는 button에 click이벤트를 추가했을 때, 어떤 버튼을 클릭했는지 모른다.
function deleteToDo(event) {
console.dir(event.target)
}
이처럼 입력하고
버튼 클릭해서 콘솔
이거 찾아야 함
이걸로 어떤 li가 부모인지 찾을 수 있다
function deleteToDo(event) {
const li = event.target.parentElement;
li.remove();
}
이와 같이 입력해 준다.
button이 담겨있는 부모 태그를 찾고 그 부모 태그를 삭제해준다.
새로고침하면 투두가 사라지기 때문에 사라지지 않도록 저장해야 한다.
const toDos = [];
function handleToDoSubmit(event) {
event.preventDefault();
const newToDo = toDoInput.value;
toDoInput.value = "";
toDos.push(newToDo);
paintToDo(newToDo);
}
투두들을 담을 배열을 만들고 push를 이용하여 입력하는 투두들을 배열 안에 넣는다.
그리고 이 배열을 localstorage에 넣어야 한다.
function saveToDos() {
localStorage.setItem("todos", JSON.stringify(toDos))
}
배열을 로컬스토리지에 담는 함수를 만들어준다. JSON.stringify는 값을 문자열로 담아주기 위해 사용한다.
JSON.parse는 자바스크립트가 이해할 수 잇는 살아있는 array로 만들 수 있다
이런 식으로
이제 불러와야 하는데
const savedToDos = localStorage.getItem(TODOS_KEY)
오류를 줄이기 위해 "todos"를 변수를 만들어서 저장해 준다.
const savedToDos = localStorage.getItem(TODOS_KEY);
if (savedToDos !== null) {
const parseToDos = JSON.parse(savedToDos);
parseToDos.forEach((item) => console.log(item));
}
savedToDos가 빈값이 아니면 JSON.parse이용해서 이해할 수 잇는 배열로 만들어주고 forEach라는 함수 이용해서 item값을 불러올 수 잇다
이런식으로 하나하나 불러올 수 있다.
여기에 paintToDo를 불러오면
if (savedToDos !== null) {
const parseToDos = JSON.parse(savedToDos);
parseToDos.forEach(paintToDo);
}
새로고침해도 저장이 되어있는 모습을 볼 수 있다.
근데 문제는 투두를 새로 추가하면 로컬스토리지가 초기화되고 새로 입력했던 내용들만 저장된다.
이것을 해결하려면
일단 const로 반들었던 toDos를 업데이트가 가능하도록 let으로 바꾸고
if (savedToDos !== null) {
const parseToDos = JSON.parse(savedToDos);
toDos = parseToDos;
parseToDos.forEach(paintToDo);
}
toDos =parseToDos; 를 추가하여 전에 있던 toDo 목록을 복원한다.
다음에는 투두리스트를 삭제할 때 로컬스토리지에서도 삭제되는 것을 할 것이다.
