Skip to content

Commit c395b8f

Browse files
EdgarsBeEdgarsBe
committed
18 lesson
1 parent f610f14 commit c395b8f

1 file changed

Lines changed: 67 additions & 65 deletions

File tree

‎app.js‎

Lines changed: 67 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -1,79 +1,81 @@
1-
const list = document.querySelector('#book-list ul');
1+
document.addEventListener('DOMContentLoaded', function(){
2+
const list = document.querySelector('#book-list ul');
23

3-
//delete books
4-
list.addEventListener('click', function(e){
5-
if(e.target.className == 'delete'){
6-
const li = e.target.parentElement;
7-
list.removeChild(li)
8-
}
9-
});
10-
11-
//add book-list
12-
const addForm = document.forms['add-book'];
4+
//delete books
5+
list.addEventListener('click', function(e){
6+
if(e.target.className == 'delete'){
7+
const li = e.target.parentElement;
8+
list.removeChild(li)
9+
}
10+
});
1311

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

23-
//add content
24-
deleteBtn.textContent = 'delete';
25-
bookName.textContent = value;
15+
addForm.addEventListener('submit', function(e){
16+
e.preventDefault();
17+
const value = addForm.querySelector('input[type="text"]').value;
18+
19+
//creat element
20+
const li = document.createElement('li');
21+
const bookName = document.createElement('span');
22+
const deleteBtn = document.createElement('span');
2623

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

31-
//append to document
32-
li.appendChild(bookName);
33-
li.appendChild(deleteBtn);
34-
list.appendChild(li);
28+
// add classes
29+
bookName.classList.add('name');
30+
deleteBtn.classList.add('delete');
3531

32+
//append to document
33+
li.appendChild(bookName);
34+
li.appendChild(deleteBtn);
35+
list.appendChild(li);
3636

3737

38-
});
3938

40-
//hide books
41-
const hideBox = document.querySelector('#hide')
42-
hideBox.addEventListener('change', function(e){
43-
if(hideBox.checked){
44-
list.style.display = "none";
45-
}else{
46-
list.style.display = "initial";
47-
}
48-
});
39+
});
4940

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

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

0 commit comments

Comments
 (0)