diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html index 4070d32767..3f057a85c9 100644 --- a/01 - JavaScript Drum Kit/index-START.html +++ b/01 - JavaScript Drum Kit/index-START.html @@ -59,6 +59,23 @@ diff --git a/02 - JS + CSS Clock/index-START.html b/02 - JS + CSS Clock/index-START.html index 259280d228..4d1fd6ba8c 100644 --- a/02 - JS + CSS Clock/index-START.html +++ b/02 - JS + CSS Clock/index-START.html @@ -61,12 +61,33 @@ background:black; position: absolute; top:50%; + transform-origin: 100%; + transition: transform 0.1s cubic-bezier(1, -0.03, 0.51, 1.6); } diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html index bf0f33e3ba..51c3563060 100644 --- a/03 - CSS Variables/index-START.html +++ b/03 - CSS Variables/index-START.html @@ -1,59 +1,88 @@ - - - - - Scoped CSS Variables and JS - - -

Update CSS Variables with JS

- -
- - - - - - - - -
- - - - - - - - - + + + + + + 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 089352c8a6..eaebb6cd3d 100644 --- a/04 - Array Cardio Day 1/index-START.html +++ b/04 - Array Cardio Day 1/index-START.html @@ -27,17 +27,35 @@ // Array.prototype.filter() // 1. Filter the list of inventors for those who were born in the 1500's + const filtered = inventors.filter( + inventor => + (inventor.year >= 1500 && inventor.year < 1600) || + (inventor.passed >= 1500 && inventor.passed < 1600) + ) + console.log('born in the 1500\'s', filtered); // Array.prototype.map() // 2. Give us an array of the inventory first and last names + console.log('first and last', inventors.map(inventor => inventor.first + ' ' + inventor.last)); + // Array.prototype.sort() // 3. Sort the inventors by birthdate, oldest to youngest + console.log('sorted by birthdate', inventors.sort( (a, b) => { + return b.year - a.year + } ).map(i=> i.first + " " + i.year)); // Array.prototype.reduce() // 4. How many years did all the inventors live? + console.log('lived ', inventors.reduce((acc, inv) => { + return acc + inv.passed - inv.year + }, 0)) + // 5. Sort the inventors by years lived + console.log('sorted by years lived', inventors.sort( (a, b) => { + return (b.passed - b.year) - (a.passed - a.year) + } ).map(i=> i.first + " " + (i.passed - i.year))); // 6. create a list of Boulevards in Paris that contain 'de' anywhere in the name // https://en.wikipedia.org/wiki/Category:Boulevards_in_Paris @@ -50,6 +68,11 @@ // Sum up the instances of each of these const data = ['car', 'car', 'truck', 'truck', 'bike', 'walk', 'car', 'van', 'bike', 'walk', 'car', 'van', 'car', 'truck' ]; + console.log(data.reduce((acc, current) => { + acc[current] = acc[current] ? acc[current] + 1 : 1 + return acc + }, {})); + diff --git a/05 - Flex Panel Gallery/index-START.html b/05 - Flex Panel Gallery/index-START.html index e1d643ad5c..11fc589c2d 100644 --- a/05 - Flex Panel Gallery/index-START.html +++ b/05 - Flex Panel Gallery/index-START.html @@ -24,9 +24,13 @@ .panels { min-height:100vh; overflow: hidden; + display: flex; } .panel { + display: flex; + flex-direction: column; + flex-grow: 1; background:#6B0F9C; box-shadow:inset 0 0 0 5px rgba(255,255,255,0.1); color:white; @@ -51,9 +55,14 @@ .panel5 { background-image:url(https://source.unsplash.com/3MNzGlQM7qs/1500x1500); } .panel > * { + display: flex; + align-items: center; + justify-content: center; + flex: 1 0 auto; margin:0; width: 100%; transition:transform 0.5s; + } .panel p { @@ -66,7 +75,24 @@ font-size: 4em; } + .panel p:first-child { + transform: translateY(-100%) + } + + .panel p:last-child { + transform: translateY(100%) + } + + .panel.open-active p:first-child { + transform: translateY(0) + } + + .panel.open-active p:last-child { + transform: translateY(0) + } + .panel.open { + flex-grow: 5; font-size:40px; } @@ -108,6 +134,21 @@ diff --git a/06 - Type Ahead/index-START.html b/06 - Type Ahead/index-START.html index 1436886918..3967d1cc43 100644 --- a/06 - Type Ahead/index-START.html +++ b/06 - Type Ahead/index-START.html @@ -1,22 +1,65 @@ - - - - - Type Ahead 👀 - - - - -
- - -
- - - + + + + + + Type Ahead 👀 + + + + + +
+ + +
+ + + +