From 59c7eab4a4dad152b843b2eeeeca3878454d0043 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Erik=20J=C3=B6nsson?= Date: Mon, 12 Dec 2016 20:11:14 -0500 Subject: [PATCH 1/8] complete first tutorial --- 01 - JavaScript Drum Kit/index.html | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/01 - JavaScript Drum Kit/index.html b/01 - JavaScript Drum Kit/index.html index 246639f990..edadbbb2d3 100644 --- a/01 - JavaScript Drum Kit/index.html +++ b/01 - JavaScript Drum Kit/index.html @@ -58,26 +58,26 @@ + From 9fdff11267f54a759171de9521f51f9a74fbcadf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Erik=20J=C3=B6nsson?= Date: Mon, 12 Dec 2016 23:56:58 -0500 Subject: [PATCH 2/8] play sound on click --- 01 - JavaScript Drum Kit/index.html | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/01 - JavaScript Drum Kit/index.html b/01 - JavaScript Drum Kit/index.html index edadbbb2d3..b8f3545645 100644 --- a/01 - JavaScript Drum Kit/index.html +++ b/01 - JavaScript Drum Kit/index.html @@ -58,9 +58,15 @@ + setInterval(setDate, 1000); + From 9d49d74c8873bb1c24f7c3b28de702d5636d8338 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Erik=20J=C3=B6nsson?= Date: Tue, 13 Dec 2016 00:26:44 -0500 Subject: [PATCH 5/8] change clock hand style --- 02 - JS + CSS Clock/index.html | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/02 - JS + CSS Clock/index.html b/02 - JS + CSS Clock/index.html index 2c7e0050a1..d330934b3e 100644 --- a/02 - JS + CSS Clock/index.html +++ b/02 - JS + CSS Clock/index.html @@ -67,6 +67,16 @@ transition-timing-function: cubic-bezier(0.32, 2.01, 0.58, 1); } + .hour-hand { + left: 25%; + transform-origin: 100%; + width:25%; + } + + .second-hand { + background: crimson; + } + From 60cab871e735213f9374d4e16e23a88de1bfbeb7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Erik=20J=C3=B6nsson?= Date: Thu, 15 Dec 2016 21:41:33 -0500 Subject: [PATCH 7/8] complete array cardio day 1 --- 04 - Array Cardio Day 1/index-START.html | 37 ++++++++++++++++++++++++ 1 file changed, 37 insertions(+) diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html index 4162bce339..38ea98f9cd 100644 --- a/04 - Array Cardio Day 1/index-START.html +++ b/04 - Array Cardio Day 1/index-START.html @@ -33,28 +33,65 @@ // Array.prototype.filter() // 1. Filter the list of inventors for those who were born in the 1500's + const bornIn50s = inventors.filter(inventor => inventor.year >= 1500 && inventor.year < 1600); + console.table(bornIn50s); // Array.prototype.map() // 2. Give us an array of the inventors' first and last names + const names = inventors.map(inventor => `${inventor.first} ${inventor.last}`); + console.log(names); // Array.prototype.sort() // 3. Sort the inventors by birthdate, oldest to youngest + const sortedInventors = inventors.sort((a, b) => a.year > b.year ? 1 : -1); + console.table(sortedInventors); // Array.prototype.reduce() // 4. How many years did all the inventors live? + const totalYears = inventors.reduce((total, inventor) => { + return total + (inventor.passed - inventor.year); + }, 0); + console.log(totalYears); // 5. Sort the inventors by years lived + const sortedOldest = inventors.sort((inventor1, inventor2) => { + const inventor1Age = inventor1.passed - inventor1.year; + const inventor2Age = inventor2.passed - inventor2.year; + return inventor1Age > inventor2Age ? -1 : 1; + }); + console.table(sortedOldest); // 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(boulevard => boulevard.includes('de')); // 7. sort Exercise // Sort the people alphabetically by last name + const alpha = people.sort((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 transporation = data.reduce((obj, item) => { + if (!obj[item]) { + obj[item] = 1; + } else { + obj[item]++; + } + return obj; + }, {}); + console.log(transporation); From 396bbd30a0dca83a63f493a4f42597927bfdd324 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Erik=20J=C3=B6nsson?= Date: Thu, 5 Jan 2017 00:08:34 -0500 Subject: [PATCH 8/8] finish flex panel gallery --- 05 - Flex Panel Gallery/index-START.html | 29 ++++++++++++++++++++++++ 1 file changed, 29 insertions(+) diff --git a/05 - Flex Panel Gallery/index-START.html b/05 - Flex Panel Gallery/index-START.html index e1d643ad5c..ea891012ca 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; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; } @@ -54,8 +60,17 @@ margin:0; width: 100%; transition:transform 0.5s; + flex: 1 0 auto; + display: flex; + align-items: center; + justify-content: 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 +82,7 @@ } .panel.open { + flex: 5; font-size:40px; } @@ -107,7 +123,20 @@