diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html index 4070d32767..e65c38d429 100644 --- a/01 - JavaScript Drum Kit/index-START.html +++ b/01 - JavaScript Drum Kit/index-START.html @@ -58,6 +58,15 @@ diff --git a/02 - JS + CSS Clock/index-START.html b/02 - JS + CSS Clock/index-START.html index 2712384201..e2099d5807 100644 --- a/02 - JS + CSS Clock/index-START.html +++ b/02 - JS + CSS Clock/index-START.html @@ -1,10 +1,4 @@ - - - - - JS + CSS Clock - - +.
@@ -61,12 +55,33 @@ background:black; position: absolute; top:50%; + transform-origin: 100%; + transform: rotate(90deg); + transform: all 0.05s; + transition-timing-function: cubic-bezier(.0, 2.7, .58, 1); } diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html index 6e28e357d0..333e3c250a 100644 --- a/04 - Array Cardio Day 1/index-START.html +++ b/04 - Array Cardio Day 1/index-START.html @@ -30,26 +30,55 @@ // Array.prototype.map() // 2. Give us an array of the inventory first and last names + const theMap = inventors.map((item) => { + return `${item.first}${item.last}` + }) + console.log('theMap ', theMap) // Array.prototype.sort() // 3. Sort the inventors by birthdate, oldest to youngest + const theSort = inventors.sort((a, b) => { + a.year > b.year ? 1 : -1 + }, 0) + console.log('theSort', theSort) // Array.prototype.reduce() // 4. How many years did all the inventors live? - + const theReduce = inventors.reduce((total, current) => { + return total + (current.passed - current.year) + }, 0) + console.log('theReduce', theReduce) // 5. Sort the inventors by years lived // 6. create a list of Boulevards in Paris that contain 'de' anywhere in the name // https://en.wikipedia.org/wiki/Category:Boulevards_in_Paris - + // const category = document.querySelector('.mw-category') + // const links = Array.from(category.querySelectorAll('a')) + // const de = links + // .map(link => link.textContent) + // .filter(streetName => streetName.includes('de')) + // console.log('de', de) // 7. sort Exercise // Sort the people alphabetically by last name - + const alpha = people.sort((a,b ) => { + const [aLast, aFirst] = a.split(', ') + const [bLast, bFirst] = b.split(', ') + return aLast > bLast ? 1 : -1 + }) + console.log('alpha', alpha) // 8. Reduce Exercise // Sum up the instances of each of these const data = ['car', 'car', 'truck', 'truck', 'bike', 'walk', 'car', 'van', 'bike', 'walk', 'car', 'van', 'car', 'truck' ]; + const trans = data.reduce((sum, curr) => { + if(!sum[curr]) { + sum[curr] = 0 + } + sum[curr]++ + return sum + }, {}) + console.log(trans) diff --git a/05 - Flex Panel Gallery/index-START.html b/05 - Flex Panel Gallery/index-START.html index e1d643ad5c..665aa26868 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,11 @@ font-size: 20px; background-size:cover; background-position:center; + flex: 1; + justify-content: center; + display: flex; + flex-direction: column; + text-align: center; } @@ -54,6 +60,26 @@ margin:0; width: 100%; transition:transform 0.5s; + border: 1px solid red; + 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 { @@ -68,6 +94,7 @@ .panel.open { font-size:40px; + flex: 5; } .cta { @@ -107,6 +134,22 @@