-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
147 lines (115 loc) · 3.55 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
147
// Define UI element
let from = document.querySelector('#task_form');
let taskInput = document.querySelector('#add_task');
let showingTask = document.querySelector('ol');
let clearBtn = document.querySelector('#clear_task_btn');
let filter = document.querySelector('#filter_task');
// // Define Event listeners
from.addEventListener('submit', addTask);
showingTask.addEventListener('click', removeList);
clearBtn.addEventListener('click', clearTask);
filter.addEventListener('keyup', filterTask);
document.addEventListener('DOMContentLoaded', getTasks);
// Define function
// Add task
function addTask(e) {
if (taskInput.value == '') {
alert("Please enter the Task!!");
} else {
// Create li item inside ordered list
let li = document.createElement('li');
li.appendChild(document.createTextNode(taskInput.value + " "));
// Create link inside list
let link = document.createElement('a');
link.setAttribute('href', '#');
link.innerHTML = 'X';
li.appendChild(link);
showingTask.appendChild(li);
// Save Task Local Storage
storeTaskInLocalStorage(taskInput.value);
taskInput.value = '';
}
e.preventDefault();
}
// Remove List Task
function removeList(e) {
if (e.target.hasAttribute('href')) {
if (confirm("Are you sure remove item?")) {
let ele = e.target.parentElement;
ele.remove();
// Remove Item in Local Storage
removeFromLS(ele);
}
}
}
// Clear All Task
function clearTask(e) {
// 1st Way
// showingTask.innerHTML = " ";
// 2nd Way & Faster Way
while (showingTask.firstChild) {
showingTask.removeChild(showingTask.firstChild);
}
// Full Task list Clear From document
if (confirm("Are you sure clear Full Task list??")) {
localStorage.clear();
}
}
// Filtering Task
function filterTask(e) {
let text = e.target.value.toLowerCase();
document.querySelectorAll('li').forEach(task => {
let item = task.firstChild.textContent;
if (item.toLowerCase().indexOf(text) != -1) {
task.style.display = 'block';
} else {
task.style.display = 'none';
}
});
}
// Storage Task in Local Storage
function storeTaskInLocalStorage(task) {
let tasks;
if (localStorage.getItem('tasks') == null) {
tasks = [];
} else {
tasks = JSON.parse(localStorage.getItem('tasks'));
}
tasks.push(task);
localStorage.setItem('tasks', JSON.stringify(tasks));
}
function getTasks(e) {
let tasks;
if (localStorage.getItem('tasks') == null) {
tasks = [];
} else {
tasks = JSON.parse(localStorage.getItem('tasks'));
}
tasks.forEach(task => {
let li = document.createElement('li');
li.appendChild(document.createTextNode(task + " "));
// Create link inside list
let link = document.createElement('a');
link.setAttribute('href', '#');
link.innerHTML = 'X';
li.appendChild(link);
showingTask.appendChild(li);
});
}
// Remove Item from Local Storage
function removeFromLS(taskItem) {
let tasks;
if (localStorage.getItem('tasks') == null) {
tasks = [];
} else {
tasks = JSON.parse(localStorage.getItem('tasks'));
}
let li = taskItem;
li.removeChild(li.lastChild);
tasks.forEach((task, index) => {
if (li.textContent.trim() === task) {
tasks.splice(index, 1);
}
});
localStorage.setItem('tasks', JSON.stringify(tasks));
}