diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-VOLLEY.html similarity index 74% rename from 01 - JavaScript Drum Kit/index-START.html rename to 01 - JavaScript Drum Kit/index-VOLLEY.html index 4070d32767..bacfec3a7f 100644 --- a/01 - JavaScript Drum Kit/index-START.html +++ b/01 - JavaScript Drum Kit/index-VOLLEY.html @@ -59,6 +59,26 @@ diff --git a/01 - JavaScript Drum Kit/style.css b/01 - JavaScript Drum Kit/style.css index 3e0a320b37..132f8b9dda 100644 --- a/01 - JavaScript Drum Kit/style.css +++ b/01 - JavaScript Drum Kit/style.css @@ -1,6 +1,6 @@ html { font-size: 10px; - background:url(http://i.imgur.com/b9r5sEL.jpg) bottom center; + background:url(https://vsg-kleinsteinbach.de/wp-content/themes/template/standard/images/backgrounds/volleyball3_compressed_xl.jpg) bottom center; background-size: cover; } body,html { @@ -33,8 +33,8 @@ body,html { .playing { transform:scale(1.1); - border-color:#ffc600; - box-shadow: 0 0 10px #ffc600; + border-color:#1aa7c6; + box-shadow: 0 0 10px #1aa7c6; } kbd { @@ -46,5 +46,5 @@ kbd { font-size: 1.2rem; text-transform: uppercase; letter-spacing: 1px; - color:#ffc600; + color:#1aa7c6; } diff --git a/02 - JS + CSS Clock/index-START.html b/02 - JS + CSS Clock/index-START.html deleted file mode 100644 index 2712384201..0000000000 --- a/02 - JS + CSS Clock/index-START.html +++ /dev/null @@ -1,73 +0,0 @@ - - - - - JS + CSS Clock - - - - -
-
-
-
-
-
-
- - - - - - - diff --git a/02 - JS + CSS Clock/index-StationClock.html b/02 - JS + CSS Clock/index-StationClock.html new file mode 100644 index 0000000000..ba912df762 --- /dev/null +++ b/02 - JS + CSS Clock/index-StationClock.html @@ -0,0 +1,115 @@ + + + + + JS + CSS Clock + + + + +
+
+
+
+
+
+
+ + + + + + + diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html index 7171607a8b..b4a28d8602 100644 --- a/03 - CSS Variables/index-START.html +++ b/03 - CSS Variables/index-START.html @@ -1,35 +1,42 @@ + Scoped CSS Variables and JS +

Update CSS Variables with JS

-
- -
- - - + const inputs = document.querySelectorAll('.controls input'); + + function handleUpdate() { + const suffix = this.dataset.sizing || ''; + document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix); + } + inputs.forEach(input => input.addEventListener('change', handleUpdate)); + inputs.forEach(input => input.addEventListener('mousemove', handleUpdate)); + - + + \ No newline at end of file diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html index eec0ffc31d..94e3396899 100644 --- a/04 - Array Cardio Day 1/index-START.html +++ b/04 - Array Cardio Day 1/index-START.html @@ -1,9 +1,11 @@ + Array Cardio 💪 +

Psst: have a look at the JavaScript Console 💁

- + + \ No newline at end of file diff --git a/05 - Flex Panel Gallery/index-START.html b/05 - Flex Panel Gallery/index-START.html index e1d643ad5c..07f36f0a5c 100644 --- a/05 - Flex Panel Gallery/index-START.html +++ b/05 - Flex Panel Gallery/index-START.html @@ -1,83 +1,124 @@ + Flex Panels 💪 + - -

Hey

@@ -105,12 +146,22 @@

Motion

- - - + function toggleOpen() { + this.classList.toggle('open'); + } + function toggleActive(e) { + if (e.propertyName.includes('flex')) { + this.classList.toggle('open-active'); + } + this.classList.toggle('open'); + } + panels.forEach(panel => panel.addEventListener('click', toggleOpen)); + panels.forEach(panel => panel.addEventListener('transitionend', toggleActive)); + - + + \ No newline at end of file diff --git a/06 - Type Ahead/index-START.html b/06 - Type Ahead/index-START.html index 1436886918..91f005cbc2 100644 --- a/06 - Type Ahead/index-START.html +++ b/06 - Type Ahead/index-START.html @@ -1,12 +1,13 @@ + Type Ahead 👀 - +
- + - - - + \ 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..fe979be65f 100644 --- a/07 - Array Cardio Day 2/index-START.html +++ b/07 - Array Cardio Day 2/index-START.html @@ -1,41 +1,79 @@ + Array Cardio 💪💪 +

Psst: have a look at the JavaScript Console 💁

- + + \ No newline at end of file diff --git a/08 - Fun with HTML5 Canvas/index-START.html b/08 - Fun with HTML5 Canvas/index-START.html index 37c148df07..24c5e52a8b 100644 --- a/08 - Fun with HTML5 Canvas/index-START.html +++ b/08 - Fun with HTML5 Canvas/index-START.html @@ -7,6 +7,56 @@ - - + + \ No newline at end of file diff --git a/14 - JavaScript References VS Copying/index-START.html b/14 - JavaScript References VS Copying/index-START.html index 4da1bac2ea..bd8cb56f8b 100644 --- a/14 - JavaScript References VS Copying/index-START.html +++ b/14 - JavaScript References VS Copying/index-START.html @@ -8,10 +8,20 @@ + - + \ No newline at end of file diff --git a/16 - Mouse Move Shadow/index-start.html b/16 - Mouse Move Shadow/index-start.html index 58a9bba861..513b3565ff 100644 --- a/16 - Mouse Move Shadow/index-start.html +++ b/16 - Mouse Move Shadow/index-start.html @@ -1,9 +1,11 @@ + Mouse Shadow +
@@ -11,26 +13,47 @@

🔥WOAH!

- + - + + \ No newline at end of file