diff --git a/lessons/JavaScript-DOM-Tutorial-lesson-1/.DS_Store b/lessons/JavaScript-DOM-Tutorial-lesson-1/.DS_Store new file mode 100644 index 0000000..d194775 Binary files /dev/null and b/lessons/JavaScript-DOM-Tutorial-lesson-1/.DS_Store differ diff --git a/lessons/JavaScript-DOM-Tutorial-lesson-1/README.md b/lessons/JavaScript-DOM-Tutorial-lesson-1/README.md new file mode 100644 index 0000000..fb93d40 --- /dev/null +++ b/lessons/JavaScript-DOM-Tutorial-lesson-1/README.md @@ -0,0 +1,2 @@ +# JavaScript-DOM-Tutorial +All course files for the JavaScrip DOM Tutorials on The Net Ninja YouTube channel. diff --git a/lessons/JavaScript-DOM-Tutorial-lesson-1/index.html b/lessons/JavaScript-DOM-Tutorial-lesson-1/index.html new file mode 100644 index 0000000..cbc1f11 --- /dev/null +++ b/lessons/JavaScript-DOM-Tutorial-lesson-1/index.html @@ -0,0 +1,48 @@ + + + + + + JavaScript DOM Tutorials + + +
+
+
+

Bookorama

+

Books for Ninjas

+
+ +
+
+
+
+

Books to Read

+ +
+
+ + +
+ +
+ + + diff --git a/lessons/JavaScript-DOM-Tutorial-lesson-1/styles.css b/lessons/JavaScript-DOM-Tutorial-lesson-1/styles.css new file mode 100644 index 0000000..361284d --- /dev/null +++ b/lessons/JavaScript-DOM-Tutorial-lesson-1/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; +} +*/ diff --git a/lessons/JavaScript-DOM-Tutorial-lesson-10/.DS_Store b/lessons/JavaScript-DOM-Tutorial-lesson-10/.DS_Store new file mode 100644 index 0000000..d194775 Binary files /dev/null and b/lessons/JavaScript-DOM-Tutorial-lesson-10/.DS_Store differ diff --git a/lessons/JavaScript-DOM-Tutorial-lesson-10/README.md b/lessons/JavaScript-DOM-Tutorial-lesson-10/README.md new file mode 100644 index 0000000..fb93d40 --- /dev/null +++ b/lessons/JavaScript-DOM-Tutorial-lesson-10/README.md @@ -0,0 +1,2 @@ +# JavaScript-DOM-Tutorial +All course files for the JavaScrip DOM Tutorials on The Net Ninja YouTube channel. diff --git a/lessons/JavaScript-DOM-Tutorial-lesson-10/app.js b/lessons/JavaScript-DOM-Tutorial-lesson-10/app.js new file mode 100644 index 0000000..bf20729 --- /dev/null +++ b/lessons/JavaScript-DOM-Tutorial-lesson-10/app.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/lessons/JavaScript-DOM-Tutorial-lesson-10/index.html b/lessons/JavaScript-DOM-Tutorial-lesson-10/index.html new file mode 100644 index 0000000..cbc1f11 --- /dev/null +++ b/lessons/JavaScript-DOM-Tutorial-lesson-10/index.html @@ -0,0 +1,48 @@ + + + + + + JavaScript DOM Tutorials + + +
+
+
+

Bookorama

+

Books for Ninjas

+
+ +
+
+
+
+

Books to Read

+ +
+
+ + +
+ +
+ + + diff --git a/lessons/JavaScript-DOM-Tutorial-lesson-10/styles.css b/lessons/JavaScript-DOM-Tutorial-lesson-10/styles.css new file mode 100644 index 0000000..361284d --- /dev/null +++ b/lessons/JavaScript-DOM-Tutorial-lesson-10/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; +} +*/ diff --git a/lessons/JavaScript-DOM-Tutorial-lesson-11/.DS_Store b/lessons/JavaScript-DOM-Tutorial-lesson-11/.DS_Store new file mode 100644 index 0000000..d194775 Binary files /dev/null and b/lessons/JavaScript-DOM-Tutorial-lesson-11/.DS_Store differ diff --git a/lessons/JavaScript-DOM-Tutorial-lesson-11/README.md b/lessons/JavaScript-DOM-Tutorial-lesson-11/README.md new file mode 100644 index 0000000..fb93d40 --- /dev/null +++ b/lessons/JavaScript-DOM-Tutorial-lesson-11/README.md @@ -0,0 +1,2 @@ +# JavaScript-DOM-Tutorial +All course files for the JavaScrip DOM Tutorials on The Net Ninja YouTube channel. diff --git a/lessons/JavaScript-DOM-Tutorial-lesson-11/app.js b/lessons/JavaScript-DOM-Tutorial-lesson-11/app.js new file mode 100644 index 0000000..b5474a7 --- /dev/null +++ b/lessons/JavaScript-DOM-Tutorial-lesson-11/app.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/lessons/JavaScript-DOM-Tutorial-lesson-11/index.html b/lessons/JavaScript-DOM-Tutorial-lesson-11/index.html new file mode 100644 index 0000000..cbc1f11 --- /dev/null +++ b/lessons/JavaScript-DOM-Tutorial-lesson-11/index.html @@ -0,0 +1,48 @@ + + + + + + JavaScript DOM Tutorials + + +
+
+
+

