diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html index 4070d32767..1f9c883b25 100644 --- a/01 - JavaScript Drum Kit/index-START.html +++ b/01 - JavaScript Drum Kit/index-START.html @@ -1,66 +1,95 @@ - - - JS Drum Kit - - - + + + JS Drum Kit + + + +
+
+ A + clap +
+
+ S + hihat +
+
+ D + kick +
+
+ F + openhat +
+
+ G + boom +
+
+ H + ride +
+
+ J + snare +
+
+ K + tom +
+
+ L + tink +
+
+ + + + + + + + + -
-
- A - clap -
-
- S - hihat -
-
- D - kick -
-
- F - openhat -
-
- G - boom -
-
- H - ride -
-
- J - snare -
-
- K - tom -
-
- L - tink -
-
+ + function removeTransition(event) { + if (event.propertyName !== "transform") return; // do nothing if not transform + this.classList.remove("playing"); + } + // Add an event listener for each of the keys transition to be removed + const keys = document.querySelectorAll(".key"); + keys.forEach((key) => + key.addEventListener("transitionend", removeTransition) + ); - + // Add an event listener that captures the key down event + window.addEventListener("keydown", playSound); + + diff --git a/02 - JS and CSS Clock/index-START.html b/02 - JS and CSS Clock/index-START.html index 7a6d27d5bd..08cdbe06d6 100644 --- a/02 - JS and CSS Clock/index-START.html +++ b/02 - JS and CSS Clock/index-START.html @@ -1,12 +1,10 @@ - - - JS + CSS Clock - - - - + + + JS + CSS Clock + +
@@ -15,60 +13,92 @@
+ + - + setInterval(setDate, 1000); + + diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html index 6b9b539c09..22cd4578a7 100644 --- a/03 - CSS Variables/index-START.html +++ b/03 - CSS Variables/index-START.html @@ -1,51 +1,106 @@ - - - Scoped CSS Variables and JS - - -

Update CSS Variables with JS

+ + + Scoped CSS Variables and JS + + +

Update CSS Variables with JS

-
- - +
+ + - - + + - - -
+ + +
- + - - .controls { - margin-bottom: 50px; - } + + // Set the property with the given name (input name) with the value of the input + // document gets us to :root + // setProperty sets a property on :root + document.documentElement.style.setProperty( + `--${this.name}`, + this.value + suffix + ); + } - + // Loop through each element of the node list (input) and handle update + inputs.forEach((input) => input.addEventListener("change", handleUpdate)); + // Listens for mouse movement instead of just when let go + inputs.forEach((input) => + 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 d19181b6b4..a2a6cf86e3 100644 --- a/04 - Array Cardio Day 1/index-START.html +++ b/04 - Array Cardio Day 1/index-START.html @@ -1,59 +1,182 @@ - - - Array Cardio 💪 - - -

Psst: have a look at the JavaScript Console 💁

- - + + + Array Cardio 💪 + + +

Psst: have a look at the JavaScript Console 💁

+ +