1-1) form
submit을 하는 순간 refresh가 됨!
-> preventDefault를 이용하여 이를 막음
//todo.js
const todoForm = document.getElementById("todo-form");
const todoInput = todoForm.querySelector("input");
const todoList = document.getElementById("todo-list");
function handleToDoSubmit(event){
event.preventDefault();
const newTodo = todoInput.value;
paintTodo(newTodo);
todoInput.value = "";
}
todoForm.addEventListener("submit",handelToDoSubmit);
1-2) "ul"만 만들고 JavaScript에서 li를 추가시킬 것!
-> 2)에서 다룰 예정
// index.html
<form id="todo-form">
<input type="text" placeholder="Write a To-do and press enter" required>
</form>
<ul id="todo-list">
<li>
<span></span>
<button><button>
</li>
</ul>
// 의 형태로 만들 것! 이렇게 만드는 이유는 삭제버튼을 만들기 위함!
// but 문제점은 새로고침을 하는 순간 다 사라짐 -> 저장방법을 생각해 봐야함
function paintTodo(newTodo){
const li = document.createElement("li");
const span = document.createElement("span");
span.innerText = newTodo;
li.appendChild(span);
todoList.appendChild(li);
}
button이 click event를 기다리고 있어야함
// todo.js
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);
button.addEventListener("click",deleteTodo);
todoList.appendChild(li);
}
이렇게 하면 어느 li가 클릭되었는지 알 수가 없음!
-> event -> targer: 어디서 클릭이 되었는지를 알 수 있음
-> parent가 누구인지 아는 것이 중요함!
function deleteTodo(event){
const li = event.target.parentElement; // 클릭된 element의 부모 -> 우리가 삭제하고자 하는 li
li.remove();
}
localStorage 이용하자!!
const toDos =[];
const TODOS_KEY = "toDos";
function saveToDos(){ // localStorage에 배열을 저장
localStorage.setItem(TODOS_KEY,toDos);
}
-> but, 새로고침하면 배열 위에 새롭게 저장됨(기존 정보가 날라감)
JSON.stringfy: object나 array 또는 어떤 JS 코드던간에 string으로 만들어줌
function saveToDos(){ // localStorage에 배열을 저장
localStorage.setItem(TODOS_KEY,JSON.stringfy(toDos));
// localStorage에 toDos 배열을 text로 저장함!
}
JSON.parse("[1,2,3,4]");
// string을 array로 만들어줌
paintTodo() 함수를 이용!
기존 array와 나중의 array를 둘다 유도하고 싶음
const toDos -> let toDos로 수정! (let은 변경이 가능하기 때문)
localStorage에 toDo가 있다면 복원시킴
const savedToDos = localStorage.getItem(TODOS_KEY);
if(savedToDos !== null){
const parsedToDos = JSON.parse(savedToDos); // text를 array로 바꿔서 저장함
parsedToDos.each(paintTodo); // item마다 paintTodo를 실행
toDos = parsedToDos;
}
toDos array !== localStorage
-> 단지 복사를 하는 것 뿐!
-> array 안에 중복된 값이 있다면 구별해야함 -> todo에 id를 만들어서 id를 이용하자! -> todo를 text가 아닌 object로 만들자! ex) { id : 121212, text : "drink" }
-> id는 Date.now()를 이용
newObj={
text:newTodo,
id:Date.now()
}
// todo.js
function handelToDoSubmit(event){
event.preventDefault();
const newTodo = todoInput.value;
const newTodoObj={
text: newTodo,
id: Date.now()
}
toDos.push(newTodoObj); // 변경 toDos에 object를 추가함
paintTodo(newTodoObj); // 변경
todoInput.value ="";
saveToDos();
}
function paintTodo(newTodo){
const li = document.createElement("li");
const span = document.createElement("span");
li.id=newTodo.id; // 변경 li를 구별할 수 있는 수단이 됨!
span.innerText = newTodo.text; // 변경
const button = document.createElement("button");
button.innerText = "❌";
li.appendChild(span);
li.appendChild(button);
button.addEventListener("click",deleteTodo);
todoList.appendChild(li);
}
-> but, ❌를 눌러도 화면상에는 사라지지만 localStorage에는 사라지지 않음!
filter를 이용!
이때 li.id는 string이기 때문에 parseInt를 이용하여 정수로 변환해야함
// ex)
[1,2,3,4].filter(함수);
// 함수: 새 array에 이 object를 유지하고 싶으면 무조건 true를 반환해야함 -> if false? 새 array에 포함 X
// todo.js
function deleteTodo(event){
const li = event.target.parentElement;
li.remove();
toDos = toDos.filter((toDo) => toDo.id !== parseInt(li.id)); // 새 array를 toDos에 다시 저장함
/*
function sexyFilter(toDo){
toDo.id !== parseInt(li.id);
}
toDos = toDos.filter(sexyFilter);라고 써도 됨
*/
saveToDos(); // localStorage에 저장함
}