Bookorama

+

Books for Ninjas

+
+ +
+
+
+
+

Books to Read

+ +
+
+ + +
+ +
+ + + diff --git a/lessons/JavaScript-DOM-Tutorial-lesson-11/styles.css b/lessons/JavaScript-DOM-Tutorial-lesson-11/styles.css new file mode 100644 index 0000000..361284d --- /dev/null +++ b/lessons/JavaScript-DOM-Tutorial-lesson-11/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; +} +*/ diff --git a/lessons/JavaScript-DOM-Tutorial-lesson-12/.DS_Store b/lessons/JavaScript-DOM-Tutorial-lesson-12/.DS_Store new file mode 100644 index 0000000..d194775 Binary files /dev/null and b/lessons/JavaScript-DOM-Tutorial-lesson-12/.DS_Store differ diff --git a/lessons/JavaScript-DOM-Tutorial-lesson-12/README.md b/lessons/JavaScript-DOM-Tutorial-lesson-12/README.md new file mode 100644 index 0000000..fb93d40 --- /dev/null +++ b/lessons/JavaScript-DOM-Tutorial-lesson-12/README.md @@ -0,0 +1,2 @@ +# JavaScript-DOM-Tutorial +All course files for the JavaScrip DOM Tutorials on The Net Ninja YouTube channel. diff --git a/lessons/JavaScript-DOM-Tutorial-lesson-12/app.js b/lessons/JavaScript-DOM-Tutorial-lesson-12/app.js new file mode 100644 index 0000000..ec0a2c2 --- /dev/null +++ b/lessons/JavaScript-DOM-Tutorial-lesson-12/app.js @@ -0,0 +1,32 @@ +const list = document.querySelector('#book-list ul'); +const forms = document.forms; + +// 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; + 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')); +}); diff --git a/lessons/JavaScript-DOM-Tutorial-lesson-12/index.html b/lessons/JavaScript-DOM-Tutorial-lesson-12/index.html new file mode 100644 index 0000000..cbc1f11 --- /dev/null +++ b/lessons/JavaScript-DOM-Tutorial-lesson-12/index.html @@ -0,0 +1,48 @@ + + + + + + JavaScript DOM Tutorials + + +
+
+
+

Bookorama

+

Books for Ninjas

+
+ +
+
+
+
+

Books to Read

+ +
+
+ + +
+ +
+ + + diff --git a/lessons/JavaScript-DOM-Tutorial-lesson-12/styles.css b/lessons/JavaScript-DOM-Tutorial-lesson-12/styles.css new file mode 100644 index 0000000..361284d --- /dev/null +++ b/lessons/JavaScript-DOM-Tutorial-lesson-12/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; +} +*/ diff --git a/lessons/JavaScript-DOM-Tutorial-lesson-13/.DS_Store b/lessons/JavaScript-DOM-Tutorial-lesson-13/.DS_Store new file mode 100644 index 0000000..d194775 Binary files /dev/null and b/lessons/JavaScript-DOM-Tutorial-lesson-13/.DS_Store differ diff --git a/lessons/JavaScript-DOM-Tutorial-lesson-13/README.md b/lessons/JavaScript-DOM-Tutorial-lesson-13/README.md new file mode 100644 index 0000000..fb93d40 --- /dev/null +++ b/lessons/JavaScript-DOM-Tutorial-lesson-13/README.md @@ -0,0 +1,2 @@ +# JavaScript-DOM-Tutorial +All course files for the JavaScrip DOM Tutorials on The Net Ninja YouTube channel. diff --git a/lessons/JavaScript-DOM-Tutorial-lesson-13/app.js b/lessons/JavaScript-DOM-Tutorial-lesson-13/app.js new file mode 100644 index 0000000..6a58eee --- /dev/null +++ b/lessons/JavaScript-DOM-Tutorial-lesson-13/app.js @@ -0,0 +1,35 @@ +const list = document.querySelector('#book-list ul'); +const forms = document.forms; + +// 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; + const li = document.createElement('li'); + const bookName = document.createElement('span'); + const deleteBtn = document.createElement('span'); + + // add text content + bookName.textContent = value; + deleteBtn.textContent = 'delete'; + + // add classes + bookName.classList.add('name'); + deleteBtn.classList.add('delete'); + + // append to DOM + li.appendChild(bookName); + li.appendChild(deleteBtn); + list.appendChild(li); +}); diff --git a/lessons/JavaScript-DOM-Tutorial-lesson-13/index.html b/lessons/JavaScript-DOM-Tutorial-lesson-13/index.html new file mode 100644 index 0000000..cbc1f11 --- /dev/null +++ b/lessons/JavaScript-DOM-Tutorial-lesson-13/index.html @@ -0,0 +1,48 @@ + + + + + + JavaScript DOM Tutorials + + +
+
+
+

