Drum Kit OK - starting JS/CSS Clock

corneliugaina · Mar 25, 2019 · 8e4d303 · 8e4d303
1 parent e9e9f13
commit 8e4d303
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 8 deletions.
diff --git a/1-javascript-drum-kit/js-drum-kit.css b/1-javascript-drum-kit/js-drum-kit.css
@@ -24,7 +24,7 @@ border-radius: .5rem;
 margin: 1rem;
 font-size: 1.5rem;
 padding: 1rem .5rem;
-transition: all .15s ease;
+transition: all .05s ease;
 width: 10rem;
 text-align: center;
 color: white;
@@ -33,18 +33,18 @@ text-shadow: 0 0 .5rem black;
 }
 
 .playing {
-transform: scale(1.5);
+transform: scale(1.3);
 border-color: #ffc600;
 box-shadow: 0 0 1rem #ffc600;
 }
 
 kbd {
 display: block;
-font-size: 4rem;
+font-size: 3.5rem;
 }
 
 .sound {
-font-size: 1.2rem;
+font-size: 1.1rem;
 text-transform: uppercase;
 letter-spacing: .1rem;
 color: #ffc600;

diff --git a/1-javascript-drum-kit/js-drum-kit.html b/1-javascript-drum-kit/js-drum-kit.html
@@ -63,17 +63,17 @@
             audio.currentTime = 0; // remet le son instantanement a zero
             audio.play();
             key.classList.add('playing'); // on va ajouter la classe lors de l'appel de la fonction
-
         });
 
-        function removingTransition (e) {
-            if (e.propertyName !== 'transform') return
+        function removeTransition (e) {
+            if (e.propertyName !== 'transform') return; // sauter l'etape si ce n'est pas un transform
 
             console.log(e.property);
+            this.classList.remove('playing');
         }
 
         const keys = document.querySelectorAll('.key');
-        keys.forEach(key => keys.addEventListener('transitionend', removeTransition));
+        keys.forEach(key => key.addEventListener('transitionend', removeTransition));
     </script>