ToDo 리스트 만들기
- 만들고 싶은 기능
1) 먼저 HTML에 입력 폼을 만들어준다.
<form id="todo-form">
<input type="text" placeholder="Write a To Do and Press Enter"></input>
</form>
<ul id="todo-list"></ul>
2) Javascript
- 먼저 자바스크립트에서 쓰일 요소들을 변수로 만든다.
// form, input, ul 태그를 변수로 가져오기
const toDoForm = document.querySelector("#todo-form");
const toDoInput = document.querySelector('#todo-form input');
const toDoList = document.querySelector('#todo-list');
- 입력폼에 할일을 적고 엔터를 치면, input값을 저장하고, input칸을 비운다.
function handleToDoSubmit(event) {
event.preventDefault();
const newToDo = toDoInput.value;
toDoInput.value = "";
}
toDoForm.addEventListener("submit", handleToDoSubmit);
- 입력폼에 할일을 적고 엔터를 치면, 방금 저장한 값을 리스트로 만들어야한다.
function handleToDoSubmit(event) {
event.preventDefault();
const newToDo = toDoInput.value;
toDoInput.value = "";
paintToDo(newToDo);
}
toDoForm.addEventListener("submit", handleToDoSubmit);
위에서 handleToDoSubmit 맨 아래에 paintToDo라는 함수를 실행하는 값을 추가해주고, 리스트를 보여주는 다른 함수를 만들어준다.
function paintToDo (newToDo) {
const list = document.createElement("list");
const span = documnet.createElement("span");
span.innerText = newToDo;
const button = document.createElement("button");
button.innerText = "❌";
list.appendChild(span);
list.appendChild(button);
document.body.appendChild(list);
}
여기까지 만들고나면, 정상작동 되지만 리스트를 지울수 없고 새로고침하면 리스트들이 저장되지않는다.
- 리스트를 지우는 함수만들기 (부모요소 제거)
function paintToDo (newToDo) {
const list = document.createElement("list");
const span = documnet.createElement("span");
span.innerText = newToDo;
const button = document.createElement("button");
button.innerText = "❌";
button.addEventListener("click", deleteToDo);
list.appendChild(span);
list.appendChild(button);
document.body.appendChild(list);
}
- button이 생성되었던 함수에서 맨마지막에 버튼에 addEventListener를 추가해준다. 다음 이벤트함수를 만들어준다.
function deleteToDo(event){
//button의 부모요소를 찾아준다.
const list = event.target.parentElement;
//부모요소제거
list.remove();
}
- 입력으로 받은 할일들을 저장할 array를 만들고, 입력할 때마다 array에 저장해준다.
// 할일을 저장하는 array 만들어주기;
const toDos = [];
function handleToDoSubmit(event) {
event.preventDefault();
const newToDo = toDoInput.value;
toDoInput.value = "";
toDos.push(newToDo);
paintToDo(newToDo);
}
- 그 다음 새로고침해도 지워지지 않게끔 localStorage에 저장한다.
function saveToDos(){
localStorage.setItem("todos", JSON.stringify(toDos));
}
function handleToDoSubmit(event) {
event.preventDefault();
const newToDo = toDoInput.value;
toDoInput.value = "";
toDos.push(newToDo);
paintToDo(newToDo);
saveToDos();
}
다음에 해결해야할 오류는.. 할일을 삭제버튼을 눌러 없앴을 때, localStorage는 삭제가 되지 않는다. (새로고침해도 그대로)
이부분의 오류를 해결해야함..ㅠ 2편으로 만들어야겠다.