Bookorama

+

Books for Ninjas

+
+ +
+
+
+
+

Books to Read

+ +
+
+ + +
+ +
+ + + diff --git a/lessons/JavaScript-DOM-Tutorial-lesson-13/styles.css b/lessons/JavaScript-DOM-Tutorial-lesson-13/styles.css new file mode 100644 index 0000000..361284d --- /dev/null +++ b/lessons/JavaScript-DOM-Tutorial-lesson-13/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; +} +*/ diff --git a/lessons/JavaScript-DOM-Tutorial-lesson-15/.DS_Store b/lessons/JavaScript-DOM-Tutorial-lesson-15/.DS_Store new file mode 100644 index 0000000..d194775 Binary files /dev/null and b/lessons/JavaScript-DOM-Tutorial-lesson-15/.DS_Store differ diff --git a/lessons/JavaScript-DOM-Tutorial-lesson-15/README.md b/lessons/JavaScript-DOM-Tutorial-lesson-15/README.md new file mode 100644 index 0000000..fb93d40 --- /dev/null +++ b/lessons/JavaScript-DOM-Tutorial-lesson-15/README.md @@ -0,0 +1,2 @@ +# JavaScript-DOM-Tutorial +All course files for the JavaScrip DOM Tutorials on The Net Ninja YouTube channel. diff --git a/lessons/JavaScript-DOM-Tutorial-lesson-15/app.js b/lessons/JavaScript-DOM-Tutorial-lesson-15/app.js new file mode 100644 index 0000000..bb49db5 --- /dev/null +++ b/lessons/JavaScript-DOM-Tutorial-lesson-15/app.js @@ -0,0 +1,45 @@ +const list = document.querySelector('#book-list ul'); +const forms = document.forms; + +// 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; + const li = document.createElement('li'); + const bookName = document.createElement('span'); + const deleteBtn = document.createElement('span'); + + // add text content + bookName.textContent = value; + deleteBtn.textContent = 'delete'; + + // add classes + bookName.classList.add('name'); + deleteBtn.classList.add('delete'); + + // append to DOM + 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 = "initial"; + } +}); diff --git a/lessons/JavaScript-DOM-Tutorial-lesson-15/index.html b/lessons/JavaScript-DOM-Tutorial-lesson-15/index.html new file mode 100644 index 0000000..2d3f5a7 --- /dev/null +++ b/lessons/JavaScript-DOM-Tutorial-lesson-15/index.html @@ -0,0 +1,49 @@ + + + + + + JavaScript DOM Tutorials + + +
+
+
+

Bookorama

+

Books for Ninjas

+
+ +
+
+
+
+

Books to Read

