From 59826fa93f457ee7adebca17e7398f6902d26bce Mon Sep 17 00:00:00 2001 From: yvkschaefer Date: Thu, 8 Dec 2016 19:48:04 -0500 Subject: [PATCH 1/5] drum kit --- 01 - JavaScript Drum Kit/index.html | 33 +++++++++++++++++++++++------ 1 file changed, 26 insertions(+), 7 deletions(-) diff --git a/01 - JavaScript Drum Kit/index.html b/01 - JavaScript Drum Kit/index.html index a18f2bc2ca..79ffa0d0a9 100644 --- a/01 - JavaScript Drum Kit/index.html +++ b/01 - JavaScript Drum Kit/index.html @@ -59,24 +59,43 @@ From 751b641d494ee4cafbbbce4efd8dc6b70f19928f Mon Sep 17 00:00:00 2001 From: Kara Schaefer Date: Fri, 9 Dec 2016 16:39:38 -0500 Subject: [PATCH 2/5] clock --- 01 - JavaScript Drum Kit/style.css | 2 +- 02 - JS + CSS Clock/index-START.html | 35 ++++++++++++++++++++++++++++ 2 files changed, 36 insertions(+), 1 deletion(-) diff --git a/01 - JavaScript Drum Kit/style.css b/01 - JavaScript Drum Kit/style.css index 3e0a320b37..d44e657570 100644 --- a/01 - JavaScript Drum Kit/style.css +++ b/01 - JavaScript Drum Kit/style.css @@ -1,4 +1,4 @@ -html { +/*html {*/ font-size: 10px; background:url(http://i.imgur.com/b9r5sEL.jpg) bottom center; background-size: cover; diff --git a/02 - JS + CSS Clock/index-START.html b/02 - JS + CSS Clock/index-START.html index 259280d228..3e5f8013fb 100644 --- a/02 - JS + CSS Clock/index-START.html +++ b/02 - JS + CSS Clock/index-START.html @@ -61,13 +61,48 @@ background:black; position: absolute; top:50%; + transform-origin: 100%; + transform: rotate(90deg); + transition: all 0.05s; + transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1); + } + + .second-hand { + background:yellow; + } + + .min-hand { + background:blue; + } + + .hour-hand { + } From 2e6610994928c212943035265ea002479c13816b Mon Sep 17 00:00:00 2001 From: yvkschaefer Date: Fri, 6 Jan 2017 23:18:05 -0500 Subject: [PATCH 3/5] array methods --- 04 - Array Cardio Day 1/answers.js | 65 ++++++++++++++++++++++++++++++ 1 file changed, 65 insertions(+) create mode 100644 04 - Array Cardio Day 1/answers.js diff --git a/04 - Array Cardio Day 1/answers.js b/04 - Array Cardio Day 1/answers.js new file mode 100644 index 0000000000..170a3c86cb --- /dev/null +++ b/04 - Array Cardio Day 1/answers.js @@ -0,0 +1,65 @@ +const inventors = [ + { first: 'Albert', last: 'Einstein', year: 1879, passed: 1955 }, + { first: 'Isaac', last: 'Newton', year: 1643, passed: 1727 }, + { first: 'Galileo', last: 'Galilei', year: 1564, passed: 1642 }, + { first: 'Marie', last: 'Curie', year: 1867, passed: 1934 }, + { first: 'Johannes', last: 'Kepler', year: 1571, passed: 1630 }, + { first: 'Nicolaus', last: 'Copernicus', year: 1473, passed: 1543 }, + { first: 'Max', last: 'Planck', year: 1858, passed: 1947 }, +]; + +const flavours = ['Chocolate Chip', 'Kulfi', 'Caramel Praline', 'Chocolate', 'Burnt Caramel', 'Pistachio', 'Rose', 'Sweet Coconut', 'Lemon Cookie', 'Toffeeness', 'Toasted Almond', 'Black Raspberry Crunch', 'Chocolate Brownies', 'Pistachio Almond', 'Strawberry', 'Lavender Honey', 'Lychee', 'Peach', 'Black Walnut', 'Birthday Cake', 'Mexican Chocolate', 'Mocha Almond Fudge', 'Raspberry']; + +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']; + + +// 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 > 1499 && inventor.year < 1600); + +//console.log(fifteen); + +// Array.prototype.map() +// 2. Give us an array of the inventory first and last names + +const firstAndLast = inventors.map(inventor => `${inventor.first} ${inventor.last}`); + +// console.log(firstAndLast); + +// Array.prototype.sort() +// 3. Sort the inventors by birthdate, oldest to youngest + +const oldestToYoungest = inventors.sort((a, b) => a.year > b.year ? 1 : -1); + +// console.log(oldestToYoungest); + +// Array.prototype.reduce() +// 4. How many years did all the inventors live? + +const yearsLived = inventors.reduce((total, inventor) => { + return total += (inventor.passed - inventor.year); +}, 0) + +// console.log(yearsLived); + +// 5. Sort the inventors by years lived + +const oldest = inventors.sort(function(a, b) { + const lastGuy = a.passed - a.year; + const nextGuy = b.passed - b.year; + return lastGuy > nextGuy ? -1 : 1; +}) + +console.log(oldest); + +// 6. create a list of Boulevards in Paris that contain 'de' anywhere in the name +// https://en.wikipedia.org/wiki/Category:Boulevards_in_Paris + + +// 7. sort Exercise +// Sort the people alphabetically by last name + +// 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' ]; From 4e32d64da88a0ae45ce1165d7bb72350a7694b79 Mon Sep 17 00:00:00 2001 From: yvkschaefer Date: Sun, 8 Jan 2017 22:34:38 -0500 Subject: [PATCH 4/5] pogo stick --- 04 - Array Cardio Day 1/answers.js | 23 ++++++++++++++++++++++- 1 file changed, 22 insertions(+), 1 deletion(-) diff --git a/04 - Array Cardio Day 1/answers.js b/04 - Array Cardio Day 1/answers.js index 170a3c86cb..1e324c9a1b 100644 --- a/04 - Array Cardio Day 1/answers.js +++ b/04 - Array Cardio Day 1/answers.js @@ -57,9 +57,30 @@ console.log(oldest); // https://en.wikipedia.org/wiki/Category:Boulevards_in_Paris +//Array.from + // 7. sort Exercise // Sort the people alphabetically by last name +const alpha = people.sort(function(lastOne, nextOne) { + const [aLast, aFirst] = lastOne.split(', '); + const [bLast, bFirst] = nextOne.split(', '); + return aLast > bLast ? 1 : -1; +}); + +console.log(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 data = ['car', 'car', 'truck', 'truck', 'bike', 'walk', 'car', 'van', 'bike', 'walk', 'car', 'van', 'car', 'truck', 'pogostick' ]; + + +const transportation = data.reduce(function(obj, item) { + if(!obj[item]) { + obj[item] = 0; + } + obj[item]++; + return obj; +}, {}); + +console.log(transportation); From d03490202fce0191a939f3fd69a517ee261f12cf Mon Sep 17 00:00:00 2001 From: yvkschaefer Date: Mon, 9 Jan 2017 22:49:31 -0500 Subject: [PATCH 5/5] flex panel gallery --- 05 - Flex Panel Gallery/index-START.html | 31 ++++++++++++++++++++++++ 1 file changed, 31 insertions(+) diff --git a/05 - Flex Panel Gallery/index-START.html b/05 - Flex Panel Gallery/index-START.html index e1d643ad5c..f415356f4d 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; + align-items: center; + display: flex; + flex-direction: column; } @@ -54,8 +60,18 @@ 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.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; font-family: 'Amatic SC', cursive; @@ -67,6 +83,7 @@ } .panel.open { + flex: 5; font-size:40px; } @@ -107,6 +124,20 @@