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 @@ diff --git a/02 - JS and CSS Clock/index-START.html b/02 - JS and CSS Clock/index-START.html index ee7eaefb1f..634d565a09 100644 --- a/02 - JS and CSS Clock/index-START.html +++ b/02 - JS and CSS Clock/index-START.html @@ -1,74 +1,127 @@ - - 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); + 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); + }); + 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 💁

- + diff --git a/05 - Flex Panel Gallery/index-START.html b/05 - Flex Panel Gallery/index-START.html index e1d643ad5c..f10fd6ae6f 100644 --- a/05 - Flex Panel Gallery/index-START.html +++ b/05 - Flex Panel Gallery/index-START.html @@ -1,116 +1,154 @@ - - 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

+
+
+ 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 👀 + -
+ -
+ - +