+ +
+
+ + + + +
+
+ + + diff --git a/lessons/JavaScript-DOM-Tutorial-lesson-15/styles.css b/lessons/JavaScript-DOM-Tutorial-lesson-15/styles.css new file mode 100644 index 0000000..a2a1ce8 --- /dev/null +++ b/lessons/JavaScript-DOM-Tutorial-lesson-15/styles.css @@ -0,0 +1,147 @@ +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; + clear: both; +} + +#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; +} + +#add-book #hide{ + width: 30px; +} + +#add-book label{ + line-height: 52px; +} + +/* +#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; +} +*/ diff --git a/lessons/JavaScript-DOM-Tutorial-lesson-17/.DS_Store b/lessons/JavaScript-DOM-Tutorial-lesson-17/.DS_Store new file mode 100644 index 0000000..d194775 Binary files /dev/null and b/lessons/JavaScript-DOM-Tutorial-lesson-17/.DS_Store differ diff --git a/lessons/JavaScript-DOM-Tutorial-lesson-17/README.md b/lessons/JavaScript-DOM-Tutorial-lesson-17/README.md new file mode 100644 index 0000000..fb93d40 --- /dev/null +++ b/lessons/JavaScript-DOM-Tutorial-lesson-17/README.md @@ -0,0 +1,2 @@ +# JavaScript-DOM-Tutorial +All course files for the JavaScrip DOM Tutorials on The Net Ninja YouTube channel. diff --git a/lessons/JavaScript-DOM-Tutorial-lesson-17/app.js b/lessons/JavaScript-DOM-Tutorial-lesson-17/app.js new file mode 100644 index 0000000..d9f0cf3 --- /dev/null +++ b/lessons/JavaScript-DOM-Tutorial-lesson-17/app.js @@ -0,0 +1,76 @@ +const list = document.querySelector('#book-list ul'); +const forms = document.forms; + +// 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; + const li = document.createElement('li'); + const bookName = document.createElement('span'); + const deleteBtn = document.createElement('span'); + + // add text content + bookName.textContent = value; + deleteBtn.textContent = 'delete'; + + // add classes + bookName.classList.add('name'); + deleteBtn.classList.add('delete'); + + // append to DOM + 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 = "initial"; + } +}); + +// filter books +const searchBar = forms['search-books'].querySelector('input'); +searchBar.addEventListener('keyup', (e) => { + const term = e.target.value.toLowerCase(); + const books = list.getElementsByTagName('li'); + Array.from(books).forEach((book) => { + const title = book.firstElementChild.textContent; + if(title.toLowerCase().indexOf(e.target.value) != -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', (e) => { + if(e.target.tagName == 'LI'){ + const targetPanel = document.querySelector(e.target.dataset.target); + Array.from(panels).forEach((panel) => { + if(panel == targetPanel){ + panel.classList.add('active'); + }else{ + panel.classList.remove('active'); + } + }); + } +}); diff --git a/lessons/JavaScript-DOM-Tutorial-lesson-17/index.html b/lessons/JavaScript-DOM-Tutorial-lesson-17/index.html new file mode 100644 index 0000000..0dc2cd7 --- /dev/null +++ b/lessons/JavaScript-DOM-Tutorial-lesson-17/index.html @@ -0,0 +1,63 @@ + + + + + + JavaScript DOM Tutorials + + +
+
+
+

Bookorama

+

Books for Ninjas

+
+ +
+
+
+
+

Books to Read

+ +
+
+ + + + +
+
+ +
+

Content for about tab...

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id nunc porta urna ornare rhoncus. Ut convallis ante at.

+
+
+

Content for contact tab...

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id nunc porta urna ornare rhoncus. Ut convallis ante at.

+
+
+
+ + + diff --git a/lessons/JavaScript-DOM-Tutorial-lesson-17/styles.css b/lessons/JavaScript-DOM-Tutorial-lesson-17/styles.css new file mode 100644 index 0000000..7435b62 --- /dev/null +++ b/lessons/JavaScript-DOM-Tutorial-lesson-17/styles.css @@ -0,0 +1,145 @@ +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; + clear: both; +} + +#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; +} + +#add-book #hide{ + width: 30px; +} + +#add-book label{ + line-height: 52px; +} + +#tabbed-content li{ + display: inline-block; + padding: 10px 14px; + background: #ddd; + border-radius: 4px; + cursor: pointer; + margin-right: 10px; +} + +#tabbed-content .panel{ + display: none; + border: 1px solid #ddd; + padding: 0 10px; + border-radius: 4px; +} + +#tabbed-content .panel.active{ + display: block; +} diff --git a/lessons/JavaScript-DOM-Tutorial-lesson-18/.DS_Store b/lessons/JavaScript-DOM-Tutorial-lesson-18/.DS_Store new file mode 100644 index 0000000..d194775 Binary files /dev/null and b/lessons/JavaScript-DOM-Tutorial-lesson-18/.DS_Store differ diff --git a/lessons/JavaScript-DOM-Tutorial-lesson-18/README.md b/lessons/JavaScript-DOM-Tutorial-lesson-18/README.md new file mode 100644 index 0000000..fb93d40 --- /dev/null +++ b/lessons/JavaScript-DOM-Tutorial-lesson-18/README.md @@ -0,0 +1,2 @@ +# JavaScript-DOM-Tutorial +All course files for the JavaScrip DOM Tutorials on The Net Ninja YouTube channel. diff --git a/lessons/JavaScript-DOM-Tutorial-lesson-18/app.js b/lessons/JavaScript-DOM-Tutorial-lesson-18/app.js new file mode 100644 index 0000000..b131860 --- /dev/null +++ b/lessons/JavaScript-DOM-Tutorial-lesson-18/app.js @@ -0,0 +1,80 @@ +document.addEventListener('DOMContentLoaded', function(){ + + const list = document.querySelector('#book-list ul'); + const forms = document.forms; + + // 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; + const li = document.createElement('li'); + const bookName = document.createElement('span'); + const deleteBtn = document.createElement('span'); + + // add text content + bookName.textContent = value; + deleteBtn.textContent = 'delete'; + + // add classes + bookName.classList.add('name'); + deleteBtn.classList.add('delete'); + + // append to DOM + 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 = "initial"; + } + }); + + // filter books + const searchBar = forms['search-books'].querySelector('input'); + searchBar.addEventListener('keyup', (e) => { + const term = e.target.value.toLowerCase(); + const books = list.getElementsByTagName('li'); + Array.from(books).forEach((book) => { + const title = book.firstElementChild.textContent; + if(title.toLowerCase().indexOf(e.target.value) != -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', (e) => { + if(e.target.tagName == 'LI'){ + const targetPanel = document.querySelector(e.target.dataset.target); + Array.from(panels).forEach((panel) => { + if(panel == targetPanel){ + panel.classList.add('active'); + }else{ + panel.classList.remove('active'); + } + }); + } + }); + +}) diff --git a/lessons/JavaScript-DOM-Tutorial-lesson-18/index.html b/lessons/JavaScript-DOM-Tutorial-lesson-18/index.html new file mode 100644 index 0000000..d840a11 --- /dev/null +++ b/lessons/JavaScript-DOM-Tutorial-lesson-18/index.html @@ -0,0 +1,63 @@ + + + + + + + JavaScript DOM Tutorials + + +
+
+
+

