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
60 lines (51 loc) · 1.58 KB
/
app.js
File metadata and controls
60 lines (51 loc) · 1.58 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
const list = document.querySelector('#book-list ul');
// delete books
list.addEventListener('click',function(e){
if(e.target.className == 'delete'){
const li =e.target.parentElement;
list.removeChild(li);
}
});
//add book-list
const addForm = document.forms['add-book'];
addForm.addEventListener('submit',function(e){
e.preventDefault();
const value = addForm.querySelector('input[type="text"]').value;
console.log(value);
})
// create elements
const li = document.createElement('li');
const bookName = document.createElement('span');
const deleteBtn = document.createElement('span');
// add content
deleteBtn.textContent = 'delete';
bookName.textContent = value;
//add classes
bookName.classList.add('name');
deleteBtn.classList.add('delete');
// append to document
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 = "inital";
}
});
// filter books
const searchBar = document.forms['search-books'].querySelector('input');
searchBar.addEventListener('keyup',function(e){
const term = e.target.value.toLowerCase();
const books = list.getElementsByTagName('li');
Array.from(books).forEach(function(book){
const title = book.firstElementChild.textContent;
if(title.toLowerCase().indexOf(term)!= -1){
book.style.display = 'block';
}else{
book.style.display = 'none';
}
})