From 1dfd408263fb764f632685f44500ab5fefde8951 Mon Sep 17 00:00:00 2001 From: Omega Date: Wed, 27 Dec 2017 12:43:24 -0600 Subject: [PATCH 1/8] Audio plays and keys selected --- 01 - JavaScript Drum Kit/index-START.html | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html index 4070d32767..dce27276c2 100644 --- a/01 - JavaScript Drum Kit/index-START.html +++ b/01 - JavaScript Drum Kit/index-START.html @@ -58,7 +58,17 @@ From 6ce920f2be8231718f2c551893c635bfd214c3c6 Mon Sep 17 00:00:00 2001 From: Omega Date: Wed, 27 Dec 2017 13:11:27 -0600 Subject: [PATCH 2/8] Keys style transition removed at the end --- 01 - JavaScript Drum Kit/index-START.html | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html index dce27276c2..cf71e86b1c 100644 --- a/01 - JavaScript Drum Kit/index-START.html +++ b/01 - JavaScript Drum Kit/index-START.html @@ -59,16 +59,22 @@ From 9dac0ea47ef870306a5f7c59909727602ed5556e Mon Sep 17 00:00:00 2001 From: Omega Date: Wed, 27 Dec 2017 17:02:31 -0600 Subject: [PATCH 3/8] Clock working --- 02 - JS and CSS Clock/index-START.html | 100 +++++++++++++++---------- 1 file changed, 61 insertions(+), 39 deletions(-) diff --git a/02 - JS and CSS Clock/index-START.html b/02 - JS and CSS Clock/index-START.html index ee7eaefb1f..21607eb175 100644 --- a/02 - JS and CSS Clock/index-START.html +++ b/02 - JS and CSS Clock/index-START.html @@ -1,74 +1,96 @@ - - JS + CSS Clock + + JS + CSS Clock -
-
+
+
-
+
- + - + const secondsDegrees = ((seconds / 60) * 360) + 90; + const minDegrees = ((minutes / 60) * 360) + 90; + const hourDegrees = ((hours / 12) * 360) + 90; + + secondHand.style.transform = `rotate(${secondsDegrees}deg)`; + minHand.style.transform = `rotate(${minDegrees}deg)`; + hourHand.style.transform = `rotate(${hourDegrees}deg)`; + }; + + setInterval(setDate, 1000); + + From 8213492b7248b4a078cf3a1e1c6bc1fc823660bd Mon Sep 17 00:00:00 2001 From: Omega Date: Thu, 28 Dec 2017 13:13:54 -0600 Subject: [PATCH 4/8] Update CSS variables with Javascript --- 03 - CSS Variables/index-START.html | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html index 8a4f0d556e..20722636a8 100644 --- a/03 - CSS Variables/index-START.html +++ b/03 - CSS Variables/index-START.html @@ -25,6 +25,20 @@

Update CSS Variables with JS