Bookorama

+

Books for Ninjas

+
+ +
+
+
+
+

Books to Read

+ +
+
+ + + + +
+
+ +
+

Content for about tab...

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id nunc porta urna ornare rhoncus. Ut convallis ante at.

+
+
+

Content for contact tab...

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id nunc porta urna ornare rhoncus. Ut convallis ante at.

+
+
+
+ + diff --git a/lessons/JavaScript-DOM-Tutorial-lesson-18/styles.css b/lessons/JavaScript-DOM-Tutorial-lesson-18/styles.css new file mode 100644 index 0000000..7435b62 --- /dev/null +++ b/lessons/JavaScript-DOM-Tutorial-lesson-18/styles.css @@ -0,0 +1,145 @@ +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; + clear: both; +} + +#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; +} + +#add-book #hide{ + width: 30px; +} + +#add-book label{ + line-height: 52px; +} + +#tabbed-content li{ + display: inline-block; + padding: 10px 14px; + background: #ddd; + border-radius: 4px; + cursor: pointer; + margin-right: 10px; +} + +#tabbed-content .panel{ + display: none; + border: 1px solid #ddd; + padding: 0 10px; + border-radius: 4px; +} + +#tabbed-content .panel.active{ + display: block; +} diff --git a/lessons/JavaScript-DOM-Tutorial-lesson-2/.DS_Store b/lessons/JavaScript-DOM-Tutorial-lesson-2/.DS_Store new file mode 100644 index 0000000..d194775 Binary files /dev/null and b/lessons/JavaScript-DOM-Tutorial-lesson-2/.DS_Store differ diff --git a/lessons/JavaScript-DOM-Tutorial-lesson-2/README.md b/lessons/JavaScript-DOM-Tutorial-lesson-2/README.md new file mode 100644 index 0000000..fb93d40 --- /dev/null +++ b/lessons/JavaScript-DOM-Tutorial-lesson-2/README.md @@ -0,0 +1,2 @@ +# JavaScript-DOM-Tutorial +All course files for the JavaScrip DOM Tutorials on The Net Ninja YouTube channel. diff --git a/lessons/JavaScript-DOM-Tutorial-lesson-2/app.js b/lessons/JavaScript-DOM-Tutorial-lesson-2/app.js new file mode 100644 index 0000000..6442464 --- /dev/null +++ b/lessons/JavaScript-DOM-Tutorial-lesson-2/app.js @@ -0,0 +1,4 @@ +const search = document.getElementById('search-books'); +const bookList = document.getElementById('book-list'); + +console.log(search, bookList); diff --git a/lessons/JavaScript-DOM-Tutorial-lesson-2/index.html b/lessons/JavaScript-DOM-Tutorial-lesson-2/index.html new file mode 100644 index 0000000..cbc1f11 --- /dev/null +++ b/lessons/JavaScript-DOM-Tutorial-lesson-2/index.html @@ -0,0 +1,48 @@ + + + + + + JavaScript DOM Tutorials + + +
+
+
+

Bookorama

+

Books for Ninjas

+
+ +
+
+
+
+

Books to Read

