diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html index 4070d32767..c7df3437ef 100644 --- a/01 - JavaScript Drum Kit/index-START.html +++ b/01 - JavaScript Drum Kit/index-START.html @@ -58,9 +58,23 @@ - + function removeTransition(e) { + if (e.propertyName !== 'transform') return; + this.classList.remove('playing'); + } + const keys = document.querySelectorAll('.key'); + window.addEventListener('keydown', playAudio); + keys.forEach(key => key.addEventListener('transitionend', removeTransition)); + diff --git a/02 - JS + CSS Clock/index-START.html b/02 - JS + CSS Clock/index-START.html index 2712384201..7ec3da06be 100644 --- a/02 - JS + CSS Clock/index-START.html +++ b/02 - JS + CSS Clock/index-START.html @@ -15,7 +15,6 @@ - diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html index 7171607a8b..bfe29862a4 100644 --- a/03 - CSS Variables/index-START.html +++ b/03 - CSS Variables/index-START.html @@ -21,7 +21,19 @@

Update CSS Variables with JS

diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html index 4162bce339..37810be3b0 100644 --- a/04 - Array Cardio Day 1/index-START.html +++ b/04 - Array Cardio Day 1/index-START.html @@ -5,7 +5,6 @@ Array Cardio 💪 -

Psst: have a look at the JavaScript Console 💁

diff --git a/05 - Flex Panel Gallery/index-START.html b/05 - Flex Panel Gallery/index-START.html index e1d643ad5c..976399fdb6 100644 --- a/05 - Flex Panel Gallery/index-START.html +++ b/05 - Flex Panel Gallery/index-START.html @@ -24,6 +24,7 @@ .panels { min-height:100vh; overflow: hidden; + display: flex; } .panel { @@ -41,6 +42,10 @@ font-size: 20px; background-size:cover; background-position:center; + flex: 1; + display: flex; + justify-content: center; + flex-direction: column; } @@ -54,7 +59,15 @@ margin:0; width: 100%; transition:transform 0.5s; + flex: 1 0 auto; + display: flex; + justify-content: center; + align-items: center; } + .panel > *:first-child { transform: translateY(-100%);} + .panel.open-active > *:first-child { transform: translateY(0);} + .panel > *:last-child { transform: translateY(100%);} + .panel.open-active > *:last-child { transform: translateY(0);} .panel p { text-transform: uppercase; @@ -67,6 +80,7 @@ } .panel.open { + flex: 5; font-size:40px; } @@ -107,7 +121,17 @@ diff --git a/06 - Type Ahead/index-START.html b/06 - Type Ahead/index-START.html index 1436886918..a04fa09a9e 100644 --- a/06 - Type Ahead/index-START.html +++ b/06 - Type Ahead/index-START.html @@ -17,6 +17,43 @@ diff --git a/07 - Array Cardio Day 2/index-START.html b/07 - Array Cardio Day 2/index-START.html index 206ec31aa0..e7436366ad 100644 --- a/07 - Array Cardio Day 2/index-START.html +++ b/07 - Array Cardio Day 2/index-START.html @@ -26,15 +26,27 @@ // Some and Every Checks // Array.prototype.some() // is at least one person 19? + const isAdult = people.some(person => ((new Date()).getFullYear() - person.year >= 19)); + console.log(isAdult); // Array.prototype.every() // is everyone 19? - + const allAdults = people.every(person => ((new Date()).getFullYear() - person.year >= 19)); + console.log(allAdults); // Array.prototype.find() // Find is like filter, but instead returns just the one you are looking for // find the comment with the ID of 823423 - + const comment = comments.find(comment => comment.id === 823423); + console.log(comment); // Array.prototype.findIndex() // Find the comment with this ID // delete the comment with the ID of 823423 + const index = comments.findIndex(comment => comment.id === 823423); + + const newComment = [ + ...comments.slice(0, index), + ...comments.slice(index+1) + ] + console.table(comments); + console.table(newComment); diff --git a/08 - Fun with HTML5 Canvas/index-START.html b/08 - Fun with HTML5 Canvas/index-START.html index 37c148df07..05e147fb07 100644 --- a/08 - Fun with HTML5 Canvas/index-START.html +++ b/08 - Fun with HTML5 Canvas/index-START.html @@ -7,6 +7,54 @@