diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html index 4070d32767..ad8e44f554 100644 --- a/01 - JavaScript Drum Kit/index-START.html +++ b/01 - JavaScript Drum Kit/index-START.html @@ -1,66 +1,84 @@ - - - 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 transitionFinished(e) { + if (e.propertyName !== "transform") return; + e.target.classList.remove("playing"); + } + Array.from(document.querySelectorAll(".key")).forEach(key => + key.addEventListener("transitionend", transitionFinished) + ); - + document.addEventListener("keypress", playSound); + + diff --git a/02 - JS and CSS Clock/index-START.html b/02 - JS and CSS Clock/index-START.html index 12f721b183..8931fb5da6 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,81 @@
+ - .clock-face { - position: relative; - width: 100%; - height: 100%; - transform: translateY(-3px); /* account for the height of the clock hands */ - } + - + setInterval(setDate, 1000); + +