From 88fdcbcbeae760eff5d56175662aed7815b36472 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=98yvind=20Instefjord?= Date: Tue, 21 Feb 2017 20:50:52 +0100 Subject: [PATCH 01/10] Done part 01 --- 01 - JavaScript Drum Kit/index-START.html | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html index 4070d32767..bb306b41f7 100644 --- a/01 - JavaScript Drum Kit/index-START.html +++ b/01 - JavaScript Drum Kit/index-START.html @@ -58,7 +58,23 @@ From 3bd7364420826a752dd222f09b14447fd39fdb40 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=98yvind=20Instefjord?= Date: Tue, 21 Feb 2017 20:50:58 +0100 Subject: [PATCH 02/10] Done part 02 --- 02 - JS and CSS Clock/index-FINISHED.html | 1 - 02 - JS and CSS Clock/index-START.html | 168 ++++++++++++++-------- 2 files changed, 110 insertions(+), 59 deletions(-) diff --git a/02 - JS and CSS Clock/index-FINISHED.html b/02 - JS and CSS Clock/index-FINISHED.html index 37436ed1ca..ac30c1ef0e 100644 --- a/02 - JS and CSS Clock/index-FINISHED.html +++ b/02 - JS and CSS Clock/index-FINISHED.html @@ -26,7 +26,6 @@ } body { - margin: 0; font-size: 2rem; display:flex; flex:1; diff --git a/02 - JS and CSS Clock/index-START.html b/02 - JS and CSS Clock/index-START.html index ee7eaefb1f..5540f987ee 100644 --- a/02 - JS and CSS Clock/index-START.html +++ b/02 - JS and CSS Clock/index-START.html @@ -1,74 +1,126 @@ - - JS + CSS Clock - - + + JS + CSS Clock -
-
-
-
-
-
-
- + + + + - + function setDate(){ + const now = new Date(); + setSeconds(now); + setMinutes(now); + setHours(now); + } + function setSeconds(now){ + const seconds = now.getSeconds(); + const secondsDegrees = (seconds / 60) * 360; + const currentRot = secondHand.style.transform.match(/[0-9]+/); + // Remove transition if we're ticking over the starting point to avoid the animation + // displaying the hand going backwards. + if(currentRot && secondsDegrees < parseInt(currentRot[0])) + secondHand.classList.add('no-transition'); + else + secondHand.classList.remove('no-transition'); + secondHand.style.transform = `rotate(${secondsDegrees}deg)`; + } + function setMinutes(now){ + const minutes = now.getMinutes(); + const minutesDegrees = (minutes / 60) * 360; + const currentRot = minHand.style.transform.match(/[0-9]+/); + // Remove transition if we're ticking over the starting point to avoid the animation + // displaying the hand going backwards. + if(currentRot && minutesDegrees < parseInt(currentRot[0])) + minHand.classList.add('no-transition'); + else + minHand.classList.remove('no-transition'); + minHand.style.transform = `rotate(${minutesDegrees}deg)`; + } + function setHours(now){ + const hours = now.getHours(); + const hoursDegrees = (hours / 12) * 360; + const currentRot = hourHand.style.transform.match(/[0-9]+/); + // Remove transition if we're ticking over the starting point to avoid the animation + // displaying the hand going backwards. + if(currentRot && hoursDegrees < parseInt(currentRot[0])) + hourHand.classList.add('no-transition'); + else + hourHand.classList.remove('no-transition'); + hourHand.style.transform = `rotate(${hoursDegrees}deg)`; + } + setDate(); + setInterval(setDate, 1000); + From 81d1a6e9b39e367ca469be4f755ba44e300f351b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=98yvind=20Instefjord?= Date: Tue, 21 Feb 2017 20:51:06 +0100 Subject: [PATCH 03/10] Done part 03 --- 03 - CSS Variables/index-START.html | 86 +++++++++++++++++------------ 1 file changed, 51 insertions(+), 35 deletions(-) diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html index ca2b59d077..12233f26d8 100644 --- a/03 - CSS Variables/index-START.html +++ b/03 - CSS Variables/index-START.html @@ -1,13 +1,48 @@ - - Scoped CSS Variables and JS + + Scoped CSS Variables and JS + -

Update CSS Variables with JS

+

Update CSS Variables with JS

-
+
@@ -16,39 +51,20 @@

Update CSS Variables with JS

-
- - - - - - - + inputs.forEach(function(input){ + input.addEventListener('change', handleUpdate); + input.addEventListener('mousemove', handleUpdate); + }); + From e2114970fe9c3c21a2c83996e08a717d22e66d3f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=98yvind=20Instefjord?= Date: Tue, 21 Feb 2017 20:51:13 +0100 Subject: [PATCH 04/10] Done part 04 --- 04 - Array Cardio Day 1/index-START.html | 68 +++++++++++++++++------- 1 file changed, 48 insertions(+), 20 deletions(-) diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html index eec0ffc31d..d67e4d3a82 100644 --- a/04 - Array Cardio Day 1/index-START.html +++ b/04 - Array Cardio Day 1/index-START.html @@ -1,59 +1,87 @@ - - Array Cardio 💪 + + Array Cardio 💪 -

Psst: have a look at the JavaScript Console 💁

- + From 0e728b997e9ada4c2c8ad523fa344a9f9a884f0f Mon Sep 17 00:00:00 2001 From: Alexander Popitich Date: Mon, 20 Feb 2017 22:05:14 +0300 Subject: [PATCH 05/10] Fix merge conflict --- 02 - JS and CSS Clock/index-FINISHED.html | 1 + 02 - JS and CSS Clock/index-START.html | 16 +--------------- 2 files changed, 2 insertions(+), 15 deletions(-) diff --git a/02 - JS and CSS Clock/index-FINISHED.html b/02 - JS and CSS Clock/index-FINISHED.html index ac30c1ef0e..37436ed1ca 100644 --- a/02 - JS and CSS Clock/index-FINISHED.html +++ b/02 - JS and CSS Clock/index-FINISHED.html @@ -26,6 +26,7 @@ } body { + margin: 0; font-size: 2rem; display:flex; flex:1; diff --git a/02 - JS and CSS Clock/index-START.html b/02 - JS and CSS Clock/index-START.html index 5540f987ee..2f44c909fb 100644 --- a/02 - JS and CSS Clock/index-START.html +++ b/02 - JS and CSS Clock/index-START.html @@ -15,6 +15,7 @@ } body { + margin: 0; font-size: 2rem; display: flex; flex: 1; @@ -22,21 +23,6 @@ align-items: center; } - .clock { - width: 30rem; - height: 30rem; - border: 20px solid white; - border-radius: 50%; - margin: 50px auto; - position: relative; - padding: 2rem; - box-shadow: - 0 0 0 4px rgba(0,0,0,0.1), - inset 0 0 0 3px #EFEFEF, - inset 0 0 10px black, - 0 0 10px rgba(0,0,0,0.2); - } - .clock-face { position: relative; width: 100%; From 9e103e2cb4b0925a7506fc1d9b9cb17186bbe5bd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=98yvind=20Instefjord?= Date: Tue, 21 Feb 2017 20:55:46 +0100 Subject: [PATCH 06/10] Re-add removed .clock CSS --- 02 - JS and CSS Clock/index-START.html | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/02 - JS and CSS Clock/index-START.html b/02 - JS and CSS Clock/index-START.html index 2f44c909fb..822d1d834f 100644 --- a/02 - JS and CSS Clock/index-START.html +++ b/02 - JS and CSS Clock/index-START.html @@ -23,6 +23,21 @@ align-items: center; } + .clock { + width: 30rem; + height: 30rem; + border:20px solid white; + border-radius:50%; + margin:50px auto; + position: relative; + padding:2rem; + box-shadow: + 0 0 0 4px rgba(0,0,0,0.1), + inset 0 0 0 3px #EFEFEF, + inset 0 0 10px black, + 0 0 10px rgba(0,0,0,0.2); + } + .clock-face { position: relative; width: 100%; From 2ec0a53e8a4b2214ebcce131bdbb32c8970ff10e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=98yvind=20Instefjord?= Date: Tue, 21 Feb 2017 21:04:32 +0100 Subject: [PATCH 07/10] Fix width of clock face --- 02 - JS and CSS Clock/index-START.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/02 - JS and CSS Clock/index-START.html b/02 - JS and CSS Clock/index-START.html index 822d1d834f..634d565a09 100644 --- a/02 - JS and CSS Clock/index-START.html +++ b/02 - JS and CSS Clock/index-START.html @@ -42,7 +42,7 @@ position: relative; width: 100%; height: 100%; - transform: translateY(-3px); /* account for the height of the clock hands */ + transform: translateX(-3px); /* account for the width of the clock hands */ } .hand { From 68bbcf4318f11deb7313e5f65c3979c2c3fd20e5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=98yvind=20Instefjord?= Date: Tue, 21 Feb 2017 21:27:01 +0100 Subject: [PATCH 08/10] Done part 05 --- 05 - Flex Panel Gallery/index-START.html | 241 +++++++++++++---------- 1 file changed, 142 insertions(+), 99 deletions(-) diff --git a/05 - Flex Panel Gallery/index-START.html b/05 - Flex Panel Gallery/index-START.html index e1d643ad5c..99c1a47a8b 100644 --- a/05 - Flex Panel Gallery/index-START.html +++ b/05 - Flex Panel Gallery/index-START.html @@ -1,116 +1,159 @@ - - 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

-
- - - - - +
+

Two

+

One

+

Zero

+
+
+

Go

+

Go

+

Go

+
+
+ From f6bf09c0503977a5e435d04644f41a09e81bc045 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=98yvind=20Instefjord?= Date: Tue, 21 Feb 2017 21:28:55 +0100 Subject: [PATCH 09/10] Remove unused css class --- 05 - Flex Panel Gallery/index-START.html | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/05 - Flex Panel Gallery/index-START.html b/05 - Flex Panel Gallery/index-START.html index 99c1a47a8b..f10fd6ae6f 100644 --- a/05 - Flex Panel Gallery/index-START.html +++ b/05 - Flex Panel Gallery/index-START.html @@ -97,11 +97,6 @@ font-size:40px; flex: 5; /* Take up 5 times the space as normal */ } - - .cta { - color:white; - text-decoration: none; - } @@ -147,7 +142,7 @@ this.classList.toggle('open'); } function toggleActive(e){ - // For browser compatibility. Some say flex-grow, others say flex. + // For browser compatibility. Some say flex-grow, others say flex. if (!e.propertyName.includes('flex')) return; this.classList.toggle('open-active'); } From 7d96a35869256f2ee39a91608d173fd9527758d1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=98yvind=20Instefjord?= Date: Tue, 21 Feb 2017 21:50:01 +0100 Subject: [PATCH 10/10] Done part 06 --- 06 - Type Ahead/index-START.html | 52 ++++++++++++++++++++++++++------ 1 file changed, 43 insertions(+), 9 deletions(-) diff --git a/06 - Type Ahead/index-START.html b/06 - Type Ahead/index-START.html index 1436886918..43d14676e2 100644 --- a/06 - Type Ahead/index-START.html +++ b/06 - Type Ahead/index-START.html @@ -1,22 +1,56 @@ - - Type Ahead 👀 - + + Type Ahead 👀 + -
+
    -
  • Filter for a city
    • -
  • or a state
    • +
  • Filter for a city
    • +
  • or a state
-
+ - +