FazBrowse GitHub Viewer | Trending |
URL:
| Home
Tools: [Download Repo ZIP]   [Original HTTPS Page]

lesson 18 code · DevNexS/JavaScript-DOM-Tutorial@6f26ff0 · GitHub

  1. DevNexS
  2. JavaScript-DOM-Tutorial

Repository navigation

Commit 6f26ff0

Browse files
iamshaunjp
committed
lesson 18 code
1 parent e922591 commit 6f26ff0

2 files changed

Lines changed: 67 additions & 63 deletions

File tree

‎app.js‎

Lines changed: 66 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -1,76 +1,80 @@
1-
const list = document.querySelector('#book-list ul');
2-
const forms = document.forms;
1+
document.addEventListener('DOMContentLoaded', function(){
32

4-
// delete books
5-
list.addEventListener('click', (e) => {
6-
if(e.target.className == 'delete'){
7-
const li = e.target.parentElement;
8-
li.parentNode.removeChild(li);
9-
}
10-
});
3+
const list = document.querySelector('#book-list ul');
4+
const forms = document.forms;
115

12-
// add books
13-
const addForm = forms['add-book'];
14-
addForm.addEventListener('submit', function(e){
15-
e.preventDefault();
6+
// delete books
7+
list.addEventListener('click', (e) => {
8+
if(e.target.className == 'delete'){
9+
const li = e.target.parentElement;
10+
li.parentNode.removeChild(li);
11+
}
12+
});
1613

17-
// create elements
18-
const value = addForm.querySelector('input[type="text"]').value;
19-
const li = document.createElement('li');
20-
const bookName = document.createElement('span');
21-
const deleteBtn = document.createElement('span');
14+
// add books
15+
const addForm = forms['add-book'];
16+
addForm.addEventListener('submit', function(e){
17+
e.preventDefault();
2218

23-
// add text content
24-
bookName.textContent = value;
25-
deleteBtn.textContent = 'delete';
19+
// create elements
20+
const value = addForm.querySelector('input[type="text"]').value;
21+
const li = document.createElement('li');
22+
const bookName = document.createElement('span');
23+
const deleteBtn = document.createElement('span');
2624

27-
// add classes
28-
bookName.classList.add('name');
29-
deleteBtn.classList.add('delete');
25+
// add text content
26+
bookName.textContent = value;
27+
deleteBtn.textContent = 'delete';
3028

31-
// append to DOM
32-
li.appendChild(bookName);
33-
li.appendChild(deleteBtn);
34-
list.appendChild(li);
35-
});
29+
// add classes
30+
bookName.classList.add('name');
31+
deleteBtn.classList.add('delete');
3632

37-
// hide books
38-
const hideBox = document.querySelector('#hide');
39-
hideBox.addEventListener('change', function(e){
40-
if(hideBox.checked){
41-
list.style.display = "none";
42-
} else {
43-
list.style.display = "initial";
44-
}
45-
});
33+
// append to DOM
34+
li.appendChild(bookName);
35+
li.appendChild(deleteBtn);
36+
list.appendChild(li);
37+
});
4638

47-
// filter books
48-
const searchBar = forms['search-books'].querySelector('input');
49-
searchBar.addEventListener('keyup', (e) => {
50-
const term = e.target.value.toLowerCase();
51-
const books = list.getElementsByTagName('li');
52-
Array.from(books).forEach((book) => {
53-
const title = book.firstElementChild.textContent;
54-
if(title.toLowerCase().indexOf(e.target.value) != -1){
55-
book.style.display = 'block';
39+
// hide books
40+
const hideBox = document.querySelector('#hide');
41+
hideBox.addEventListener('change', function(e){
42+
if(hideBox.checked){
43+
list.style.display = "none";
5644
} else {
57-
book.style.display = 'none';
45+
list.style.display = "initial";
5846
}
5947
});
60-
});
6148

62-
// tabbed content
63-
const tabs = document.querySelector('.tabs');
64-
const panels = document.querySelectorAll('.panel');
65-
tabs.addEventListener('click', (e) => {
66-
if(e.target.tagName == 'LI'){
67-
const targetPanel = document.querySelector(e.target.dataset.target);
68-
Array.from(panels).forEach((panel) => {
69-
if(panel == targetPanel){
70-
panel.classList.add('active');
71-
}else{
72-
panel.classList.remove('active');
49+
// filter books
50+
const searchBar = forms['search-books'].querySelector('input');
51+
searchBar.addEventListener('keyup', (e) => {
52+
const term = e.target.value.toLowerCase();
53+
const books = list.getElementsByTagName('li');
54+
Array.from(books).forEach((book) => {
55+
const title = book.firstElementChild.textContent;
56+
if(title.toLowerCase().indexOf(e.target.value) != -1){
57+
book.style.display = 'block';
58+
} else {
59+
book.style.display = 'none';
7360
}
7461
});
75-
}
76-
});
62+
});
63+
64+
// tabbed content
65+
const tabs = document.querySelector('.tabs');
66+
const panels = document.querySelectorAll('.panel');
67+
tabs.addEventListener('click', (e) => {
68+
if(e.target.tagName == 'LI'){
69+
const targetPanel = document.querySelector(e.target.dataset.target);
70+
Array.from(panels).forEach((panel) => {
71+
if(panel == targetPanel){
72+
panel.classList.add('active');
73+
}else{
74+
panel.classList.remove('active');
75+
}
76+
});
77+
}
78+
});
79+
80+
})

‎index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
<head>
44
<meta charset="utf-8">
55
<link href="styles.css" rel="stylesheet" />
6+
<script src="app.js"></script>
67
<title>JavaScript DOM Tutorials</title>
78
</head>
89
<body>
@@ -58,6 +59,5 @@ <h2 class="title">Books to Read</h2>
5859
</div>
5960
</div>
6061
</div>
61-
<script src="app.js"></script>
6262
</body>
6363
</html>

0 commit comments

Comments
 (0)
Back | FazBrowse Home | New Git URL