-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathscript.js
70 lines (52 loc) · 1.45 KB
/
script.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
const form = document.getElementById("form");
const input = document.getElementById("input");
const todosUL = document.getElementById("todos");
const todos = JSON.parse(localStorage.getItem("todos"));
if (todos) {
todos.forEach((todo) => {
addTodo(todo);
});
}
// when the submit button is clicked
form.addEventListener("submit", (e) => {
e.preventDefault();
// add a task
addTodo();
});
// adding a task to the list
function addTodo(todo) {
let todoText = input.value;
if (todo) {
todoText = todo.text;
}
if (todoText) {
const todoEl = document.createElement("li");
if (todo && todo.completed) {
todoEl.classList.add("completed");
}
todoEl.innerText = todoText;
todoEl.addEventListener("click", () => {
todoEl.classList.toggle("completed");
updateLS();
});
todoEl.addEventListener("contextmenu", (e) => {
e.preventDefault();
todoEl.remove();
updateLS();
});
todosUL.appendChild(todoEl);
input.value = "";
updateLS();
}
}
function updateLS() {
const todosEl = document.querySelectorAll("li");
const todos = [];
todosEl.forEach((todoEl) => {
todos.push({
text: todoEl.innerText,
completed: todoEl.classList.contains("completed"),
});
});
localStorage.setItem("todos", JSON.stringify(todos));
}