/* misc styles, nothing to do with CSS variables */ + :root { + --base: #682880; + --blur: 20px; + --spacing: 30px; + } + + img { + padding: var(--spacing); + filter: blur(var(--blur)); + background: var(--base); + } + .hl { + color: var(--base); + } body { text-align: center; @@ -45,6 +59,15 @@

Update CSS Variables with JS

From 0faee84f0d33978843d41464b62a0c3ee5b20b81 Mon Sep 17 00:00:00 2001 From: Omega Date: Sat, 30 Dec 2017 14:08:44 -0600 Subject: [PATCH 5/8] Array Cardio --- 04 - Array Cardio Day 1/index-FINISHED.html | 62 +++++++++---------- 04 - Array Cardio Day 1/index-START.html | 68 +++++++++++++++------ 2 files changed, 80 insertions(+), 50 deletions(-) diff --git a/04 - Array Cardio Day 1/index-FINISHED.html b/04 - Array Cardio Day 1/index-FINISHED.html index ede883f1f9..1970750626 100644 --- a/04 - Array Cardio Day 1/index-FINISHED.html +++ b/04 - Array Cardio Day 1/index-FINISHED.html @@ -1,30 +1,30 @@ - - Array Cardio 💪 + + Array Cardio 💪 -

Psst: have a look at the JavaScript Console 💁

- + diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html index eec0ffc31d..8333434c7a 100644 --- a/04 - Array Cardio Day 1/index-START.html +++ b/04 - Array Cardio Day 1/index-START.html @@ -1,59 +1,89 @@ - - Array Cardio 💪 + + Array Cardio 💪 -

Psst: have a look at the JavaScript Console 💁

- + From 54b810a545af14cd98796846f38b0135a0db667d Mon Sep 17 00:00:00 2001 From: Omega Date: Thu, 18 Jan 2018 12:08:00 -0600 Subject: [PATCH 6/8] Flex Panel Gallery Done --- 05 - Flex Panel Gallery/index-FINISHED.html | 186 +++++++++++--------- 05 - Flex Panel Gallery/index-START.html | 173 +++++++++++------- 2 files changed, 219 insertions(+), 140 deletions(-) diff --git a/05 - Flex Panel Gallery/index-FINISHED.html b/05 - Flex Panel Gallery/index-FINISHED.html index f703fed6ae..338f4890e9 100644 --- a/05 - Flex Panel Gallery/index-FINISHED.html +++ b/05 - Flex Panel Gallery/index-FINISHED.html @@ -1,140 +1,166 @@ - - Flex Panels 💪 - + + Flex Panels 💪 + - + -
+
-

Hey

-

Let's

-

Dance

+

Hey

+

Let's

+

Dance

-

Give

-

Take

-

Receive

+

Give

+

Take

+

Receive

-

Experience

-

It

-

Today

+

Experience

+

It

+

Today

-

Give

-

All

-

You can

+

Give

+

All

+

You can

-

Life

-

In

-

Motion

+

Life

+

In

+

Motion

-
+
- + diff --git a/05 - Flex Panel Gallery/index-START.html b/05 - Flex Panel Gallery/index-START.html index c6509bed02..6852ecac49 100644 --- a/05 - Flex Panel Gallery/index-START.html +++ b/05 - Flex Panel Gallery/index-START.html @@ -1,110 +1,163 @@ - - Flex Panels 💪 - + + Flex Panels 💪 + - + -
+
-

Hey

-

Let's

-

Dance

+

Hey

+

Let's

+

Dance

-

Give

-

Take

-

Receive

+

Give

+

Take

+

Receive

-

Experience

-

It

-

Today

+

Experience

+

It

+

Today

-

Give

-

All

-

You can

+

Give

+

All

+

You can

-

Life

-

In

-

Motion

+

Life

+

In

+

Motion

-
+
- + function toggleOpen() { + this.classList.toggle('open'); + } + + function toogleActive(e) { + if(e.propertyName.includes('flex')) { + this.classList.toggle('open-active'); + } + } + panels.forEach(panel => panel.addEventListener('click', toggleOpen)); + panels.forEach(panel => panel.addEventListener('transitionend', toogleActive)); + From 79df17502d0c79487ab1fd0b1935cc3b05cbab24 Mon Sep 17 00:00:00 2001 From: Omega Date: Sat, 20 Jan 2018 11:11:32 -0600 Subject: [PATCH 7/8] Type Ahead done --- 06 - Type Ahead/index-FINISHED.html | 82 ++++++++--------- 06 - Type Ahead/index-START.html | 61 +++++++++++-- 06 - Type Ahead/style.css | 131 ++++++++++++++-------------- 3 files changed, 160 insertions(+), 114 deletions(-) diff --git a/06 - Type Ahead/index-FINISHED.html b/06 - Type Ahead/index-FINISHED.html index 5902b43936..722324c991 100644 --- a/06 - Type Ahead/index-FINISHED.html +++ b/06 - Type Ahead/index-FINISHED.html @@ -1,61 +1,61 @@ - - Type Ahead 👀 - + + Type Ahead 👀 + -
+
    -
  • Filter for a city
    • -
  • or a state
    • +
  • Filter for a city
    • +
  • or a state
-
+ - + diff --git a/06 - Type Ahead/index-START.html b/06 - Type Ahead/index-START.html index 1436886918..5b3dcb0d8a 100644 --- a/06 - Type Ahead/index-START.html +++ b/06 - Type Ahead/index-START.html @@ -1,22 +1,65 @@ - - Type Ahead 👀 - + + Type Ahead 👀 + -
+
    -
  • Filter for a city
    • -
  • or a state
    • +
  • Filter for a city
    • +
  • or a state
-
+ - + diff --git a/06 - Type Ahead/style.css b/06 - Type Ahead/style.css index 65b3164ea7..e9689f4627 100644 --- a/06 - Type Ahead/style.css +++ b/06 - Type Ahead/style.css @@ -1,71 +1,74 @@ - html { - box-sizing: border-box; - background:#ffc600; - font-family:'helvetica neue'; - font-size: 20px; - font-weight: 200; - } - *, *:before, *:after { - box-sizing: inherit; - } - input { - width: 100%; - padding:20px; - } +html { + box-sizing: border-box; + background: #ffc600; + font-family: 'helvetica neue'; + font-size: 20px; + font-weight: 200; +} - .search-form { - max-width:400px; - margin:50px auto; - } +*, *:before, *:after { + box-sizing: inherit; +} - input.search { - margin: 0; - text-align: center; - outline:0; - border: 10px solid #F7F7F7; - width: 120%; - left: -10%; - position: relative; - top: 10px; - z-index: 2; - border-radius: 5px; - font-size: 40px; - box-shadow: 0 0 5px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.19); - } +input { + width: 100%; + padding: 20px; +} +.search-form { + max-width: 400px; + margin: 50px auto; +} - .suggestions { - margin: 0; - padding: 0; - position: relative; - /*perspective:20px;*/ - } - .suggestions li { - background:white; - list-style: none; - border-bottom: 1px solid #D8D8D8; - box-shadow: 0 0 10px rgba(0, 0, 0, 0.14); - margin:0; - padding:20px; - transition:background 0.2s; - display:flex; - justify-content:space-between; - text-transform: capitalize; - } +input.search { + margin: 0; + text-align: center; + outline: 0; + border: 10px solid #F7F7F7; + width: 120%; + left: -10%; + position: relative; + top: 10px; + z-index: 2; + border-radius: 5px; + font-size: 40px; + box-shadow: 0 0 5px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.19); +} - .suggestions li:nth-child(even) { - transform: perspective(100px) rotateX(3deg) translateY(2px) scale(1.001); - background: linear-gradient(to bottom, #ffffff 0%,#EFEFEF 100%); - } - .suggestions li:nth-child(odd) { - transform: perspective(100px) rotateX(-3deg) translateY(3px); - background: linear-gradient(to top, #ffffff 0%,#EFEFEF 100%); - } +.suggestions { + margin: 0; + padding: 0; + position: relative; + /*perspective:20px;*/ +} - span.population { - font-size: 15px; - } +.suggestions li { + background: white; + list-style: none; + border-bottom: 1px solid #D8D8D8; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.14); + margin: 0; + padding: 20px; + transition: background 0.2s; + display: flex; + justify-content: space-between; + text-transform: capitalize; +} - .hl { - background:#ffc600; - } \ No newline at end of file +.suggestions li:nth-child(even) { + transform: perspective(100px) rotateX(3deg) translateY(2px) scale(1.001); + background: linear-gradient(to bottom, #ffffff 0%, #EFEFEF 100%); +} + +.suggestions li:nth-child(odd) { + transform: perspective(100px) rotateX(-3deg) translateY(3px); + background: linear-gradient(to top, #ffffff 0%, #EFEFEF 100%); +} + +span.population { + font-size: 15px; +} + +.hl { + background: #ffc600; +} \ No newline at end of file From 7ff9e674946ba96c394ca53c300297e24ee61f7f Mon Sep 17 00:00:00 2001 From: Omega Date: Sat, 20 Jan 2018 12:00:33 -0600 Subject: [PATCH 8/8] Array Cardio Day 2 complete --- 07 - Array Cardio Day 2/index-START.html | 45 ++++++++++++++++-------- 1 file changed, 31 insertions(+), 14 deletions(-) diff --git a/07 - Array Cardio Day 2/index-START.html b/07 - Array Cardio Day 2/index-START.html index 969566ff78..d38c7e4b6e 100644 --- a/07 - Array Cardio Day 2/index-START.html +++ b/07 - Array Cardio Day 2/index-START.html @@ -1,41 +1,58 @@ - - Array Cardio 💪💪 + + Array Cardio 💪💪 -

Psst: have a look at the JavaScript Console 💁

- +