-
- A
- clap
-
-
- S
- hihat
-
-
- D
- kick
-
-
- F
- openhat
-
-
-
G
-
boom
+
+
+ A
+ clap
+
+
+ S
+ hihat
+
+
+ D
+ kick
+
+
+ F
+ openhat
+
+
+ G
+ boom
+
+
+ H
+ ride
+
+
+ J
+ snare
+
+
+ K
+ tom
+
+
+ L
+ tink
+
-
- H
- ride
-
-
- J
- snare
-
-
- K
- tom
-
-
- L
- tink
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
-
+ function removeTransition(e) {
+ if (e.propertyName !== 'transform') return; // skip it if it's not a transform
+ this.classList.remove('playing');
+ }
+ const keys = document.querySelectorAll('.key');
+ keys.forEach(key => key.addEventListener('transitionend', removeTransition));
+ window.addEventListener('keydown', playSound);
+
+
diff --git a/02 - JS + CSS Clock/index-START.html b/02 - JS + CSS Clock/index-START.html
index 2712384201..53f7895ebf 100644
--- a/02 - JS + CSS Clock/index-START.html
+++ b/02 - JS + CSS Clock/index-START.html
@@ -61,13 +61,35 @@
background:black;
position: absolute;
top:50%;
+ transform-origin: 100%;
+ transform: rotate(90deg);
+ transition: all 0.05s;
+ transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
}
-