diff --git a/01 - JavaScript Drum Kit/index-FINISHED.html b/01 - JavaScript Drum Kit/index-FINISHED.html deleted file mode 100644 index 1a16d0997c..0000000000 --- a/01 - JavaScript Drum Kit/index-FINISHED.html +++ /dev/null @@ -1,83 +0,0 @@ - - - - - JS Drum Kit - - - - - -
-
- A - clap -
-
- S - hihat -
-
- D - kick -
-
- F - openhat -
-
- G - boom -
-
- H - ride -
-
- J - snare -
-
- K - tom -
-
- L - tink -
-
- - - - - - - - - - - - - - - - diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html index 4070d32767..536da7b46d 100644 --- a/01 - JavaScript Drum Kit/index-START.html +++ b/01 - JavaScript Drum Kit/index-START.html @@ -59,6 +59,7 @@ diff --git a/01 - JavaScript Drum Kit/index.html b/01 - JavaScript Drum Kit/index.html index 246639f990..416f8322f9 100644 --- a/01 - JavaScript Drum Kit/index.html +++ b/01 - JavaScript Drum Kit/index.html @@ -59,25 +59,26 @@ + diff --git a/02 - JS + CSS Clock/index.html b/02 - JS + CSS Clock/index.html index d5c9ec9596..ee2a905f7f 100644 --- a/02 - JS + CSS Clock/index.html +++ b/02 - JS + CSS Clock/index.html @@ -63,34 +63,32 @@ top:50%; transform-origin: 100%; transform: rotate(90deg); - transition: all 0.05s; transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1); } - - + + diff --git a/03 - CSS Variables/index.html b/03 - CSS Variables/index.html new file mode 100644 index 0000000000..e50289a324 --- /dev/null +++ b/03 - CSS Variables/index.html @@ -0,0 +1,84 @@ + + + + + Scoped CSS Variables and JS + + +

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 6e28e357d0..07e507ac7b 100644 --- a/04 - Array Cardio Day 1/index-START.html +++ b/04 - Array Cardio Day 1/index-START.html @@ -27,7 +27,9 @@ // Array.prototype.filter() // 1. Filter the list of inventors for those who were born in the 1500's + const fifteen = inventors.filter(inventor => (inventor.year >= 1500 && inventor.year < 1600)) + console.table(fifteen); // Array.prototype.map() // 2. Give us an array of the inventory first and last names diff --git a/04 - Array Cardio Day 1/index.html b/04 - Array Cardio Day 1/index.html new file mode 100644 index 0000000000..118035ced3 --- /dev/null +++ b/04 - Array Cardio Day 1/index.html @@ -0,0 +1,96 @@ + + + + + Array Cardio 💪 + + + + + diff --git a/05 - Flex Panel Gallery/index-FINISHED.html b/05 - Flex Panel Gallery/index.html similarity index 93% rename from 05 - Flex Panel Gallery/index-FINISHED.html rename to 05 - Flex Panel Gallery/index.html index 243f8a221d..2267f03ffa 100644 --- a/05 - Flex Panel Gallery/index-FINISHED.html +++ b/05 - Flex Panel Gallery/index.html @@ -43,6 +43,7 @@ background-size:cover; background-position:center; flex: 1; + align-items: center; justify-content: center; display: flex; flex-direction: column; @@ -55,21 +56,20 @@ .panel4 { background-image:url(https://source.unsplash.com/ITjiVXcwVng/1500x1500); } .panel5 { background-image:url(https://source.unsplash.com/3MNzGlQM7qs/1500x1500); } - /* Flex Items */ +/*flex children*/ .panel > * { margin:0; width: 100%; transition:transform 0.5s; flex: 1 0 auto; - display:flex; + 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 > *: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; @@ -82,8 +82,8 @@ } .panel.open { - flex: 5; font-size:40px; + flex: 5; } .cta { @@ -124,22 +124,21 @@ + + +home