diff --git a/01 - JavaScript Drum Kit/index.html b/01 - JavaScript Drum Kit/index.html new file mode 100644 index 0000000000..4e69eb6075 --- /dev/null +++ b/01 - JavaScript Drum Kit/index.html @@ -0,0 +1,84 @@ + + + + + JS Drum Kit + + + + + + +
+
+ A + clap +
+
+ S + hihat +
+
+ D + kick +
+
+ F + openhat +
+
+ G + boom +
+
+ H + ride +
+
+ J + snare +
+
+ K + tom +
+
+ L + tink +
+
+ + + + + + + + + + + + + + + + diff --git a/02 - JS and CSS Clock/index-START.html b/02 - JS and CSS Clock/index-START.html index 55ab1a5331..cec6818644 100644 --- a/02 - JS and CSS Clock/index-START.html +++ b/02 - JS and CSS Clock/index-START.html @@ -63,13 +63,37 @@ background: black; position: absolute; top: 50%; + transform-origin: 100%; + transform:rotate(90deg); + transition-timing-function: cubic-bezier(0.1, 2.7,0.58,1); } diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html index d5fcc3a2ae..b43aceddcb 100644 --- a/03 - CSS Variables/index-START.html +++ b/03 - CSS Variables/index-START.html @@ -22,7 +22,21 @@

Update CSS Variables with JS

diff --git a/04 - Array Cardio Day 1/index.html b/04 - Array Cardio Day 1/index.html new file mode 100644 index 0000000000..31320153cf --- /dev/null +++ b/04 - Array Cardio Day 1/index.html @@ -0,0 +1,97 @@ + + + + + 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 88a4f1d1e2..08b3d0d03b 100644 --- a/05 - Flex Panel Gallery/index-START.html +++ b/05 - Flex Panel Gallery/index-START.html @@ -27,6 +27,7 @@ .panels { min-height: 100vh; overflow: hidden; + display: flex; } .panel { @@ -44,6 +45,11 @@ font-size: 20px; background-size: cover; background-position: center; + flex: 1; + justify-content: center; + align-items: center; + display: flex; + flex-direction: column; } .panel1 { background-image:url(https://source.unsplash.com/gYl-UtwNg_I/1500x1500); } @@ -57,8 +63,19 @@ 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 > *:last-child { transform: translateY(100%);} + .panel.open-active > *:first-child {transform: translateY(0);} + .panel.open-active > *:last-child {transform: translateY(0);} + + + .panel p { text-transform: uppercase; font-family: 'Amatic SC', cursive; @@ -72,6 +89,7 @@ .panel.open { font-size: 40px; + flex: 5; } @@ -106,6 +124,20 @@ diff --git a/06 - Type Ahead/index-START.html b/06 - Type Ahead/index-START.html index 5a9aa7e4e8..6f9120cd28 100644 --- a/06 - Type Ahead/index-START.html +++ b/06 - Type Ahead/index-START.html @@ -18,6 +18,49 @@ diff --git a/07 - Array Cardio Day 2/index-START.html b/07 - Array Cardio Day 2/index-START.html index 4ca34c7536..caf3c8b88d 100644 --- a/07 - Array Cardio Day 2/index-START.html +++ b/07 - Array Cardio Day 2/index-START.html @@ -27,15 +27,36 @@ // Some and Every Checks // Array.prototype.some() // is at least one person 19 or older? + + const isAdult = people.some((person => { + const currentYear = new Date().getFullYear(); + return currentYear - person.year >= 19; + })); + console.log({isAdult}); // Array.prototype.every() // is everyone 19 or older? + const allAdults = people.every((person => { + const currentYear = new Date().getFullYear(); + return currentYear - 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); + // comments.splice(index, 1); + console.log({index}); + const newComments = [ + ...comments.slice(0, index), + ...comments.slice(index+1) + ];