+ +
+
+ + +
+ +
+ + + diff --git a/lessons/JavaScript-DOM-Tutorial-lesson-2/styles.css b/lessons/JavaScript-DOM-Tutorial-lesson-2/styles.css new file mode 100644 index 0000000..361284d --- /dev/null +++ b/lessons/JavaScript-DOM-Tutorial-lesson-2/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; +} +*/ diff --git a/lessons/JavaScript-DOM-Tutorial-lesson-3/.DS_Store b/lessons/JavaScript-DOM-Tutorial-lesson-3/.DS_Store new file mode 100644 index 0000000..d194775 Binary files /dev/null and b/lessons/JavaScript-DOM-Tutorial-lesson-3/.DS_Store differ diff --git a/lessons/JavaScript-DOM-Tutorial-lesson-3/README.md b/lessons/JavaScript-DOM-Tutorial-lesson-3/README.md new file mode 100644 index 0000000..fb93d40 --- /dev/null +++ b/lessons/JavaScript-DOM-Tutorial-lesson-3/README.md @@ -0,0 +1,2 @@ +# JavaScript-DOM-Tutorial +All course files for the JavaScrip DOM Tutorials on The Net Ninja YouTube channel. diff --git a/lessons/JavaScript-DOM-Tutorial-lesson-3/app.js b/lessons/JavaScript-DOM-Tutorial-lesson-3/app.js new file mode 100644 index 0000000..e94cfb3 --- /dev/null +++ b/lessons/JavaScript-DOM-Tutorial-lesson-3/app.js @@ -0,0 +1,8 @@ +const titles = document.getElementsByClassName('title'); + +console.log(Array.isArray(titles)); +console.log(Array.isArray(Array.from(titles))); + +Array.from(titles).forEach(function(title){ + console.log(title); +}); diff --git a/lessons/JavaScript-DOM-Tutorial-lesson-3/index.html b/lessons/JavaScript-DOM-Tutorial-lesson-3/index.html new file mode 100644 index 0000000..cbc1f11 --- /dev/null +++ b/lessons/JavaScript-DOM-Tutorial-lesson-3/index.html @@ -0,0 +1,48 @@ + + + + + + JavaScript DOM Tutorials + + +
+
+
+

Bookorama

+

Books for Ninjas

+
+ +
+
+
+
+

Books to Read

+ +
+
+ + +
+ +
+ + + diff --git a/lessons/JavaScript-DOM-Tutorial-lesson-3/styles.css b/lessons/JavaScript-DOM-Tutorial-lesson-3/styles.css new file mode 100644 index 0000000..361284d --- /dev/null +++ b/lessons/JavaScript-DOM-Tutorial-lesson-3/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; +} +*/ diff --git a/lessons/JavaScript-DOM-Tutorial-lesson-4/.DS_Store b/lessons/JavaScript-DOM-Tutorial-lesson-4/.DS_Store new file mode 100644 index 0000000..d194775 Binary files /dev/null and b/lessons/JavaScript-DOM-Tutorial-lesson-4/.DS_Store differ diff --git a/lessons/JavaScript-DOM-Tutorial-lesson-4/README.md b/lessons/JavaScript-DOM-Tutorial-lesson-4/README.md new file mode 100644 index 0000000..fb93d40 --- /dev/null +++ b/lessons/JavaScript-DOM-Tutorial-lesson-4/README.md @@ -0,0 +1,2 @@ +# JavaScript-DOM-Tutorial +All course files for the JavaScrip DOM Tutorials on The Net Ninja YouTube channel. diff --git a/lessons/JavaScript-DOM-Tutorial-lesson-4/app.js b/lessons/JavaScript-DOM-Tutorial-lesson-4/app.js new file mode 100644 index 0000000..97bafa2 --- /dev/null +++ b/lessons/JavaScript-DOM-Tutorial-lesson-4/app.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); +}); diff --git a/lessons/JavaScript-DOM-Tutorial-lesson-4/index.html b/lessons/JavaScript-DOM-Tutorial-lesson-4/index.html new file mode 100644 index 0000000..cbc1f11 --- /dev/null +++ b/lessons/JavaScript-DOM-Tutorial-lesson-4/index.html @@ -0,0 +1,48 @@ + + + + + + JavaScript DOM Tutorials + + +
+
+
+

Bookorama

+

Books for Ninjas

+
+ +
+
+
+
+

Books to Read

+ +
+
+ + +
+ +
+ + + diff --git a/lessons/JavaScript-DOM-Tutorial-lesson-4/styles.css b/lessons/JavaScript-DOM-Tutorial-lesson-4/styles.css new file mode 100644 index 0000000..361284d --- /dev/null +++ b/lessons/JavaScript-DOM-Tutorial-lesson-4/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; +} +*/ diff --git a/lessons/JavaScript-DOM-Tutorial-lesson-5/.DS_Store b/lessons/JavaScript-DOM-Tutorial-lesson-5/.DS_Store new file mode 100644 index 0000000..d194775 Binary files /dev/null and b/lessons/JavaScript-DOM-Tutorial-lesson-5/.DS_Store differ diff --git a/lessons/JavaScript-DOM-Tutorial-lesson-5/README.md b/lessons/JavaScript-DOM-Tutorial-lesson-5/README.md new file mode 100644 index 0000000..fb93d40 --- /dev/null +++ b/lessons/JavaScript-DOM-Tutorial-lesson-5/README.md @@ -0,0 +1,2 @@ +# JavaScript-DOM-Tutorial +All course files for the JavaScrip DOM Tutorials on The Net Ninja YouTube channel. diff --git a/lessons/JavaScript-DOM-Tutorial-lesson-5/app.js b/lessons/JavaScript-DOM-Tutorial-lesson-5/app.js new file mode 100644 index 0000000..a89115f --- /dev/null +++ b/lessons/JavaScript-DOM-Tutorial-lesson-5/app.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/lessons/JavaScript-DOM-Tutorial-lesson-5/index.html b/lessons/JavaScript-DOM-Tutorial-lesson-5/index.html new file mode 100644 index 0000000..cbc1f11 --- /dev/null +++ b/lessons/JavaScript-DOM-Tutorial-lesson-5/index.html @@ -0,0 +1,48 @@ + + + + + + JavaScript DOM Tutorials + + +
+
+
+

