From b6e1c144932e6282dc5e104c8ec9528b3c2e3231 Mon Sep 17 00:00:00 2001 From: Claire Dranginis Date: Sat, 10 Dec 2016 17:21:16 -0500 Subject: [PATCH 1/9] done with drums --- 01 - JavaScript Drum Kit/index-START.html | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html index 4070d32767..f2f3503312 100644 --- a/01 - JavaScript Drum Kit/index-START.html +++ b/01 - JavaScript Drum Kit/index-START.html @@ -58,6 +58,25 @@ From 68c0064cf386c99093674419777a801e8ecbd17d Mon Sep 17 00:00:00 2001 From: Claire Dranginis Date: Sat, 10 Dec 2016 17:27:49 -0500 Subject: [PATCH 2/9] test --- 01 - JavaScript Drum Kit/index-START.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html index f2f3503312..6a961d1e0a 100644 --- a/01 - JavaScript Drum Kit/index-START.html +++ b/01 - JavaScript Drum Kit/index-START.html @@ -6,7 +6,7 @@ - +
From eb88dc8e266e5eb8ef6b544ed705b7065440726f Mon Sep 17 00:00:00 2001 From: Claire Dranginis Date: Sat, 10 Dec 2016 17:29:01 -0500 Subject: [PATCH 3/9] another test --- 01 - JavaScript Drum Kit/index-START.html | 1 - 1 file changed, 1 deletion(-) diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html index 6a961d1e0a..1022d24fc4 100644 --- a/01 - JavaScript Drum Kit/index-START.html +++ b/01 - JavaScript Drum Kit/index-START.html @@ -6,7 +6,6 @@ -
From c8f6841800ffa077b70a15823dee25358293ce6f Mon Sep 17 00:00:00 2001 From: Claire Dranginis Date: Mon, 12 Dec 2016 16:42:43 -0500 Subject: [PATCH 4/9] clock done --- 02 - JS + CSS Clock/index-START.html | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) diff --git a/02 - JS + CSS Clock/index-START.html b/02 - JS + CSS Clock/index-START.html index 2712384201..4c2e25f280 100644 --- a/02 - JS + CSS Clock/index-START.html +++ b/02 - JS + CSS Clock/index-START.html @@ -61,12 +61,34 @@ background:black; position: absolute; top:50%; + transform-origin: 100%; + transform: rotate(90deg); + transition: all 0.05s; + transition-timing-function: cubic-bezier(0.14, 2.49, 1, 1.02); } From 20c05b219479b88983f4ef26324ce01bf9994756 Mon Sep 17 00:00:00 2001 From: Claire Dranginis Date: Mon, 12 Dec 2016 22:48:27 -0500 Subject: [PATCH 5/9] done with css variables --- 03 - CSS Variables/index-START.html | 25 +++++++++++++++++++++++++ 1 file changed, 25 insertions(+) diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html index bf0f33e3ba..c181ae487f 100644 --- a/03 - CSS Variables/index-START.html +++ b/03 - CSS Variables/index-START.html @@ -22,6 +22,22 @@

Update CSS Variables with JS

