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
| let todos = [];
const $todoInput = document.querySelector(".todo-input");
const $todoList = document.querySelector(".todo-list");
const generateNextTodoId = () =>
Math.max(...todos.map((todo) => todo.id), 0) + 1;
const render = (todos) => {
$todoList.innerHTML = todos
.map(
({ id, content, completed }) =>
`<li id="${id}">
<input type="checkbox" ${completed ? "checked" : ""} />
<span>${content}</span>
<button>X</button>
</li>`
)
.join("");
};
const setTodos = (newTodos) => {
todos = newTodos;
render(todos);
};
const fetchTodos = () => {
setTodos([
{ id: 3, content: "일찍 일어나기", completed: false },
{ id: 2, content: "공부하기", completed: false },
{ id: 1, content: "저녁먹기", completed: false },
]);
};
const addTodo = (content) => {
todos = [{ id: generateNextTodoId(), content, completed: false }, ...todos];
setTodos(todos);
};
const toggleCompleted = (id) => {
todos = todos.map((todo) =>
todo.id === +id ? { ...todo, completed: !todo.completed } : todo
);
setTodos(todos);
};
const removeTodo = (id) => {
todos = todos.filter((todo) => todo.id !== +id);
setTodos(todos);
};
window.addEventListener("DOMContentLoaded", () => {
fetchTodos();
});
$todoInput.addEventListener("keyup", (e) => {
const content = $todoInput.value.trim();
if (e.key !== "Enter" || content === "") return;
addTodo(content);
$todoInput.value = "";
});
$todoList.addEventListener("change", (e) => {
toggleCompleted(e.target.parentNode.id);
});
$todoList.addEventListener("click", (e) => {
if (!e.target.matches("button")) return;
removeTodo(e.target.parentNode.id);
});
|