Bookorama

+

Books for Ninjas

+
+ +
+
+
+
+

Books to Read

+ +
+
+ + +
+ +
+ + + diff --git a/lessons/JavaScript-DOM-Tutorial-lesson-5/styles.css b/lessons/JavaScript-DOM-Tutorial-lesson-5/styles.css new file mode 100644 index 0000000..361284d --- /dev/null +++ b/lessons/JavaScript-DOM-Tutorial-lesson-5/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; +} +*/ diff --git a/lessons/JavaScript-DOM-Tutorial-lesson-6/.DS_Store b/lessons/JavaScript-DOM-Tutorial-lesson-6/.DS_Store new file mode 100644 index 0000000..d194775 Binary files /dev/null and b/lessons/JavaScript-DOM-Tutorial-lesson-6/.DS_Store differ diff --git a/lessons/JavaScript-DOM-Tutorial-lesson-6/README.md b/lessons/JavaScript-DOM-Tutorial-lesson-6/README.md new file mode 100644 index 0000000..fb93d40 --- /dev/null +++ b/lessons/JavaScript-DOM-Tutorial-lesson-6/README.md @@ -0,0 +1,2 @@ +# JavaScript-DOM-Tutorial +All course files for the JavaScrip DOM Tutorials on The Net Ninja YouTube channel. diff --git a/lessons/JavaScript-DOM-Tutorial-lesson-6/app.js b/lessons/JavaScript-DOM-Tutorial-lesson-6/app.js new file mode 100644 index 0000000..1e70007 --- /dev/null +++ b/lessons/JavaScript-DOM-Tutorial-lesson-6/app.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/lessons/JavaScript-DOM-Tutorial-lesson-6/index.html b/lessons/JavaScript-DOM-Tutorial-lesson-6/index.html new file mode 100644 index 0000000..cbc1f11 --- /dev/null +++ b/lessons/JavaScript-DOM-Tutorial-lesson-6/index.html @@ -0,0 +1,48 @@ + + + + + + JavaScript DOM Tutorials + + +
+
+
+

Bookorama

+

Books for Ninjas

+
+ +
+
+
+
+

Books to Read

+ +
+
+ + +
+ +
+ + + diff --git a/lessons/JavaScript-DOM-Tutorial-lesson-6/styles.css b/lessons/JavaScript-DOM-Tutorial-lesson-6/styles.css new file mode 100644 index 0000000..361284d --- /dev/null +++ b/lessons/JavaScript-DOM-Tutorial-lesson-6/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; +} +*/ diff --git a/lessons/JavaScript-DOM-Tutorial-lesson-7/.DS_Store b/lessons/JavaScript-DOM-Tutorial-lesson-7/.DS_Store new file mode 100644 index 0000000..d194775 Binary files /dev/null and b/lessons/JavaScript-DOM-Tutorial-lesson-7/.DS_Store differ diff --git a/lessons/JavaScript-DOM-Tutorial-lesson-7/README.md b/lessons/JavaScript-DOM-Tutorial-lesson-7/README.md new file mode 100644 index 0000000..fb93d40 --- /dev/null +++ b/lessons/JavaScript-DOM-Tutorial-lesson-7/README.md @@ -0,0 +1,2 @@ +# JavaScript-DOM-Tutorial +All course files for the JavaScrip DOM Tutorials on The Net Ninja YouTube channel. diff --git a/lessons/JavaScript-DOM-Tutorial-lesson-7/app.js b/lessons/JavaScript-DOM-Tutorial-lesson-7/app.js new file mode 100644 index 0000000..45c78aa --- /dev/null +++ b/lessons/JavaScript-DOM-Tutorial-lesson-7/app.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/lessons/JavaScript-DOM-Tutorial-lesson-7/index.html b/lessons/JavaScript-DOM-Tutorial-lesson-7/index.html new file mode 100644 index 0000000..cbc1f11 --- /dev/null +++ b/lessons/JavaScript-DOM-Tutorial-lesson-7/index.html @@ -0,0 +1,48 @@ + + + + + + JavaScript DOM Tutorials + + +
+
+
+

