diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html index 4070d32767..cf71e86b1c 100644 --- a/01 - JavaScript Drum Kit/index-START.html +++ b/01 - JavaScript Drum Kit/index-START.html @@ -58,6 +58,22 @@ 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); + + 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

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 💁

- + 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)); + 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 👀 + -
+ -
+ - + 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 👀 + -
+ -
+ - + 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 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 💁

- +