-
Notifications
You must be signed in to change notification settings - Fork 0
/
todo.js
89 lines (76 loc) · 2.62 KB
/
todo.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
// global func ver.
const TODOS_LOCALSTORAGE = 'toDos'; //로컬 스토리지에 value를 요청할 key 값
const toDoForm = document.querySelector(".js-toDoForm"),
toDoInput = toDoForm.querySelector("input"),
addButton = toDoForm.querySelector("a"),
toDoList = document.querySelector(".js-toDoList");
let toDos = [];
addButton.addEventListener("click", handleSubmit);
function deleteToDo (event) {
// 각 요소의 부모요소인 li는 id를 가지고 있음.
const btn = event.target.parentNode;
const li = btn.parentNode;
toDoList.removeChild(li);
const cleanToDos = toDos.filter(function(toDo) {
return toDo.id !== parseInt(li.id);
}); //id가 서로 일치가 안되는 것들만 다시 배열로 받음. 지워진 값들을 빼고!
toDos = cleanToDos;
saveToDos();
}
function saveToDos() {
localStorage.setItem(TODOS_LOCALSTORAGE, JSON.stringify(toDos));
}
function createEl(tagName){
return document.createElement(tagName);
}
function appendNode(parentNode, childElement) {
parentNode.appendChild(childElement);
}
function renderToDo(text){
const li = createEl("li");
const checkBox = createEl("input");
const span = createEl("span");
const delBtn = createEl("button");
const newId = toDos.length + 1;
const icon = `<ion-icon name="trash-outline"></ion-icon>`;
checkBox.type = "checkbox";
checkBox.classList.add("check");
delBtn.innerHTML = icon;
span.innerText = text; //input text
delBtn.addEventListener("click", deleteToDo);
appendNode(li, checkBox);
appendNode(li, span);
appendNode(li, delBtn);
appendNode(toDoList, li);
li.id = newId;
const toDoObj = {
text: text,
id: newId //index는 0부터 시작하기 때문에 차례대로 넘버링.
}
toDos.push(toDoObj);
saveToDos();
}
function handleSubmit(event) {
event.preventDefault(); //현재 이벤트의 기본 동작을 중단
const currentValue = toDoInput.value;
if (currentValue === ""){
alert("입력칸이 비었습니다! 내용을 입력하세요.");
} else {
renderToDo(currentValue);
}
toDoInput.value = "";
}
function loadToDos () {
const loadedToDos = localStorage.getItem(TODOS_LOCALSTORAGE);
if (loadedToDos !== null){ //null이 아닐때만(추가된 내용이 있을 때)
const parsedToDos = JSON.parse(loadedToDos);
parsedToDos.forEach(function (eachToDo){
renderToDo(eachToDo.text);
})
}
}
function init (){
loadToDos (); //새로고침 전 저장된 내용을 다시 불러옴.
toDoForm.addEventListener("submit", handleSubmit);
}
init();