1- const list = document . querySelector ( '#book-list ul' ) ;
2-
3- // delete books
4- list . addEventListener ( 'click' , ( e ) => {
5- if ( e . target . className == 'delete' ) {
6- const li = e . target . parentElement ;
7- li . parentNode . removeChild ( li ) ;
8- }
9- } ) ;
1+ //var titles = document.getElementsByClassName('title');
2+
3+ //console.log(Array.isArray(titles));
4+ //console.log(Array.isArray(Array.from(titles)));
5+
6+ //Array.from(titles).forEach(function(item){
7+ //console.log(item);
8+ //})
9+
10+
11+ //const wmf = document.querySelector('#book-list li:nth-child(2) .name');
12+ //console.log(wmf);
13+
14+ //var books = document.querySelectorAll('#book-list li .name');
15+ //console.log(books);
16+
17+ //books = document.querySelectorAll('#book-list li .name');
18+ //console.log(books);
19+
20+ //Array.from(books).forEach(function(book){
21+ //console.log(book)
22+ //book.textContent += '(book title)';
23+ //});
24+
25+ //const bookList = document.querySelector('#book-list');
26+ //bookList.innerHTML = '<h2>Books and more books...</h2>';
27+ //bookList.innerHTML += '<p>This is how you add HTML</p>';
28+ //const banner = document.querySelector('#page-banner');
29+ //console.log('#page-banner node type is:', banner.nodeType);
30+ //console.log('#page-banner node name is:', banner.nodeName);
31+ //console.log('#page-banner has child nodes:', banner.hasChildNodes());
32+
33+ //const clonedBanner =banner.cloneNode(true);
34+ //console.log(clonedBanner);
35+ //const bookList = document.querySelector('#book-list');
36+
37+ //console.log('the parent node is:', bookList.parentNode);
38+ //console.log('the parent element is:', bookList.parentElement.parentElement);
39+
40+ //console.log(bookList.childNodes);
41+
42+ //const bookList = document.querySelector('#book-list');
43+
44+ //console.log('book-list next sibling is:', bookList.nextSibling);
45+ //console.log('book-list next sibling element is:', bookList.nextElementSibling);
46+
47+
48+ //console.log('book-list previous sibling is:', bookList.previousSibling);
49+ //console.log('book-list previous sibling element is:', bookList.previousElementSibling);
50+
51+ //bookList.previousElementSibling.querySelector('p').innerHTML += '<br/>Too cool for everyone else!';
52+
53+ //var btns = document.querySelectorAll('#book-list .delete');
54+
55+ //Array.from(btns).forEach(function(btn){
56+ // btn.addEventListener('click', dunction(e){
57+ //
58+ // const li = e.target.parentElement;
59+
60+ // li.parentNode.removeChild(li)
61+ // });
62+ //}):
63+ //const link = document.querySelector('#page-banner a');
64+ //link.addEventListener('click', function(e){
65+ // e.preventDefault();
66+ // console.log('navigation to', e.target.textContent, 'was prevented');
67+ //})
68+
69+ //add book-list
70+
71+ //document.addEventListener('DOMContentLoaded', function(){addForm.addEventListener('submit', dunction(e){
72+ // e.preventDefault();
73+ // const value = addForm.querySelector('input[type="text"]').value;
74+ // console.log(value);
75+ //})
76+
77+ document . addEventListener ( 'DOMContentLoaded' , function ( ) {
78+
79+ const list = document . querySelector ( '#book-list ul' ) ;
80+ const forms = document . forms ;
81+
82+ // delete books
83+ list . addEventListener ( 'click' , ( e ) => {
84+ if ( e . target . className == 'delete' ) {
85+ const li = e . target . parentElement ;
86+ li . parentNode . removeChild ( li ) ;
87+ }
88+ } ) ;
89+
90+ // add books
91+ const addForm = forms [ 'add-book' ] ;
92+ addForm . addEventListener ( 'submit' , function ( e ) {
93+ e . preventDefault ( ) ;
94+
95+ // create elements
96+ const value = addForm . querySelector ( 'input[type="text"]' ) . value ;
97+ const li = document . createElement ( 'li' ) ;
98+ const bookName = document . createElement ( 'span' ) ;
99+ const deleteBtn = document . createElement ( 'span' ) ;
100+
101+ // add text content
102+ bookName . textContent = value ;
103+ deleteBtn . textContent = 'delete' ;
104+
105+ // add classes
106+ bookName . classList . add ( 'name' ) ;
107+ deleteBtn . classList . add ( 'delete' ) ;
108+
109+ // append to DOM
110+ li . appendChild ( bookName ) ;
111+ li . appendChild ( deleteBtn ) ;
112+ list . appendChild ( li ) ;
113+ } ) ;
114+
115+ // hide books
116+ const hideBox = document . querySelector ( '#hide' ) ;
117+ hideBox . addEventListener ( 'change' , function ( e ) {
118+ if ( hideBox . checked ) {
119+ list . style . display = "none" ;
120+ } else {
121+ list . style . display = "initial" ;
122+ }
123+ } ) ;
124+
125+ // filter books
126+ const searchBar = forms [ 'search-books' ] . querySelector ( 'input' ) ;
127+ searchBar . addEventListener ( 'keyup' , ( e ) => {
128+ const term = e . target . value . toLowerCase ( ) ;
129+ const books = list . getElementsByTagName ( 'li' ) ;
130+ Array . from ( books ) . forEach ( ( book ) => {
131+ const title = book . firstElementChild . textContent ;
132+ if ( title . toLowerCase ( ) . indexOf ( e . target . value ) != - 1 ) {
133+ book . style . display = 'block' ;
134+ } else {
135+ book . style . display = 'none' ;
136+ }
137+ } ) ;
138+ } ) ;
139+
140+ // tabbed content
141+ const tabs = document . querySelector ( '.tabs' ) ;
142+ const panels = document . querySelectorAll ( '.panel' ) ;
143+ tabs . addEventListener ( 'click' , ( e ) => {
144+ if ( e . target . tagName == 'LI' ) {
145+ const targetPanel = document . querySelector ( e . target . dataset . target ) ;
146+ Array . from ( panels ) . forEach ( ( panel ) => {
147+ if ( panel == targetPanel ) {
148+ panel . classList . add ( 'active' ) ;
149+ } else {
150+ panel . classList . remove ( 'active' ) ;
151+ }
152+ } ) ;
153+ }
154+ } ) ;
155+
156+ } )
0 commit comments