-
Notifications
You must be signed in to change notification settings - Fork 0
/
main.js
181 lines (151 loc) · 5.29 KB
/
main.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
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
// 변수명 명확, 최소 단위로 함수 자르기
//localStorage 이용해 새로고침해도 페이지 유지될 수 있게
const todoForm = document.querySelector("#todoForm");
const todoList = document.querySelector(".todos");
const addTodo = document.querySelector(".createNewTodo");
// 맨 처음 start, 이전 localStorage에 저장된 값 받아오기
let tasks = JSON.parse(localStorage.getItem("tasks")) || [];
//받아온 tasks로 이미 쌓인 todo 목록 생성
if (localStorage.getItem("tasks")) {
tasks.map((task) => {
createList(task);
});
}
//Form에서 "submit" 시 localStorage에 저장
todoForm.addEventListener("submit", function (e) {
e.preventDefault(); //submit 제출, 새로고침은 X
const input = e.target.children[0];
const inputValue = input.value;
if (inputValue != "") {
const task = {
id: new Date().getTime(),
name: inputValue,
isCompleted: false,
};
tasks.push(task);
localStorage.setItem("tasks", JSON.stringify(tasks));
createList(task);
todoForm.reset();
}
input.focus();
});
// 목록 생성, localStorage 저장된 값 기준
function createList(task) {
const taskEl = document.createElement("li");
taskEl.className = "todoLine";
taskEl.setAttribute("id", task.id);
const taskElMarkup = `
<input ID="${task.name}-${task.id}" name="tasks" type="checkbox" ${
task.isCompleted ? "complete" : ""
}>
<span class="task">${task.name}</span>
<div class="editAndDelete">
<button title = "reviseTask" type="submit" class="edit-button">
<img class="edit-button" src="assets/icon_pencil-100.svg" alt="Revise-button">
</button>
<button title="delete ${
task.name
}Task" type="submit" class="delete-button">
<img class="delete-button" src="assets/icon_delete-100.svg" alt="Delete-button">
</button>
</div>
`;
taskEl.innerHTML = taskElMarkup;
task.isCompleted ? taskEl.classList.toggle("complete") : "";
todoList.appendChild(taskEl);
}
// 생성된 목록에서 지우기
todoList.addEventListener("click", (e) => {
if (e.target.classList.contains("delete-button")) {
const taskId = e.target.closest("li").id;
removeTask(taskId);
}
});
//localStorage에 저장됐던 Id 이용해 삭제, HTML도 id 이용해 삭제
function removeTask(taskId) {
//해당 Id 제외한 배열 생성
tasks = tasks.filter((task) => task.id !== parseInt(taskId));
localStorage.setItem("tasks", JSON.stringify(tasks));
document.getElementById(taskId).remove();
}
//생성된 목록에서 수정하기
//수정 버튼 누르면 수정 가능하도록
todoList.addEventListener("click", (e) => {
const { target: button } = e; //e.target을 button 변수로
const taskId = e.target.closest("li").id;
clickEditButton(taskId, button);
});
function clickEditButton(taskId, el) {
const task = tasks.find((task) => task.id === parseInt(taskId));
const taskLi = el.closest("li");
console.log(7, task);
if (el.classList.contains("edit-button")) {
console.log(10, task);
if (taskLi.classList.contains("complete")) {
return;
console.log(11, task);
}
console.log(12, task);
const span = el.parentNode.parentNode.previousSibling.previousSibling;
span.setAttribute("contenteditable", "");
span.focus();
}
}
//수정 시 그 내용 저장
todoList.addEventListener("input", (e) => {
const { target: span } = e;
const taskId = e.target.closest("li").id;
updateEditTask(taskId, span); //e.target 요소 반환
});
function updateEditTask(taskId, el) {
if (!el.classList.contains("task")) {
return;
}
const task = tasks.find((task) => task.id === parseInt(taskId));
task.name = el.textContent;
console.log(3, task);
el.addEventListener("blur", function (e) {
e.preventDefault();
e.target.removeAttribute("contenteditable");
});
console.log(2, task);
localStorage.setItem("tasks", JSON.stringify(tasks));
}
//완료 - 미완료 상태 변경 (완료 여부 기준)
todoList.addEventListener("change", (e) => {
const { target: input } = e;
const taskId = e.target.closest("li").id;
completeTask(taskId, input);
});
function completeTask(taskId, el) {
const task = tasks.find((task) => task.id === parseInt(taskId));
console.log(1, task); //한 개의 객체 세트 반환
const taskLi = el.closest("li");
const span = el.nextElementSibling;
//li에 complete class 토글, localStorage 값 바꾸기
taskLi.classList.toggle("complete");
task.isCompleted = !task.isCompleted;
if (task.isCompleted) {
span.removeAttribute("contenteditable");
}
console.log(8, task);
localStorage.setItem("tasks", JSON.stringify(tasks));
}
//enter 발생 시 작성 완료로 간주
todoList.addEventListener("keydown", function (e) {
const { target: span } = e;
if (e.keyCode === 13) {
// e.preventDefault();
span.removeAttribute("contenteditable");
}
});
//toggle 시 입력 메뉴 껐다 켰다
addTodo.addEventListener("click", doDisplay);
function doDisplay() {
let formWrapperHidden = document.querySelector("#form-wrapper");
if (formWrapperHidden.classList.contains("hidden")) {
formWrapperHidden.classList.toggle("hidden");
} else {
formWrapperHidden.classList.toggle("hidden");
}
}