forked from iamshaunjp/JavaScript-DOM-Tutorial
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathapp.js
More file actions
91 lines (73 loc) · 2.38 KB
/
app.js
File metadata and controls
91 lines (73 loc) · 2.38 KB
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
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);
addForm.querySelector('input[type="text"]').value = '';
});
// 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 = document.forms['search-books'].querySelector('input');
searchBar.addEventListener('keyup', function(e){
// console.log(e);
// console.log(typeof e.target.value);
const term = e.target.value.toLowerCase();
const books = list.getElementsByTagName('li');
Array.from(books).forEach((book) => {
// console.log(typeof book.innerHTML);
const title = book.firstElementChild.textContent;
if(title.toLowerCase().includes(term)){
book.style.display = 'list-item';
}else{
book.style.display = 'none';
}
});
});
// const searchForm = document.forms['search-books'];
// searchForm.addEventListener('submit', function(e){
// e.preventDefault();
// // console.log(e);
// // console.log(e.target.querySelector('input').innerHTML);
// const term = e.target.querySelector('input').value.toLowerCase();
// const names = list.querySelectorAll('.name');
// names.forEach((name) => {
// // console.log(typeof name.innerHTML);
// let bookName = name.innerHTML.toLowerCase();
// if(bookName.search(term) >= 0){
// name.parentNode.removeAttribute('hidden');
// }else{
// name.parentNode.setAttribute('hidden', 'hidden');
// }
// });
// });