Document

From 0828ffeec71fb03c0d7be49d4a26c30eb539456e Mon Sep 17 00:00:00 2001 From: Richard Hart Date: Fri, 9 Dec 2016 12:18:38 -0500 Subject: [PATCH 01/11] Finished day 1. --- 01 - JavaScript Drum Kit/index-START.html | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html index 4070d32767..a06a614311 100644 --- a/01 - JavaScript Drum Kit/index-START.html +++ b/01 - JavaScript Drum Kit/index-START.html @@ -59,6 +59,27 @@ From 4b1342737f0ca4f1397301f5d3503155ed457eaf Mon Sep 17 00:00:00 2001 From: Richard Hart Date: Sun, 11 Dec 2016 21:13:20 -0500 Subject: [PATCH 02/11] Day 2 - clock exercise. --- 02 - JS + CSS Clock/index-START.html | 137 ++++++++++++++++----------- 1 file changed, 83 insertions(+), 54 deletions(-) diff --git a/02 - JS + CSS Clock/index-START.html b/02 - JS + CSS Clock/index-START.html index 240705d8fe..383d5afd11 100644 --- a/02 - JS + CSS Clock/index-START.html +++ b/02 - JS + CSS Clock/index-START.html @@ -1,73 +1,102 @@ - - - Document - - - - -

- - - + + + - + + From 9bf4025d876fa80d6a8fe04a4e0b213969284da1 Mon Sep 17 00:00:00 2001 From: Richard Hart Date: Sun, 11 Dec 2016 21:14:58 -0500 Subject: [PATCH 03/11] Formatting. --- 02 - JS + CSS Clock/index-START.html | 48 ++++++++++++++-------------- 1 file changed, 24 insertions(+), 24 deletions(-) diff --git a/02 - JS + CSS Clock/index-START.html b/02 - JS + CSS Clock/index-START.html index 383d5afd11..3ad5ced2b7 100644 --- a/02 - JS + CSS Clock/index-START.html +++ b/02 - JS + CSS Clock/index-START.html @@ -63,35 +63,35 @@ top:50%; transform-origin:100%; transform: rotate(90deg) - transition: all 0.05s; - transiion-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1) + transition: all 0.05s; + transiion-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1) } - - + + + Scoped CSS Variables and JS + + +

Update CSS Variables with JS

+ +

+ Spacing: + + + Blur: + + + Base Color + +

+ +

+ + + + + + From 058534f43ed8bdcc5855e142980b4607deb46f7f Mon Sep 17 00:00:00 2001 From: Richard Hart Date: Mon, 12 Dec 2016 13:42:03 -0500 Subject: [PATCH 05/11] Day 4 exercise. --- 04 - Array Cardio Day 1/index-START.html | 113 +++++++++++++++-------- 1 file changed, 75 insertions(+), 38 deletions(-) diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html index 6e28e357d0..d17364595d 100644 --- a/04 - Array Cardio Day 1/index-START.html +++ b/04 - Array Cardio Day 1/index-START.html @@ -1,55 +1,92 @@ - - - Array Cardio 💪 - - - - + +// 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); + +// 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 transportation = data.reduce(function(obj, item) { + if(!obj[item]) { + obj[item] = 0; + } + + obj[item]++; + return obj; +}, {}); +console.log(transportation); + + From 4c2486477080151fcc10c4ab9cca2d138baeba7f Mon Sep 17 00:00:00 2001 From: Richard Hart Date: Mon, 12 Dec 2016 14:05:24 -0500 Subject: [PATCH 06/11] Day 5. --- 05 - Flex Panel Gallery/index-START.html | 28 ++++++++++++++++++++++++ 1 file changed, 28 insertions(+) diff --git a/05 - Flex Panel Gallery/index-START.html b/05 - Flex Panel Gallery/index-START.html index e1d643ad5c..fd614656e6 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,17 @@ 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; @@ -68,6 +83,7 @@ .panel.open { font-size:40px; + flex: 5; } .cta { @@ -107,6 +123,18 @@ From 14fa4d8358f389fbba5ef117b074fd8efb25f9e8 Mon Sep 17 00:00:00 2001 From: Richard Hart Date: Mon, 12 Dec 2016 17:46:24 -0500 Subject: [PATCH 07/11] Day 6. --- 06 - Type Ahead/index-START.html | 34 ++++++++++++++++++++++++++++++++ 1 file changed, 34 insertions(+) diff --git a/06 - Type Ahead/index-START.html b/06 - Type Ahead/index-START.html index 1436886918..4e4f9e32dc 100644 --- a/06 - Type Ahead/index-START.html +++ b/06 - Type Ahead/index-START.html @@ -17,6 +17,40 @@ From 4ffd2491d7fe840c32e2d34c990608a0d060c644 Mon Sep 17 00:00:00 2001 From: Richard Hart Date: Tue, 13 Dec 2016 15:29:31 -0500 Subject: [PATCH 08/11] Day 8 --- 08 - Fun with HTML5 Canvas/index-START.html | 46 +++++++++++++++++++++ 1 file changed, 46 insertions(+) diff --git a/08 - Fun with HTML5 Canvas/index-START.html b/08 - Fun with HTML5 Canvas/index-START.html index 37c148df07..db80c7826f 100644 --- a/08 - Fun with HTML5 Canvas/index-START.html +++ b/08 - Fun with HTML5 Canvas/index-START.html @@ -7,6 +7,52 @@