From 2c5fb265b51a85e0d01b3f6456df89b0ce0a7231 Mon Sep 17 00:00:00 2001 From: Shaun Pelling Date: Thu, 10 Aug 2017 15:40:51 +0100 Subject: [PATCH 01/23] lesson 1 code --- index.html | 48 +++++++++++++++++++ styles.css | 138 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 186 insertions(+) create mode 100644 index.html create mode 100644 styles.css diff --git a/index.html b/index.html new file mode 100644 index 0000000..cbc1f11 --- /dev/null +++ b/index.html @@ -0,0 +1,48 @@ + + + + + + JavaScript DOM Tutorials + + +
+
+
+

Bookorama

+

Books for Ninjas

+
+ +
+
+
+
+

Books to Read

+
    +
  • + Name of the Wind + delete +
    • +
  • + The Wise Man's Fear + delete +
    • +
  • + Kafka on the Shore + delete +
    • +
  • + The Master and the Margarita + delete +
    • +
+
+
+ + +
+ +
+ + + diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..361284d --- /dev/null +++ b/styles.css @@ -0,0 +1,138 @@ +body{ + font-family: Tahoma; + color: #444; + letter-spacing: 1px; +} + +h1, h2{ + font-weight: normal; +} + +#wrapper{ + width: 90%; + max-width: 960px; + margin: 20px auto; + border-radius: 6px; + box-shadow: 0px 1px 6px rgba(0,0,0,0.2); + box-sizing: border-box; + padding: 0 0 20px; + overflow: hidden; + border: 1px solid lightgray; +} + +#page-banner{ + background: #eee ; + padding: 10px 0; + +} + +#page-banner h1, #page-banner p{ + width: 100%; + text-align: center; + margin: 10px 0; +} + +#page-banner input{ + width: 90%; + max-width: 300px; + margin: 20px auto; + display: block; + padding: 8px; + border: 1px solid #ddd; + border-radius: 4px; + font-size: 16px; + color: #444; +} + +#book-list, #add-book, #tabbed-content{ + margin: 30px; +} + +#book-list ul, #tabbed-content ul{ + list-style-type: none; + padding: 0; +} + +#book-list li{ + padding: 20px; + border-left: 5px solid #ddd; + margin: 20px 10px; +} + +#book-list li:hover{ + border-color: #9361bf; +} + +.delete{ + float: right; + background: #9361bf; + padding: 6px; + border-radius: 4px; + cursor: pointer; + color: white; +} + +.delete:hover{ + background: #333; +} + +#add-book{ + width: 400px; + margin: 0 auto; +} + +#add-book input{ + display: block; + margin: 20px 0; + padding: 10px; + border: 1px solid #ccc; + font-size: 16px; + border-radius: 4px 0 0 4px; + box-sizing: border-box; + width: 300px; + float: left; +} + +#add-book button{ + border: 1px solid #9361bf; + background: #9361bf; + padding: 10px 20px; + font-size: 16px; + display: inline-block; + margin: 0; + border-radius: 0 4px 4px 0; + cursor: pointer; + width: 100px; + float: left; + margin: 20px 0; + border-left: 0; + color: white; +} + +#add-book:after{ + content: ''; + display: block; + clear: both; +} + +/* +#tabbed-content li{ + display: inline-block; + padding: 10px 14px; + background: #ddd; + border-radius: 4px; + cursor: pointer; + margin-right: 10px; +} + +#tabbed-content .tab{ + display: none; + border: 1px solid #ddd; + padding: 0 10px; + border-radius: 4px; +} + +#tabbed-content .tab.active{ + display: block; +} +*/ From 895e075ada8301da982261399002dc1916eddadf Mon Sep 17 00:00:00 2001 From: Shaun Pelling Date: Thu, 10 Aug 2017 15:44:08 +0100 Subject: [PATCH 02/23] lesson 2 code --- app.js | 4 ++++ 1 file changed, 4 insertions(+) create mode 100644 app.js diff --git a/app.js b/app.js new file mode 100644 index 0000000..6442464 --- /dev/null +++ b/app.js @@ -0,0 +1,4 @@ +const search = document.getElementById('search-books'); +const bookList = document.getElementById('book-list'); + +console.log(search, bookList); From b64fbb7a390a4cd9496669c552ff54e4bb794ea1 Mon Sep 17 00:00:00 2001 From: ZaDivan Date: Tue, 9 Mar 2021 14:53:53 +0200 Subject: [PATCH 03/23] lession 3 --- app.js | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/app.js b/app.js index 6442464..ff381a6 100644 --- a/app.js +++ b/app.js @@ -1,4 +1,8 @@ -const search = document.getElementById('search-books'); -const bookList = document.getElementById('book-list'); +var titles = document.getElementsByClassName('title') -console.log(search, bookList); +//console.log(Array.isArray(titles)); +//console.log(Array.isArray(Array.from(titles))); + +titles.forEach(function(item){ + console.log(item); +}) \ No newline at end of file From 0c12a588f4442c7e728512961d5805248827e0c8 Mon Sep 17 00:00:00 2001 From: ZaDivan Date: Tue, 9 Mar 2021 16:15:14 +0200 Subject: [PATCH 04/23] lesson 4 --- app.js | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/app.js b/app.js index ff381a6..dd05a48 100644 --- a/app.js +++ b/app.js @@ -1,8 +1,9 @@ -var titles = document.getElementsByClassName('title') +const wrap = document.querySelector('#book-list li:nth-child(2) .name'); +//console.log(wmf); -//console.log(Array.isArray(titles)); -//console.log(Array.isArray(Array.from(titles))); +var books = document.querySelector('#book-list li .name'); +// console.log(books); -titles.forEach(function(item){ - console.log(item); +Array.from(books).forEach(function(book){ + console.log(book); }) \ No newline at end of file From 269bba50d74a6039efd55105442923797795dc95 Mon Sep 17 00:00:00 2001 From: ZaDivan Date: Tue, 9 Mar 2021 16:16:10 +0200 Subject: [PATCH 05/23] lesson 5 --- app.js | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/app.js b/app.js index dd05a48..87f946f 100644 --- a/app.js +++ b/app.js @@ -1,9 +1,9 @@ -const wrap = document.querySelector('#book-list li:nth-child(2) .name'); -//console.log(wmf); - -var books = document.querySelector('#book-list li .name'); -// console.log(books); +const books = document.querySelectorAll('#book-list li .name'); Array.from(books).forEach(function(book){ - console.log(book); -}) \ No newline at end of file + book.textContent += ' (Book title)'; +}); + +const bookList = document.querySelector('#book-list'); +bookList.innerHTML = '

Books and more books...

'; +bookList.innerHTML += '

This is how you add HTML content

'; \ No newline at end of file From 09f08a459dffe580668a7d638c910e27e98a0b97 Mon Sep 17 00:00:00 2001 From: ZaDivan Date: Tue, 9 Mar 2021 16:16:50 +0200 Subject: [PATCH 06/23] lesson 4 --- app.js | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/app.js b/app.js index 87f946f..75e0f68 100644 --- a/app.js +++ b/app.js @@ -1,9 +1,12 @@ -const books = document.querySelectorAll('#book-list li .name'); +const wmf = document.querySelector('#book-list li:nth-child(2) .name'); +// console.log(wmf); + +var books = document.querySelector('#book-list li .name'); +// console.log(books); + +books = document.querySelectorAll('#book-list li .name'); +//console.log(books); Array.from(books).forEach(function(book){ - book.textContent += ' (Book title)'; + console.log(book); }); - -const bookList = document.querySelector('#book-list'); -bookList.innerHTML = '

Books and more books...

'; -bookList.innerHTML += '

This is how you add HTML content

'; \ No newline at end of file From 62fb06b80f3917d6964dc90efb0f9c30e99e6597 Mon Sep 17 00:00:00 2001 From: ZaDivan Date: Tue, 9 Mar 2021 16:19:39 +0200 Subject: [PATCH 07/23] lesson 6 --- app.js | 16 ++++++---------- 1 file changed, 6 insertions(+), 10 deletions(-) diff --git a/app.js b/app.js index 75e0f68..1e70007 100644 --- a/app.js +++ b/app.js @@ -1,12 +1,8 @@ -const wmf = document.querySelector('#book-list li:nth-child(2) .name'); -// console.log(wmf); +const banner = document.querySelector('#page-banner'); -var books = document.querySelector('#book-list li .name'); -// console.log(books); +console.log('#page-banner node type is:', banner.nodeType); +console.log('#page-banner node name is:', banner.nodeName); +console.log('#page-banner has child nodes:', banner.hasChildNodes()); -books = document.querySelectorAll('#book-list li .name'); -//console.log(books); - -Array.from(books).forEach(function(book){ - console.log(book); -}); +const clonedBanner = banner.cloneNode(true); +console.log(clonedBanner); From 47fc0646e785f345bf3c164166cb063048c4dabd Mon Sep 17 00:00:00 2001 From: ZaDivan Date: Tue, 9 Mar 2021 16:20:20 +0200 Subject: [PATCH 08/23] lesson 7 --- app.js | 25 +++++++++++++++++++------ 1 file changed, 19 insertions(+), 6 deletions(-) diff --git a/app.js b/app.js index 1e70007..45c78aa 100644 --- a/app.js +++ b/app.js @@ -1,8 +1,21 @@ -const banner = document.querySelector('#page-banner'); +const bookList = document.querySelector('#book-list'); -console.log('#page-banner node type is:', banner.nodeType); -console.log('#page-banner node name is:', banner.nodeName); -console.log('#page-banner has child nodes:', banner.hasChildNodes()); +console.log('book list parent element:', bookList.parentElement); +console.log('book list parent node:', bookList.parentNode); -const clonedBanner = banner.cloneNode(true); -console.log(clonedBanner); +console.log('all node children:'); +Array.from(bookList.childNodes).forEach(function(node){ + console.log(node); +}); + +console.log('all element children:'); +Array.from(bookList.children).forEach(function(node){ + console.log(node); +}); + +const titles = bookList.querySelectorAll('.name'); + +console.log('Book titles:'); +Array.from(titles).forEach(function(title){ + console.log(title.textContent); +}); From 97e07d0190fdb1e10f9f44d82845ad2b7c8dbba1 Mon Sep 17 00:00:00 2001 From: ZaDivan Date: Tue, 9 Mar 2021 16:23:04 +0200 Subject: [PATCH 09/23] lesson 9 --- app.js | 28 ++++++++++++++-------------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/app.js b/app.js index 45c78aa..9d0e671 100644 --- a/app.js +++ b/app.js @@ -1,21 +1,21 @@ -const bookList = document.querySelector('#book-list'); +const listItems = document.querySelectorAll('#book-list ul li'); -console.log('book list parent element:', bookList.parentElement); -console.log('book list parent node:', bookList.parentNode); +Array.from(listItems).forEach(function(item){ + item.addEventListener('click', (e) => { -console.log('all node children:'); -Array.from(bookList.childNodes).forEach(function(node){ - console.log(node); -}); + const li = e.target.parentElement; + console.log('child element to remove:', li); + console.log('parent element to remove child from:', li.parentElement); + li.parentNode.removeChild(li); -console.log('all element children:'); -Array.from(bookList.children).forEach(function(node){ - console.log(node); + }); }); -const titles = bookList.querySelectorAll('.name'); +// prevent default behaviour + +const link = document.querySelector('#page-banner a'); -console.log('Book titles:'); -Array.from(titles).forEach(function(title){ - console.log(title.textContent); +link.addEventListener('click', function(e){ + e.preventDefault(); + console.log('Navigation to', e.target.textContent, 'was prevented'); }); From 7be312baa5aefe9b53cd596d47440f28f2547966 Mon Sep 17 00:00:00 2001 From: ZaDivan Date: Tue, 9 Mar 2021 16:23:55 +0200 Subject: [PATCH 10/23] lesson 10 --- app.js | 22 +++++----------------- 1 file changed, 5 insertions(+), 17 deletions(-) diff --git a/app.js b/app.js index 9d0e671..bf20729 100644 --- a/app.js +++ b/app.js @@ -1,21 +1,9 @@ -const listItems = document.querySelectorAll('#book-list ul li'); - -Array.from(listItems).forEach(function(item){ - item.addEventListener('click', (e) => { +const list = document.querySelector('#book-list ul'); +// delete books +list.addEventListener('click', (e) => { + if(e.target.className == 'delete'){ const li = e.target.parentElement; - console.log('child element to remove:', li); - console.log('parent element to remove child from:', li.parentElement); li.parentNode.removeChild(li); - - }); -}); - -// prevent default behaviour - -const link = document.querySelector('#page-banner a'); - -link.addEventListener('click', function(e){ - e.preventDefault(); - console.log('Navigation to', e.target.textContent, 'was prevented'); + } }); From 75ceb2c4b8132e25290e02879c255c2f96aad53a Mon Sep 17 00:00:00 2001 From: ZaDivan Date: Tue, 9 Mar 2021 16:27:01 +0200 Subject: [PATCH 11/23] lesson 11 --- app.js | 19 ++++++++++++------- 1 file changed, 12 insertions(+), 7 deletions(-) diff --git a/app.js b/app.js index bf20729..88af564 100644 --- a/app.js +++ b/app.js @@ -1,9 +1,14 @@ -const list = document.querySelector('#book-list ul'); +const forms = document.forms; +console.log(forms); +console.log(forms['add-book']); -// delete books -list.addEventListener('click', (e) => { - if(e.target.className == 'delete'){ - const li = e.target.parentElement; - li.parentNode.removeChild(li); - } +Array.from(forms).forEach(function(form){ + console.log(form); +}); + +const addForm = forms['add-book']; +addForm.addEventListener('submit', function(e){ + e.preventDefault(); + const value = addForm.querySelector('input[type="text"]').value; + console.log(value); }); From 4d5ab12e148e0af8df781ef201833a07d7f6ad4d Mon Sep 17 00:00:00 2001 From: ZaDivan Date: Tue, 9 Mar 2021 16:28:01 +0200 Subject: [PATCH 12/23] lesson 12 --- app.js | 28 +++++++++++++++++++++++----- 1 file changed, 23 insertions(+), 5 deletions(-) diff --git a/app.js b/app.js index 88af564..ec0a2c2 100644 --- a/app.js +++ b/app.js @@ -1,14 +1,32 @@ +const list = document.querySelector('#book-list ul'); const forms = document.forms; -console.log(forms); -console.log(forms['add-book']); -Array.from(forms).forEach(function(form){ - console.log(form); +// 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; - console.log(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'; + + // append to DOM + li.appendChild(bookName); + li.appendChild(deleteBtn); + list.appendChild(li); + //list.insertBefore(li, list.querySelector('li:first-child')); }); From e20e7875f50c3a6671e646634791c16572f9ef24 Mon Sep 17 00:00:00 2001 From: ZaDivan <78017590+ZaDivan@users.noreply.github.com> Date: Tue, 9 Mar 2021 17:01:50 +0200 Subject: [PATCH 13/23] Add files via upload --- app4.js | 12 ++++++++++++ 1 file changed, 12 insertions(+) create mode 100644 app4.js diff --git a/app4.js b/app4.js new file mode 100644 index 0000000..61e088d --- /dev/null +++ b/app4.js @@ -0,0 +1,12 @@ +const wmf = document.querySelector('#book-list li:nth-child(2) .name'); +// console.log(wmf); + +var books = document.querySelector('#book-list li .name'); +// console.log(books); + +books = document.querySelectorAll('#book-list li .name'); +//console.log(books); + +Array.from(books).forEach(function(book){ + console.log(book); +}); From 711bbde1200e7f3a96c5ef6058dd20dbf223f763 Mon Sep 17 00:00:00 2001 From: ZaDivan <78017590+ZaDivan@users.noreply.github.com> Date: Tue, 9 Mar 2021 17:04:22 +0200 Subject: [PATCH 14/23] Add files via upload --- app 7.js | 21 +++++++++++++++++++++ app5.js | 9 +++++++++ app6.js | 8 ++++++++ app8.js | 8 ++++++++ 4 files changed, 46 insertions(+) create mode 100644 app 7.js create mode 100644 app5.js create mode 100644 app6.js create mode 100644 app8.js diff --git a/app 7.js b/app 7.js new file mode 100644 index 0000000..4e0734d --- /dev/null +++ b/app 7.js @@ -0,0 +1,21 @@ +const bookList = document.querySelector('#book-list'); + +console.log('book list parent element:', bookList.parentElement); +console.log('book list parent node:', bookList.parentNode); + +console.log('all node children:'); +Array.from(bookList.childNodes).forEach(function(node){ + console.log(node); +}); + +console.log('all element children:'); +Array.from(bookList.children).forEach(function(node){ + console.log(node); +}); + +const titles = bookList.querySelectorAll('.name'); + +console.log('Book titles:'); +Array.from(titles).forEach(function(title){ + console.log(title.textContent); +}); diff --git a/app5.js b/app5.js new file mode 100644 index 0000000..2c63edc --- /dev/null +++ b/app5.js @@ -0,0 +1,9 @@ +const books = document.querySelectorAll('#book-list li .name'); + +Array.from(books).forEach(function(book){ + book.textContent += ' (Book title)'; +}); + +const bookList = document.querySelector('#book-list'); +bookList.innerHTML = '

Books and more books...

'; +bookList.innerHTML += '

This is how you add HTML content

'; diff --git a/app6.js b/app6.js new file mode 100644 index 0000000..36df12d --- /dev/null +++ b/app6.js @@ -0,0 +1,8 @@ +const banner = document.querySelector('#page-banner'); + +console.log('#page-banner node type is:', banner.nodeType); +console.log('#page-banner node name is:', banner.nodeName); +console.log('#page-banner has child nodes:', banner.hasChildNodes()); + +const clonedBanner = banner.cloneNode(true); +console.log(clonedBanner); diff --git a/app8.js b/app8.js new file mode 100644 index 0000000..c3f5be8 --- /dev/null +++ b/app8.js @@ -0,0 +1,8 @@ +const bookList = document.querySelector('#book-list'); + +console.log('#book-list next sibling:', bookList.nextSibling); +console.log('#book-list next element sibling:', bookList.nextElementSibling); +console.log('#book-list previous sibling:', bookList.previousSibling); +console.log('#book-list previous element sibling:', bookList.previousElementSibling); + +bookList.previousElementSibling.querySelector('p').innerHTML += '
Too cool for everyone else!'; From 69372fd48472ac1725f56ae3b1c70241e619b25f Mon Sep 17 00:00:00 2001 From: ZaDivan <78017590+ZaDivan@users.noreply.github.com> Date: Tue, 9 Mar 2021 17:06:17 +0200 Subject: [PATCH 15/23] Add files via upload --- app10.js | 9 +++++++++ app11.js | 24 ++++++++++++++++++++++++ app9.js | 21 +++++++++++++++++++++ 3 files changed, 54 insertions(+) create mode 100644 app10.js create mode 100644 app11.js create mode 100644 app9.js diff --git a/app10.js b/app10.js new file mode 100644 index 0000000..afc13ba --- /dev/null +++ b/app10.js @@ -0,0 +1,9 @@ +const list = document.querySelector('#book-list ul'); + +// delete books +list.addEventListener('click', (e) => { + if(e.target.className == 'delete'){ + const li = e.target.parentElement; + li.parentNode.removeChild(li); + } +}); diff --git a/app11.js b/app11.js new file mode 100644 index 0000000..f8de873 --- /dev/null +++ b/app11.js @@ -0,0 +1,24 @@ +const list = document.querySelector('#book-list ul'); + +// delete books +list.addEventListener('click', (e) => { + if(e.target.className == 'delete'){ + const li = e.target.parentElement; + li.parentNode.removeChild(li); + } +}); + +const forms = document.forms; +console.log(forms); +console.log(forms['add-book']); + +Array.from(forms).forEach(function(form){ + console.log(form); +}); + +const addForm = forms['add-book']; +addForm.addEventListener('submit', function(e){ + e.preventDefault(); + const value = addForm.querySelector('input[type="text"]').value; + console.log(value); +}); diff --git a/app9.js b/app9.js new file mode 100644 index 0000000..d276dfb --- /dev/null +++ b/app9.js @@ -0,0 +1,21 @@ +const listItems = document.querySelectorAll('#book-list ul li'); + +Array.from(listItems).forEach(function(item){ + item.addEventListener('click', (e) => { + + const li = e.target.parentElement; + console.log('child element to remove:', li); + console.log('parent element to remove child from:', li.parentElement); + li.parentNode.removeChild(li); + + }); +}); + +// prevent default behaviour + +const link = document.querySelector('#page-banner a'); + +link.addEventListener('click', function(e){ + e.preventDefault(); + console.log('Navigation to', e.target.textContent, 'was prevented'); +}); From fbbd461e9d8dee27942612067265d9ca4dca5334 Mon Sep 17 00:00:00 2001 From: ZaDivan <78017590+ZaDivan@users.noreply.github.com> Date: Tue, 16 Mar 2021 14:03:11 +0200 Subject: [PATCH 16/23] Delete app10.js --- app10.js | 9 --------- 1 file changed, 9 deletions(-) delete mode 100644 app10.js diff --git a/app10.js b/app10.js deleted file mode 100644 index afc13ba..0000000 --- a/app10.js +++ /dev/null @@ -1,9 +0,0 @@ -const list = document.querySelector('#book-list ul'); - -// delete books -list.addEventListener('click', (e) => { - if(e.target.className == 'delete'){ - const li = e.target.parentElement; - li.parentNode.removeChild(li); - } -}); From a1dc674908f0051901d35a10fc5962bd543aaee3 Mon Sep 17 00:00:00 2001 From: ZaDivan <78017590+ZaDivan@users.noreply.github.com> Date: Tue, 16 Mar 2021 14:03:40 +0200 Subject: [PATCH 17/23] Delete app 7.js --- app 7.js | 21 --------------------- 1 file changed, 21 deletions(-) delete mode 100644 app 7.js diff --git a/app 7.js b/app 7.js deleted file mode 100644 index 4e0734d..0000000 --- a/app 7.js +++ /dev/null @@ -1,21 +0,0 @@ -const bookList = document.querySelector('#book-list'); - -console.log('book list parent element:', bookList.parentElement); -console.log('book list parent node:', bookList.parentNode); - -console.log('all node children:'); -Array.from(bookList.childNodes).forEach(function(node){ - console.log(node); -}); - -console.log('all element children:'); -Array.from(bookList.children).forEach(function(node){ - console.log(node); -}); - -const titles = bookList.querySelectorAll('.name'); - -console.log('Book titles:'); -Array.from(titles).forEach(function(title){ - console.log(title.textContent); -}); From 0a4827d822687402a37913b54485a89502e066f0 Mon Sep 17 00:00:00 2001 From: ZaDivan <78017590+ZaDivan@users.noreply.github.com> Date: Tue, 16 Mar 2021 14:03:49 +0200 Subject: [PATCH 18/23] Delete app11.js --- app11.js | 24 ------------------------ 1 file changed, 24 deletions(-) delete mode 100644 app11.js diff --git a/app11.js b/app11.js deleted file mode 100644 index f8de873..0000000 --- a/app11.js +++ /dev/null @@ -1,24 +0,0 @@ -const list = document.querySelector('#book-list ul'); - -// delete books -list.addEventListener('click', (e) => { - if(e.target.className == 'delete'){ - const li = e.target.parentElement; - li.parentNode.removeChild(li); - } -}); - -const forms = document.forms; -console.log(forms); -console.log(forms['add-book']); - -Array.from(forms).forEach(function(form){ - console.log(form); -}); - -const addForm = forms['add-book']; -addForm.addEventListener('submit', function(e){ - e.preventDefault(); - const value = addForm.querySelector('input[type="text"]').value; - console.log(value); -}); From c2c3656ede694b6fb0c127e43c9f5b0851b5bf9c Mon Sep 17 00:00:00 2001 From: ZaDivan <78017590+ZaDivan@users.noreply.github.com> Date: Tue, 16 Mar 2021 14:04:01 +0200 Subject: [PATCH 19/23] Delete app4.js --- app4.js | 12 ------------ 1 file changed, 12 deletions(-) delete mode 100644 app4.js diff --git a/app4.js b/app4.js deleted file mode 100644 index 61e088d..0000000 --- a/app4.js +++ /dev/null @@ -1,12 +0,0 @@ -const wmf = document.querySelector('#book-list li:nth-child(2) .name'); -// console.log(wmf); - -var books = document.querySelector('#book-list li .name'); -// console.log(books); - -books = document.querySelectorAll('#book-list li .name'); -//console.log(books); - -Array.from(books).forEach(function(book){ - console.log(book); -}); From 0f475381544c67f71f03190696b41fc89c8195bc Mon Sep 17 00:00:00 2001 From: ZaDivan <78017590+ZaDivan@users.noreply.github.com> Date: Tue, 16 Mar 2021 14:04:11 +0200 Subject: [PATCH 20/23] Delete app5.js --- app5.js | 9 --------- 1 file changed, 9 deletions(-) delete mode 100644 app5.js diff --git a/app5.js b/app5.js deleted file mode 100644 index 2c63edc..0000000 --- a/app5.js +++ /dev/null @@ -1,9 +0,0 @@ -const books = document.querySelectorAll('#book-list li .name'); - -Array.from(books).forEach(function(book){ - book.textContent += ' (Book title)'; -}); - -const bookList = document.querySelector('#book-list'); -bookList.innerHTML = '

Books and more books...

'; -bookList.innerHTML += '

This is how you add HTML content

'; From 7b9fd17ac0d6e0dd07e24151805971de11c9c56f Mon Sep 17 00:00:00 2001 From: ZaDivan <78017590+ZaDivan@users.noreply.github.com> Date: Tue, 16 Mar 2021 14:04:20 +0200 Subject: [PATCH 21/23] Delete app6.js --- app6.js | 8 -------- 1 file changed, 8 deletions(-) delete mode 100644 app6.js diff --git a/app6.js b/app6.js deleted file mode 100644 index 36df12d..0000000 --- a/app6.js +++ /dev/null @@ -1,8 +0,0 @@ -const banner = document.querySelector('#page-banner'); - -console.log('#page-banner node type is:', banner.nodeType); -console.log('#page-banner node name is:', banner.nodeName); -console.log('#page-banner has child nodes:', banner.hasChildNodes()); - -const clonedBanner = banner.cloneNode(true); -console.log(clonedBanner); From 3045fb2a5a2496b838cf8b6f10df24b5aa8f58b8 Mon Sep 17 00:00:00 2001 From: ZaDivan <78017590+ZaDivan@users.noreply.github.com> Date: Tue, 16 Mar 2021 14:04:28 +0200 Subject: [PATCH 22/23] Delete app8.js --- app8.js | 8 -------- 1 file changed, 8 deletions(-) delete mode 100644 app8.js diff --git a/app8.js b/app8.js deleted file mode 100644 index c3f5be8..0000000 --- a/app8.js +++ /dev/null @@ -1,8 +0,0 @@ -const bookList = document.querySelector('#book-list'); - -console.log('#book-list next sibling:', bookList.nextSibling); -console.log('#book-list next element sibling:', bookList.nextElementSibling); -console.log('#book-list previous sibling:', bookList.previousSibling); -console.log('#book-list previous element sibling:', bookList.previousElementSibling); - -bookList.previousElementSibling.querySelector('p').innerHTML += '
Too cool for everyone else!'; From 774f6680b1b3c6ef28fb3ec9790b74b397e0cec2 Mon Sep 17 00:00:00 2001 From: ZaDivan <78017590+ZaDivan@users.noreply.github.com> Date: Tue, 16 Mar 2021 14:04:37 +0200 Subject: [PATCH 23/23] Delete app9.js --- app9.js | 21 --------------------- 1 file changed, 21 deletions(-) delete mode 100644 app9.js diff --git a/app9.js b/app9.js deleted file mode 100644 index d276dfb..0000000 --- a/app9.js +++ /dev/null @@ -1,21 +0,0 @@ -const listItems = document.querySelectorAll('#book-list ul li'); - -Array.from(listItems).forEach(function(item){ - item.addEventListener('click', (e) => { - - const li = e.target.parentElement; - console.log('child element to remove:', li); - console.log('parent element to remove child from:', li.parentElement); - li.parentNode.removeChild(li); - - }); -}); - -// prevent default behaviour - -const link = document.querySelector('#page-banner a'); - -link.addEventListener('click', function(e){ - e.preventDefault(); - console.log('Navigation to', e.target.textContent, 'was prevented'); -});