FazBrowse GitHub Viewer
|
Trending
|
URL:
|
Home
Tools:
[Download Repo ZIP]
[View Raw Code]
[Original HTTPS Page]
JavaScript-Task-List/app.js at master · B-Red/JavaScript-Task-List · GitHub
B-Red
/
JavaScript-Task-List
Public
Notifications
You must be signed in to change notification settings
Fork
0
Star
0
Code
Issues
0
Pull requests
0
Actions
Projects
Security and quality
0
Insights
Additional navigation options
Code
Issues
Pull requests
Actions
Projects
Security and quality
Insights
Expand file tree
Breadcrumbs
JavaScript-Task-List
/
app.js
Copy path
More file actions
More file actions
Latest commit
History
History
History
161 lines (133 loc) · 4.37 KB
Breadcrumbs
JavaScript-Task-List
/
app.js
Copy path
File metadata and controls
161 lines (133 loc) · 4.37 KB
Raw
Copy raw file
Download raw file
Open symbols panel
Edit and raw actions
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
//Define the UI vars
const
form
=
document
.
querySelector
(
'#task-form'
)
;
const
taskList
=
document
.
querySelector
(
'.collection'
)
;
const
clearBtn
=
document
.
querySelector
(
'.clear-tasks'
)
;
const
filter
=
document
.
querySelector
(
'#filter'
)
;
const
taskInput
=
document
.
querySelector
(
'#task'
)
;
//Load all event listeners call
loadEventListeners
(
)
;
//Load all event listeners function
function
loadEventListeners
(
)
{
//DOM Load event
document
.
addEventListener
(
'DOMContentLoaded'
,
getTasks
)
;
//Add task event
form
.
addEventListener
(
'submit'
,
addTask
)
;
//Remove task event
taskList
.
addEventListener
(
'click'
,
removeTask
)
;
//Clear all tasks event
clearBtn
.
addEventListener
(
'click'
,
clearTasks
)
;
//Filter tasks event
filter
.
addEventListener
(
'keyup'
,
filterTasks
)
;
}
//Get Tasks from Local Storage
function
getTasks
(
)
{
let
tasks
;
if
(
localStorage
.
getItem
(
'tasks'
)
===
null
)
{
tasks
=
[
]
;
}
else
{
tasks
=
JSON
.
parse
(
localStorage
.
getItem
(
'tasks'
)
)
;
}
tasks
.
forEach
(
function
(
task
)
{
const
li
=
document
.
createElement
(
'li'
)
;
li
.
className
=
'collection-item'
;
li
.
appendChild
(
document
.
createTextNode
(
task
)
)
;
const
link
=
document
.
createElement
(
'a'
)
;
link
.
className
=
'delete-item secondary-content'
;
link
.
innerHTML
=
'<i class="fa fa-remove"></i>'
;
li
.
appendChild
(
link
)
;
taskList
.
appendChild
(
li
)
;
}
)
;
}
//Add task function
function
addTask
(
e
)
{
//Verify if there is a task to add
if
(
taskInput
.
value
===
''
)
{
alert
(
'Add a task'
)
;
}
//Create li element
const
li
=
document
.
createElement
(
'li'
)
;
//Add a class
li
.
className
=
'collection-item'
;
//Create text node and append to li
li
.
appendChild
(
document
.
createTextNode
(
taskInput
.
value
)
)
;
//Create new link element
const
link
=
document
.
createElement
(
'a'
)
;
//Add class to link element
link
.
className
=
'delete-item secondary-content'
;
//Add icon html
link
.
innerHTML
=
'<i class="fa fa-remove"></i>'
;
//Append the link to the li
li
.
appendChild
(
link
)
;
//Append the li to the ul
taskList
.
appendChild
(
li
)
;
//Store in the tasks in Local Storage
storeTaskInLocalStorage
(
taskInput
.
value
)
;
//Clear the input
taskInput
.
value
=
''
;
e
.
preventDefault
(
)
;
}
//Store tasks to local storage function
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
)
)
;
}
//Remove Task function
function
removeTask
(
e
)
{
//Check if the target to remove is the correct target
if
(
e
.
target
.
parentElement
.
classList
.
contains
(
'delete-item'
)
)
{
if
(
confirm
(
'Are you sure?'
)
)
{
//Select the targeted li by bubbling up twice out of the i element
e
.
target
.
parentElement
.
parentElement
.
remove
(
)
;
//Remove from local storage
removeTaskFromLocalStorage
(
e
.
target
.
parentElement
.
parentElement
)
;
}
}
}
//Remove from local storage function
function
removeTaskFromLocalStorage
(
taskItem
)
{
//Get Tasks from Local Storage
let
tasks
;
if
(
localStorage
.
getItem
(
'tasks'
)
===
null
)
{
tasks
=
[
]
;
}
else
{
tasks
=
JSON
.
parse
(
localStorage
.
getItem
(
'tasks'
)
)
;
}
tasks
.
forEach
(
function
(
task
,
index
)
{
if
(
taskItem
.
textContent
===
task
)
{
tasks
.
splice
(
index
,
1
)
;
}
}
)
;
localStorage
.
setItem
(
'tasks'
,
JSON
.
stringify
(
tasks
)
)
;
}
//Clear Tasks function
function
clearTasks
(
)
{
//Loop through and remove each child
while
(
taskList
.
firstChild
)
{
taskList
.
removeChild
(
taskList
.
firstChild
)
;
}
//Clear tasks from local storage
clearTasksFromLocalStorage
(
)
;
}
//Clear tasks from local storage function
function
clearTasksFromLocalStorage
(
)
{
localStorage
.
clear
(
)
;
}
//Filter tasks function
function
filterTasks
(
e
)
{
//Set the target to lowercase and grab the text from the input
const
text
=
e
.
target
.
value
.
toLowerCase
(
)
;
document
.
querySelectorAll
(
'.collection-item'
)
.
forEach
(
function
(
task
)
{
const
item
=
task
.
firstChild
.
textContent
;
if
(
item
.
toLowerCase
(
)
.
indexOf
(
text
)
!=
-
1
)
{
task
.
style
.
display
=
'block'
;
}
else
{
task
.
style
.
display
=
'none'
;
}
}
)
;
}
Back
|
FazBrowse Home
|
New Git URL