Bookorama

+

Books for Ninjas

+
+ +
+
+
+
+

Books to Read

+ +
+
+ + +
+ +
+ + + diff --git a/lessons/JavaScript-DOM-Tutorial-lesson-7/styles.css b/lessons/JavaScript-DOM-Tutorial-lesson-7/styles.css new file mode 100644 index 0000000..361284d --- /dev/null +++ b/lessons/JavaScript-DOM-Tutorial-lesson-7/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; +} +*/ diff --git a/lessons/JavaScript-DOM-Tutorial-lesson-8/.DS_Store b/lessons/JavaScript-DOM-Tutorial-lesson-8/.DS_Store new file mode 100644 index 0000000..d194775 Binary files /dev/null and b/lessons/JavaScript-DOM-Tutorial-lesson-8/.DS_Store differ diff --git a/lessons/JavaScript-DOM-Tutorial-lesson-8/README.md b/lessons/JavaScript-DOM-Tutorial-lesson-8/README.md new file mode 100644 index 0000000..fb93d40 --- /dev/null +++ b/lessons/JavaScript-DOM-Tutorial-lesson-8/README.md @@ -0,0 +1,2 @@ +# JavaScript-DOM-Tutorial +All course files for the JavaScrip DOM Tutorials on The Net Ninja YouTube channel. diff --git a/lessons/JavaScript-DOM-Tutorial-lesson-8/app.js b/lessons/JavaScript-DOM-Tutorial-lesson-8/app.js new file mode 100644 index 0000000..a319fd4 --- /dev/null +++ b/lessons/JavaScript-DOM-Tutorial-lesson-8/app.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!'; diff --git a/lessons/JavaScript-DOM-Tutorial-lesson-8/index.html b/lessons/JavaScript-DOM-Tutorial-lesson-8/index.html new file mode 100644 index 0000000..cbc1f11 --- /dev/null +++ b/lessons/JavaScript-DOM-Tutorial-lesson-8/index.html @@ -0,0 +1,48 @@ + + + + + + JavaScript DOM Tutorials + + +
+
+
+

Bookorama

+

Books for Ninjas

+
+ +
+
+
+
+

Books to Read

+ +
+
+ + +
+ +
+ + + diff --git a/lessons/JavaScript-DOM-Tutorial-lesson-8/styles.css b/lessons/JavaScript-DOM-Tutorial-lesson-8/styles.css new file mode 100644 index 0000000..361284d --- /dev/null +++ b/lessons/JavaScript-DOM-Tutorial-lesson-8/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; +} +*/ diff --git a/lessons/JavaScript-DOM-Tutorial-lesson-9/.DS_Store b/lessons/JavaScript-DOM-Tutorial-lesson-9/.DS_Store new file mode 100644 index 0000000..d194775 Binary files /dev/null and b/lessons/JavaScript-DOM-Tutorial-lesson-9/.DS_Store differ diff --git a/lessons/JavaScript-DOM-Tutorial-lesson-9/README.md b/lessons/JavaScript-DOM-Tutorial-lesson-9/README.md new file mode 100644 index 0000000..fb93d40 --- /dev/null +++ b/lessons/JavaScript-DOM-Tutorial-lesson-9/README.md @@ -0,0 +1,2 @@ +# JavaScript-DOM-Tutorial +All course files for the JavaScrip DOM Tutorials on The Net Ninja YouTube channel. diff --git a/lessons/JavaScript-DOM-Tutorial-lesson-9/app.js b/lessons/JavaScript-DOM-Tutorial-lesson-9/app.js new file mode 100644 index 0000000..9d0e671 --- /dev/null +++ b/lessons/JavaScript-DOM-Tutorial-lesson-9/app.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'); +}); diff --git a/lessons/JavaScript-DOM-Tutorial-lesson-9/index.html b/lessons/JavaScript-DOM-Tutorial-lesson-9/index.html new file mode 100644 index 0000000..9f7663f --- /dev/null +++ b/lessons/JavaScript-DOM-Tutorial-lesson-9/index.html @@ -0,0 +1,49 @@ + + + + + + JavaScript DOM Tutorials + + +
+
+
+

Bookorama

+

Books for Ninjas

+ Net Ninja Site +
+ +
+
+
+
+

Books to Read

+ +
+
+ + +
+ +
+ + + diff --git a/lessons/JavaScript-DOM-Tutorial-lesson-9/styles.css b/lessons/JavaScript-DOM-Tutorial-lesson-9/styles.css new file mode 100644 index 0000000..361284d --- /dev/null +++ b/lessons/JavaScript-DOM-Tutorial-lesson-9/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; +} +*/