diff --git a/01 - JavaScript Drum Kit/index-KLIPSE.html b/01 - JavaScript Drum Kit/index-KLIPSE.html new file mode 100644 index 0000000000..eddb392ddd --- /dev/null +++ b/01 - JavaScript Drum Kit/index-KLIPSE.html @@ -0,0 +1,111 @@ + + + + + JS Drum Kit + + + +
+
+
+
+ A + clap +
+
+ S + hihat +
+
+ D + kick +
+
+ F + openhat +
+
+ G + boom +
+
+ H + ride +
+
+ J + snare +
+
+ K + tom +
+
+ L + tink +
+
+
+ +
+

The code is evaluated as you type...

+ 

+  function removeTransition(e) {
+    if (e.propertyName !== 'transform') return;
+    e.target.classList.remove('playing');
+  }
+
+  function playSound(e) {
+    const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
+    const key = document.querySelector(`div[data-key="${e.keyCode}"]`);
+    if (!audio) return;
+
+    key.classList.add('playing');
+    audio.currentTime = 0;
+    audio.play();
+  }
+
+  const keys = Array.from(document.querySelectorAll('.key'));
+  keys.forEach(key => key.addEventListener('transitionend', removeTransition));
+  document.addEventListener('keydown', playSound);
+
+
+ +

Here is another javascript interactive snippet to play with code without opening the browser console:

+ 

+      [1,2,3].map(x => x + 1)
+
+
+
+ + + + + + + + + + + + + + + + + + diff --git a/01 - JavaScript Drum Kit/style.css b/01 - JavaScript Drum Kit/style.css index 075578c930..1566a1100e 100644 --- a/01 - JavaScript Drum Kit/style.css +++ b/01 - JavaScript Drum Kit/style.css @@ -48,3 +48,22 @@ kbd { letter-spacing: .1rem; color: #ffc600; } + +#container { + width: 50%; + float: left; + padding-right: 3%; + padding-left: 2%; +} + +#code { + padding-top: 30px; + padding-right: 2%; + font-size: 1.2em; + +} + +#code > p { + font-size: 1.2em; + color: white; +} \ No newline at end of file