-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
146 lines (114 loc) · 4.1 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
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
const taskInput = document.querySelector(".task-input input");
taskBox = document.querySelector(".task-box");
filters = document.querySelectorAll(".filters span");
clearAll = document.querySelector(".clear");
let editId;
let isEdited = false;
filters.forEach((btn) => {
btn.addEventListener("click", () => {
//console.log(btn);
// ADD OR REMOVE CLASS="ACTIVE"
// TO FIRST REMOVE CLASS "ACTIVE" FROM PREVIOUS SELECTED
document.querySelector("span.active").classList.remove("active");
// THEN ADD CLASS "ACTIVE" TO CURRENT SELECTED
btn.classList.add("active");
showTodo(btn.id);
});
});
// GET LOCALSTORAGE TODO-LIST
let todos = JSON.parse(localStorage.getItem("todo-list"));
// CONSOLE LOGGING TODO
function showTodo(filters) {
let list = "";
if (todos) {
todos.forEach((todo, id) => {
// console.log(id, todo);
// ADDING THE CLASS 'CHECKED' IF IT HAS BEEN COMPLETED or TO PREVENT IT FROM GETTING 'UNCHECKED' DUE TO REFRESHING THE PAGE
let isCompleted = todo.status == "Completed" ? "checked" : "";
// if completed then set isCompleted value to checked
if (filters == todo.status || filters == "all") {
list += `<li class="task">
<label for="${id}">
<div class="content">
<input onclick="updateStatus(this)" type="checkbox" id="${id}" ${isCompleted}>
<p class="${isCompleted}">${todo.name}</p>
</div>
<div class="setting">
<span onclick="editTask(${id}, '${todo.name}')" ><i class="uil uil-edit-alt"></i></span>
<span onclick="deleteTask(${id})" ><i class="uil uil-trash-alt"></i></span>
</div>
</label>
</li>`;
}
});
}
// IF TASK IS THERE THEN SHOW THE LIST or else IF THERE IS NO TASK THEN SHOW THE SPAN
taskBox.innerHTML = list || `<span>No Task here!</span>`;
}
showTodo("all");
// FUNCTION TO UPDATE STATUS
function updateStatus(selectedTask) {
// GETTING PARAGRAPH THAT CONTAINS CLASS NAME
let taskName = selectedTask.parentElement.lastElementChild;
// TO ADD or REMOVE CHECKED CLASS DYNAMICALLY
if (selectedTask.checked) {
taskName.classList.add("checked");
todos[selectedTask.id].status = "Completed";
} else {
taskName.classList.remove("checked");
todos[selectedTask.id].status = "Pending";
}
// MODIFING STATUS ON LOCAL STORAGE AS WELL
localStorage.setItem("todo-list", JSON.stringify(todos));
// console.log(selectedTask);
}
// FUNCTION TO DELETE TASK
function deleteTask(deleteId) {
// console.log(deleteId);
// REMOVE SELECTED TASK FROM ARRAY OR TODOS
todos.splice(deleteId, 1);
// UPDATE THE TODOS ARRAY AGAIN INTO THE LOCALHOST
localStorage.setItem("todo-list", JSON.stringify(todos));
// SHOW THE UPDATED TASK BOX AGAIN
showTodo("all");
}
// FUNCTION TO EDIT TASK
function editTask(taskId, taskName) {
// console.log(taskId);
editId = taskId;
isEdited = true;
taskInput.value = taskName;
}
// FUNCTION TO CLEAR ALL TASK
clearAll.addEventListener("click", () => {
// REMOVE ALL ITEMS FROM ARRAY OR TODOS
todos.splice(0, todos.length);
// UPDATE THE TODOS ARRAY AGAIN INTO THE LOCALHOST
localStorage.setItem("todo-list", JSON.stringify(todos));
// SHOW THE UPDATED TASK BOX AGAIN
showTodo("all");
});
// MAIN FUNCTION TO TAKE INPUT TASK
taskInput.addEventListener("keyup", (e) => {
let userTask = taskInput.value.trim();
if (e.key == "Enter" && userTask) {
if (!isEdited) {
// IF isEdited IS FALSE
if (!todos) {
todos = []; // IF TODOS IS EMPTY THEN PASS EMPTY ARRAY TO TODOS
}
let taskInfo = { name: userTask, status: "Pending" };
// ADD NEW TASK
todos.push(taskInfo);
} else {
// IF isEdited TRUE
isEdited = false;
todos[editId].name = userTask;
}
// SETTING TASK INPUT VALUE TO EMPTY AGAIN
taskInput.value = "";
localStorage.setItem("todo-list", JSON.stringify(todos));
// MAKE IT APPEAR ON TASKBOX
showTodo("all");
}
});