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
85 lines (73 loc) · 2.65 KB
/
app.js
File metadata and controls
85 lines (73 loc) · 2.65 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
document.addEventListener('DOMContentLoaded', function () {
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 books
const addForm = document.forms['add-book'];
addForm.addEventListener('submit', function (e) {
e.preventDefault();
var value = addForm.querySelector('input[type="text"]').value;
//create elements
const li = document.createElement('li');
const bookName = document.createElement('Span');
const deleteBtn = document.createElement('span');
//add content
if (value == "") {
alert('Please Enter a book title');
} else {
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);
}
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 = 'block';
}
})
//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';
}
})
})
// tabbed content
const tabs = document.querySelector('.tabs');
const panels = document.querySelectorAll('.panel');
tabs.addEventListener('click', function (e) {
if (e.target.tagName == "LI") {
const targetPanel = document.querySelector(e.target.dataset.track);
panels.forEach(function (panel) {
if (panel == targetPanel) {
panel.classList.add('active');
} else {
panel.classList.remove('active');
}
})
}
})
})