From 99c62d7a75eb03665f2c7fc2435dee88db5c15dd Mon Sep 17 00:00:00 2001 From: Claire Dranginis Date: Mon, 19 Dec 2016 22:49:18 -0500 Subject: [PATCH 6/9] done with array cardio --- 04 - Array Cardio Day 1/index-START.html | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html index 6e28e357d0..3d556a6d52 100644 --- a/04 - Array Cardio Day 1/index-START.html +++ b/04 - Array Cardio Day 1/index-START.html @@ -27,28 +27,52 @@ // Array.prototype.filter() // 1. Filter the list of inventors for those who were born in the 1500's + const fifteenHundredsInventors = inventors.filter(inventor => inventor.year > 1499 && inventor.year < 1600) + console.table(fifteenHundredsInventors); + // Array.prototype.map() // 2. Give us an array of the inventory first and last names + const firstLastArray = inventors.map(inventor => `${inventor.first} ${inventor.last}`); + console.log(firstLastArray); // Array.prototype.sort() // 3. Sort the inventors by birthdate, oldest to youngest + const oldToYoung = inventors.sort((a, b) => a.year < b.year ? -1 : 1) + console.table(oldToYoung); // Array.prototype.reduce() // 4. How many years did all the inventors live? + const totalLife = inventors.reduce((prev, curr) => (prev + (curr.passed - curr.year)), 0 ) + console.log(totalLife); // 5. Sort the inventors by years lived + const sortByAged = inventors.sort((a, b) => a.passed - a.year > b.passed - b.year ? -1 : 1); + console.table(sortByAged); // 6. create a list of Boulevards in Paris that contain 'de' anywhere in the name // https://en.wikipedia.org/wiki/Category:Boulevards_in_Paris + Array.from(document.querySelectorAll('.mw-category-group ul li a')).map(link => link.textContent).filter(boulevard => boulevard.includes('de')) // 7. sort Exercise // Sort the people alphabetically by last name + const alphaPeople = people.sort((a, b) => a.split(',')[0] < b.split(',')[0] ? -1 : 1); + console.log(alphaPeople); // 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 transportation = data.reduce((obj, item) => { + if (!obj[item]) { + obj[item] = 0; + } + obj[item]++; + return obj; + }, {}); + + console.log(transportation); + From 8fca8a2bed9dcd80125f0d22c15be17ca08cf3b3 Mon Sep 17 00:00:00 2001 From: Claire Dranginis Date: Mon, 19 Dec 2016 23:47:07 -0500 Subject: [PATCH 7/9] flex done --- 05 - Flex Panel Gallery/index-START.html | 40 ++++++++++++++++++++++++ 1 file changed, 40 insertions(+) diff --git a/05 - Flex Panel Gallery/index-START.html b/05 - Flex Panel Gallery/index-START.html index e1d643ad5c..ddd0fcd946 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,6 +60,25 @@ 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 { @@ -68,6 +93,7 @@ .panel.open { font-size:40px; + flex: 5; } .cta { @@ -107,7 +133,21 @@
From f6a4f88d413296729f40485a02e39d73b88107db Mon Sep 17 00:00:00 2001 From: Claire Dranginis Date: Tue, 20 Dec 2016 00:12:05 -0500 Subject: [PATCH 8/9] typeahead done --- 06 - Type Ahead/index-START.html | 41 ++++++++++++++++++++++++++++++++ 1 file changed, 41 insertions(+) diff --git a/06 - Type Ahead/index-START.html b/06 - Type Ahead/index-START.html index 1436886918..b7dfc86a54 100644 --- a/06 - Type Ahead/index-START.html +++ b/06 - Type Ahead/index-START.html @@ -17,6 +17,47 @@ From 7730af6a752e58e09b709ed2f172836710894de6 Mon Sep 17 00:00:00 2001 From: Claire Dranginis Date: Tue, 20 Dec 2016 09:41:02 -0500 Subject: [PATCH 9/9] array cardio and canvas done --- 07 - Array Cardio Day 2/index-START.html | 32 ++++++------- 08 - Fun with HTML5 Canvas/index-START.html | 50 +++++++++++++++++++++ 2 files changed, 67 insertions(+), 15 deletions(-) diff --git a/07 - Array Cardio Day 2/index-START.html b/07 - Array Cardio Day 2/index-START.html index bdf6c44415..093f8ead26 100644 --- a/07 - Array Cardio Day 2/index-START.html +++ b/07 - Array Cardio Day 2/index-START.html @@ -25,42 +25,44 @@ // Some and Every Checks // Array.prototype.some() // is at least one person 19? - // const isAdult = people.some(function(person) { - // const currentYear = (new Date()).getFullYear(); - // if(currentYear - person.year >= 19) { - // return true; - // } - // }); - - const isAdult = people.some(person => ((new Date()).getFullYear()) - person.year >= 19); - + const isAdult = people.some(person => { + const currentYear = new Date().getFullYear(); + return currentYear - person.year >= 19; + }) console.log({isAdult}); + // Array.prototype.every() // is everyone 19? + const areAllAdult = people.every(person => { + const currentYear = new Date().getFullYear(); + return currentYear - person.year >= 19; + }) + console.log({areAllAdult}); - const allAdults = people.every(person => ((new Date()).getFullYear()) - person.year >= 19); - console.log({allAdults}); // Array.prototype.find() // Find is like filter, but instead returns just the one you are looking for // find the comment with the ID of 823423 + const comment = comments.find(comment => comment.id === 823423); + console.log(comment); - const comment = comments.find(comment => comment.id === 823423); - console.log(comment); // Array.prototype.findIndex() // Find the comment with this ID // delete the comment with the ID of 823423 const index = comments.findIndex(comment => comment.id === 823423); - console.log(index); // comments.splice(index, 1); + // comments.splice(index, 1); + // console.table(comments); const newComments = [ ...comments.slice(0, index), ...comments.slice(index + 1) - ]; + ] + console.table(newComments); + diff --git a/08 - Fun with HTML5 Canvas/index-START.html b/08 - Fun with HTML5 Canvas/index-START.html index 37c148df07..2d6e4fc908 100644 --- a/08 - Fun with HTML5 Canvas/index-START.html +++ b/08 - Fun with HTML5 Canvas/index-START.html @@ -7,6 +7,56 @@