TO-DO LIST 만들기
const toDoForm = document.getElementById("todo-form");
const toDoInput = document.querySelector("#todo-form input")
const toDoList = document.getElementById("todo-list");
const TODOS_KEY = "todos"
let toDos = [];//toDos는 할일 적은 단순array
function saveToDos(){
localStorage.setItem(TODOS_KEY, JSON.stringify(toDos));//localstorage에는 텍스트만 저장가능. 그래서 stringify로 string화 해줌
}
function deleteToDo(event) {
const li = event.target.parentElement;
li.remove();
toDos = toDos.filter(toDo => toDo.id !== parseInt(li.id));//엑스박스누른 li의 id와 같지 않은 id의 todo들만 보여주기, parseint는 숫자를 string으로바꿔줌
saveToDos();
}
function paintToDo(newTodo){
const li = document.createElement("li");
li.id = newTodo.id;//li는 삭제할 것들이고 삭제할 것들은 아이디로 구분하기 위해 li에는 아이디 넣기
const span = document.createElement("span");
span.innerText = newTodo.text;//화면에 나타나는것은 내용이어야 하기 때문에 텍스트 넣기
const button = document.createElement("button");
button.innerText = "❌";
button.addEventListener("click",deleteToDo)
li.appendChild(span);
li.appendChild(button);
toDoList.appendChild(li);
}
function handleToDoSubmit(event) {
event.preventDefault();
const newTodo = toDoInput.value;
toDoInput.value = "";//할일 적은 다음 다시 빈칸을 만들어준다
const newTodoObj = {//어떤걸 삭제할 지 알려주기위해 아이디를 생성해주는 변수 정의
text:newTodo,
id: Date.now(),
}
toDos.push(newTodoObj);//새로운 할일이 추가되면
paintToDo(newTodoObj);//그 할일을 그려주고
saveToDos();//그 할일을 스토리지에 텍스트로 저장해준다
}
toDoForm.addEventListener("submit", handleToDoSubmit);
const savedToDos = localStorage.getItem(TODOS_KEY);
console.log(savedToDos);
if (savedToDos !== null){
const parsedToDos = JSON.parse(savedToDos);//json.parse는 string을 자바스크립트가 사용할 수 있는 array로 바꿔준다
toDos= parsedToDos;//기존에 있는 리스트들은 저장
parsedToDos.forEach(paintToDo);//parsedtodo에있는 각각의 리스트에 대해서 함수를 실행
}
정리
*
JSON.stringify() : array->string 으로 형식 바꿔주기
JSON.parse() : string-> 자바스크립트가 이해할 수 있는 array로 변경
*
함수를 화살표로 표현하기 (1)=(2)
(1)
(item) => console.log("this is the turn of ", item)
(2)
function sayhello(item){
console.log("this is the turn of", item)
}
*
리스트에서 없애는 작업을 위해, 일치하지않는 것만 도출하는 filter 함수 정의
const arr = [ 1, 2, 3]
function goodFilter(num){return num !== 2 }
arr.filter(goodFilter)
결과값: [1, 3]