FazBrowse GitHub Viewer
|
Trending
|
URL:
|
Home
Tools:
[Download Repo ZIP]
[View Raw Code]
[Original HTTPS Page]
JavaScript-DOM-Tutorial/app.js at lesson-17 · Nur1995/JavaScript-DOM-Tutorial · GitHub
Nur1995
JavaScript-DOM-Tutorial
Repository navigation
Code
Pull requests
Actions
Projects
Security and quality
Insights
Expand file tree
Breadcrumbs
JavaScript-DOM-Tutorial
/
app.js
Copy path
More file actions
More file actions
Latest commit
History
History
History
76 lines (67 loc) · 2 KB
Breadcrumbs
JavaScript-DOM-Tutorial
/
app.js
Copy path
File metadata and controls
76 lines (67 loc) · 2 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
const
list
=
document
.
querySelector
(
'#book-list ul'
)
;
const
forms
=
document
.
forms
;
// delete books
list
.
addEventListener
(
'click'
,
(
e
)
=>
{
if
(
e
.
target
.
className
==
'delete'
)
{
const
li
=
e
.
target
.
parentElement
;
li
.
parentNode
.
removeChild
(
li
)
;
}
}
)
;
// add books
const
addForm
=
forms
[
'add-book'
]
;
addForm
.
addEventListener
(
'submit'
,
function
(
e
)
{
e
.
preventDefault
(
)
;
// create elements
const
value
=
addForm
.
querySelector
(
'input[type="text"]'
)
.
value
;
const
li
=
document
.
createElement
(
'li'
)
;
const
bookName
=
document
.
createElement
(
'span'
)
;
const
deleteBtn
=
document
.
createElement
(
'span'
)
;
// add text content
bookName
.
textContent
=
value
;
deleteBtn
.
textContent
=
'delete'
;
// add classes
bookName
.
classList
.
add
(
'name'
)
;
deleteBtn
.
classList
.
add
(
'delete'
)
;
// append to DOM
li
.
appendChild
(
bookName
)
;
li
.
appendChild
(
deleteBtn
)
;
list
.
appendChild
(
li
)
;
}
)
;
// hide books
const
hideBox
=
document
.
querySelector
(
'#hide'
)
;
hideBox
.
addEventListener
(
'change'
,
function
(
e
)
{
if
(
hideBox
.
checked
)
{
list
.
style
.
display
=
"none"
;
}
else
{
list
.
style
.
display
=
"initial"
;
}
}
)
;
// filter books
const
searchBar
=
forms
[
'search-books'
]
.
querySelector
(
'input'
)
;
searchBar
.
addEventListener
(
'keyup'
,
(
e
)
=>
{
const
term
=
e
.
target
.
value
.
toLowerCase
(
)
;
const
books
=
list
.
getElementsByTagName
(
'li'
)
;
Array
.
from
(
books
)
.
forEach
(
(
book
)
=>
{
const
title
=
book
.
firstElementChild
.
textContent
;
if
(
title
.
toLowerCase
(
)
.
indexOf
(
e
.
target
.
value
)
!=
-
1
)
{
book
.
style
.
display
=
'block'
;
}
else
{
book
.
style
.
display
=
'none'
;
}
}
)
;
}
)
;
// tabbed content
const
tabs
=
document
.
querySelector
(
'.tabs'
)
;
const
panels
=
document
.
querySelectorAll
(
'.panel'
)
;
tabs
.
addEventListener
(
'click'
,
(
e
)
=>
{
if
(
e
.
target
.
tagName
==
'LI'
)
{
const
targetPanel
=
document
.
querySelector
(
e
.
target
.
dataset
.
target
)
;
Array
.
from
(
panels
)
.
forEach
(
(
panel
)
=>
{
if
(
panel
==
targetPanel
)
{
panel
.
classList
.
add
(
'active'
)
;
}
else
{
panel
.
classList
.
remove
(
'active'
)
;
}
}
)
;
}
}
)
;
Back
|
FazBrowse Home
|
New Git URL