From 2c5fb265b51a85e0d01b3f6456df89b0ce0a7231 Mon Sep 17 00:00:00 2001 From: Shaun Pelling Date: Thu, 10 Aug 2017 15:40:51 +0100 Subject: [PATCH 01/12] 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 + + +

+ +

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/12] 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 66f2a2e08055d6dd453e1de969d08296f3952964 Mon Sep 17 00:00:00 2001 From: Shaun Pelling Date: Thu, 10 Aug 2017 16:11:59 +0100 Subject: [PATCH 03/12] lesson 3 code --- app.js | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/app.js b/app.js index 6442464..e94cfb3 100644 --- a/app.js +++ b/app.js @@ -1,4 +1,8 @@ -const search = document.getElementById('search-books'); -const bookList = document.getElementById('book-list'); +const titles = document.getElementsByClassName('title'); -console.log(search, bookList); +console.log(Array.isArray(titles)); +console.log(Array.isArray(Array.from(titles))); + +Array.from(titles).forEach(function(title){ + console.log(title); +}); From 4fe3b43580e0d45021d50d454dc793b4bd684857 Mon Sep 17 00:00:00 2001 From: Shaun Pelling Date: Thu, 10 Aug 2017 16:17:03 +0100 Subject: [PATCH 04/12] lesson 4 code --- app.js | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/app.js b/app.js index e94cfb3..97bafa2 100644 --- a/app.js +++ b/app.js @@ -1,8 +1,12 @@ -const titles = document.getElementsByClassName('title'); +const wmf = 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); -Array.from(titles).forEach(function(title){ - console.log(title); +books = document.querySelectorAll('#book-list li .name'); +console.log(books); + +Array.from(books).forEach(function(book){ + console.log(book); }); From aa36d976e440be1bde8bb6e8e2722b1b5483f348 Mon Sep 17 00:00:00 2001 From: Shaun Pelling Date: Thu, 10 Aug 2017 16:23:07 +0100 Subject: [PATCH 05/12] lesson 5 code --- app.js | 15 ++++++--------- 1 file changed, 6 insertions(+), 9 deletions(-) diff --git a/app.js b/app.js index 97bafa2..a89115f 100644 --- a/app.js +++ b/app.js @@ -1,12 +1,9 @@ -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); +const books = document.querySelectorAll('#book-list li .name'); Array.from(books).forEach(function(book){ - console.log(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 c77915944622906c1961fdf727751e7c56f301b2 Mon Sep 17 00:00:00 2001 From: Shaun Pelling Date: Thu, 10 Aug 2017 16:35:21 +0100 Subject: [PATCH 06/12] lesson 6 code --- app.js | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/app.js b/app.js index a89115f..1e70007 100644 --- a/app.js +++ b/app.js @@ -1,9 +1,8 @@ -const books = document.querySelectorAll('#book-list li .name'); +const banner = document.querySelector('#page-banner'); -Array.from(books).forEach(function(book){ - book.textContent += ' (Book title)'; -}); +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 bookList = document.querySelector('#book-list'); -bookList.innerHTML = '

Books and more books...

'; -bookList.innerHTML += '

This is how you add HTML content

'; +const clonedBanner = banner.cloneNode(true); +console.log(clonedBanner); From 8206d063a6970aac45127ff3220e5a6bca171db3 Mon Sep 17 00:00:00 2001 From: Shaun Pelling Date: Thu, 10 Aug 2017 17:15:54 +0100 Subject: [PATCH 07/12] lesson 7 code --- 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 8a62ef3d10f51f9a80e96a323e3cbda637b4aa62 Mon Sep 17 00:00:00 2001 From: Shaun Pelling Date: Thu, 10 Aug 2017 17:23:25 +0100 Subject: [PATCH 08/12] lesson 8 code --- app.js | 23 +++++------------------ 1 file changed, 5 insertions(+), 18 deletions(-) diff --git a/app.js b/app.js index 45c78aa..a319fd4 100644 --- a/app.js +++ b/app.js @@ -1,21 +1,8 @@ const bookList = document.querySelector('#book-list'); -console.log('book list parent element:', bookList.parentElement); -console.log('book list parent node:', bookList.parentNode); +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); -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); -}); +bookList.previousElementSibling.querySelector('p').innerHTML += '
Too cool for everyone else!'; From d92c806fc738626d5fe13e4f88c2f46c871cb80f Mon Sep 17 00:00:00 2001 From: Shaun Pelling Date: Thu, 10 Aug 2017 17:35:36 +0100 Subject: [PATCH 09/12] lesson 9 code --- app.js | 23 +++++++++++++++++------ index.html | 1 + 2 files changed, 18 insertions(+), 6 deletions(-) diff --git a/app.js b/app.js index a319fd4..7772569 100644 --- a/app.js +++ b/app.js @@ -1,8 +1,19 @@ -const bookList = document.querySelector('#book-list'); +const list = document.querySelector('#book-list ul'); -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); +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); + } +}); -bookList.previousElementSibling.querySelector('p').innerHTML += '
Too cool for everyone else!'; +// 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'); +}); diff --git a/index.html b/index.html index cbc1f11..9f7663f 100644 --- a/index.html +++ b/index.html @@ -11,6 +11,7 @@

Bookorama

Books for Ninjas

+ Net Ninja Site From 5dc8cb24a0b2bd5371e0e697f0fedf158e6c95f8 Mon Sep 17 00:00:00 2001 From: Shaun Pelling Date: Thu, 10 Aug 2017 17:40:41 +0100 Subject: [PATCH 10/12] lesson 10 code --- app.js | 12 +----------- index.html | 1 - 2 files changed, 1 insertion(+), 12 deletions(-) diff --git a/app.js b/app.js index 7772569..bf20729 100644 --- a/app.js +++ b/app.js @@ -1,19 +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; - 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'); -}); diff --git a/index.html b/index.html index 9f7663f..cbc1f11 100644 --- a/index.html +++ b/index.html @@ -11,7 +11,6 @@

Bookorama

Books for Ninjas

- Net Ninja Site From ddbb0b599b30d621d7bf301eec78831de5129b4e Mon Sep 17 00:00:00 2001 From: Shaun Pelling Date: Thu, 10 Aug 2017 18:01:05 +0100 Subject: [PATCH 11/12] lesson 11 code --- app.js | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/app.js b/app.js index bf20729..b5474a7 100644 --- a/app.js +++ b/app.js @@ -7,3 +7,18 @@ list.addEventListener('click', (e) => { 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 83b0916e951d509c213c6f598869d200eda2c1e9 Mon Sep 17 00:00:00 2001 From: Shaun Pelling Date: Fri, 11 Aug 2017 09:36:17 +0100 Subject: [PATCH 12/12] lesson 12 code --- app.js | 26 +++++++++++++++++--------- 1 file changed, 17 insertions(+), 9 deletions(-) diff --git a/app.js b/app.js index b5474a7..ec0a2c2 100644 --- a/app.js +++ b/app.js @@ -1,4 +1,5 @@ const list = document.querySelector('#book-list ul'); +const forms = document.forms; // delete books list.addEventListener('click', (e) => { @@ -8,17 +9,24 @@ list.addEventListener('click', (e) => { } }); -const forms = document.forms; -console.log(forms); -console.log(forms['add-book']); - -Array.from(forms).forEach(function(form){ - console.log(form); -}); - +// 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')); });