JS + CSS Clock

- A +

+ a clap

- S +

+ o hihat

- D +

+ e kick

- F +

+ u openhat

- G +

+ h boom

- H +

+ t ride

- J +

+ n snare

- K +

+ s tom

- L +

+ d tink

diff --git a/01 - JavaScript Drum Kit/style.css b/01 - JavaScript Drum Kit/style.css index 075578c930..1ff1151058 100644 --- a/01 - JavaScript Drum Kit/style.css +++ b/01 - JavaScript Drum Kit/style.css @@ -15,6 +15,8 @@ body,html { min-height: 100vh; align-items: center; justify-content: center; + flex-wrap: wrap; + align-content: center; } .key { diff --git a/02 - JS and CSS Clock/index-START.html b/02 - JS and CSS Clock/index-START.html index ee7eaefb1f..89268e42be 100644 --- a/02 - JS and CSS Clock/index-START.html +++ b/02 - JS and CSS Clock/index-START.html @@ -2,7 +2,7 @@ - JS + CSS Clock + JS + oooo CSS Clock @@ -62,12 +62,45 @@ background:black; position: absolute; top:50%; + transform: rotate(0deg); + transform-origin: 100%; + transition: all 0.5s; + + transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1); + + } + + .second-hand { + height:2px; } + .hour-hand { + height:12px; + } + + diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html index 8a4f0d556e..bf62fb4e28 100644 --- a/03 - CSS Variables/index-START.html +++ b/03 - CSS Variables/index-START.html @@ -15,13 +15,19 @@

Update CSS Variables with JS

Base Color - +

diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html index eec0ffc31d..bb00653b7c 100644 --- a/04 - Array Cardio Day 1/index-START.html +++ b/04 - Array Cardio Day 1/index-START.html @@ -29,30 +29,58 @@ const people = ['Beck, Glenn', 'Becker, Carl', 'Beckett, Samuel', 'Beddoes, Mick', 'Beecher, Henry', 'Beethoven, Ludwig', 'Begin, Menachem', 'Belloc, Hilaire', 'Bellow, Saul', 'Benchley, Robert', 'Benenson, Peter', 'Ben-Gurion, David', 'Benjamin, Walter', 'Benn, Tony', 'Bennington, Chester', 'Benson, Leana', 'Bent, Silas', 'Bentsen, Lloyd', 'Berger, Ric', 'Bergman, Ingmar', 'Berio, Luciano', 'Berle, Milton', 'Berlin, Irving', 'Berne, Eric', 'Bernhard, Sandra', 'Berra, Yogi', 'Berry, Halle', 'Berry, Wendell', 'Bethea, Erin', 'Bevan, Aneurin', 'Bevel, Ken', 'Biden, Joseph', 'Bierce, Ambrose', 'Biko, Steve', 'Billings, Josh', 'Biondo, Frank', 'Birrell, Augustine', 'Black, Elk', 'Blair, Robert', 'Blair, Tony', 'Blake, William']; + const yearsLived = i => i.passed - i.year; + // Array.prototype.filter() // 1. Filter the list of inventors for those who were born in the 1500's + console.log( inventors.filter( i => i.year > 1500 && i.year < 1600) ); // Array.prototype.map() // 2. Give us an array of the inventors' first and last names + console.log( inventors.map( i => [i.first, i.last])); + // Array.prototype.sort() // 3. Sort the inventors by birthdate, oldest to youngest + console.log( inventors.sort( (a,b) => a.year - b.year )); + // Array.prototype.reduce() // 4. How many years did all the inventors live? + console.log( inventors.reduce( (acc, cur) => acc + yearsLived(cur), 0)); // 5. Sort the inventors by years lived + console.table( inventors + .sort((a,b) => yearsLived(b) - yearsLived(a)) + .map( i => [yearsLived(i), i.first, i.last].join(' ')) + ) // 6. create a list of Boulevards in Paris that contain 'de' anywhere in the name // https://en.wikipedia.org/wiki/Category:Boulevards_in_Paris + // im skipping this; well understood - + const extractNameComponents = name => { + const [last, first] = name.split(','); + return { last, first }; + } // 7. sort Exercise // Sort the people alphabetically by last name + console.table( people + .map(extractNameComponents) + .sort( (a, b) => a.last > b.last ? 1 : -1) + ) + // 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 data = ['car', 'car', 'truck', 'truck', 'bike', 'walk', 'car', 'van', 'bike', 'walk', 'car', 'van', 'car', 'truck', 'moped' ]; + const counts = data.reduce( (acc, cur) => + // clone the accumulator so we avoid mutating the value + Object.assign({}, acc, { + [cur]: acc[cur] ? acc[cur] + 1 : 1 + }), {}); + + console.log( counts ); diff --git a/05 - Flex Panel Gallery/index-START.html b/05 - Flex Panel Gallery/index-START.html index c6509bed02..ff7e66f01b 100644 --- a/05 - Flex Panel Gallery/index-START.html +++ b/05 - Flex Panel Gallery/index-START.html @@ -24,14 +24,19 @@ .panels { min-height:100vh; overflow: hidden; + display: flex; } .panel { + flex: 1; + display: flex; + flex-direction: column; + justify-content: center; + background:#6B0F9C; box-shadow:inset 0 0 0 5px rgba(255,255,255,0.1); color:white; text-align: center; - align-items:center; /* Safari transitionend event.propertyName === flex */ /* Chrome + FF transitionend event.propertyName === flex-grow */ transition: @@ -51,6 +56,10 @@ .panel5 { background-image:url(https://source.unsplash.com/3MNzGlQM7qs/1500x1500); } .panel > * { + flex: 1 0 auto; + display: flex; + justify-content: center; + align-items: center; margin:0; width: 100%; transition:transform 0.5s; @@ -61,13 +70,29 @@ font-family: 'Amatic SC', cursive; text-shadow:0 0 4px rgba(0, 0, 0, 0.72), 0 0 14px rgba(0, 0, 0, 0.45); font-size: 2em; + transition:transform 0.5s; + } + + .panel :first-child { + transform: translateY(-100%); } + + .panel.open.active :first-child, + .panel.open.active :last-child { + transform: translateY(0%); + } + + .panel :last-child { + transform: translateY(100%); + } + .panel p:nth-child(2) { font-size: 4em; } .panel.open { font-size:40px; + flex: 5; } @@ -103,6 +128,21 @@ diff --git a/08 - Fun with HTML5 Canvas/index-START.html b/08 - Fun with HTML5 Canvas/index-START.html index 37c148df07..7d6d7bb29c 100644 --- a/08 - Fun with HTML5 Canvas/index-START.html +++ b/08 - Fun with HTML5 Canvas/index-START.html @@ -7,6 +7,51 @@