diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html index 8a2f8e8417..90b8691312 100644 --- a/01 - JavaScript Drum Kit/index-START.html +++ b/01 - JavaScript Drum Kit/index-START.html @@ -1,67 +1,82 @@ - - - JS Drum Kit - - - - - - -
-
- A - clap -
-
- S - hihat -
-
- D - kick -
-
- F - openhat -
-
- G - boom -
-
- H - ride -
-
- J - snare -
-
- K - tom -
-
- L - tink + + + JS Drum Kit + + + + +
+
+ A + clap +
+
+ S + hihat +
+
+ D + kick +
+
+ F + openhat +
+
+ G + boom +
+
+ H + ride +
+
+ J + snare +
+
+ K + tom +
+
+ L + tink +
-
- - - - - - - - - + + + + + + + + + - + const keys = document.querySelectorAll(".key"); + keys.forEach((key) => + key.addEventListener("transitionend", removeTransition) + ); + function removeTransition(e) { + if (e.propertyName !== "transform") return; // skip if it's not a transform + this.classList.remove("playing"); + } - + 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 55ab1a5331..1ccca1a8f4 100644 --- a/02 - JS and CSS Clock/index-START.html +++ b/02 - JS and CSS Clock/index-START.html @@ -1,13 +1,11 @@ - - - JS + CSS Clock - - - - - + + + JS + CSS Clock + + +
@@ -16,60 +14,79 @@
+ - .hand { - width: 50%; - height: 6px; - background: black; - position: absolute; - top: 50%; - } + - + const hours = now.getHours(); + const hoursDegrees = (hours / 12) * 360 + (mins / 60) * 30 + 90; + hoursHand.style.transform = `rotate(${hoursDegrees}deg)`; + } + setInterval(setDate, 1000); + +