diffractometer
diff --git a/‎01 - JavaScript Drum Kit/index-FINISHED.html‎
Lines changed: 0 additions & 83 deletions b/‎01 - JavaScript Drum Kit/index-FINISHED.html‎
Lines changed: 0 additions & 83 deletions
diff --git a/‎01 - JavaScript Drum Kit/index-START.html‎
Lines changed: 0 additions & 66 deletions b/‎01 - JavaScript Drum Kit/index-START.html‎
Lines changed: 0 additions & 66 deletions
diff --git a/‎01 - JavaScript Drum Kit/index.html‎
Lines changed: 17 additions & 0 deletions b/‎01 - JavaScript Drum Kit/index.html‎
Lines changed: 17 additions & 0 deletions
diff --git a/‎01 - JavaScript Drum Kit/index.js‎
Lines changed: 68 additions & 0 deletions b/‎01 - JavaScript Drum Kit/index.js‎
Lines changed: 68 additions & 0 deletions
diff --git a/‎01 - JavaScript Drum Kit/sounds/65.wav‎
10.1 KB b/‎01 - JavaScript Drum Kit/sounds/65.wav‎
10.1 KB
diff --git a/‎01 - JavaScript Drum Kit/sounds/68.wav‎
10.4 KB b/‎01 - JavaScript Drum Kit/sounds/68.wav‎
10.4 KB
diff --git a/‎01 - JavaScript Drum Kit/sounds/69.wav‎
11.8 KB b/‎01 - JavaScript Drum Kit/sounds/69.wav‎
11.8 KB
diff --git a/‎01 - JavaScript Drum Kit/sounds/81.wav‎
40.9 KB b/‎01 - JavaScript Drum Kit/sounds/81.wav‎
40.9 KB
diff --git a/‎01 - JavaScript Drum Kit/sounds/83.wav‎
37.6 KB b/‎01 - JavaScript Drum Kit/sounds/83.wav‎
37.6 KB
diff --git a/‎01 - JavaScript Drum Kit/sounds/87.wav‎
71 KB b/‎01 - JavaScript Drum Kit/sounds/87.wav‎
71 KB
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>&lambda; Drums</title>
+  <link rel="stylesheet" href="style.css">
+  <script src="index.js"></script>
+  <link href="https://fonts.googleapis.com/css?family=Electrolize" rel="stylesheet">
+</head>
+<body>
+  <div id="main"/>
+<script>
+  main();
+</script>
+
+</body>
+</html>
@@ -0,0 +1,68 @@
+const main = () => {
+
+// layout
+
+let render = (template, node) => node.innerHTML = template;
+
+const codeKeys = [
+  {key: 81, char: 'Q' },
+  {key: 87, char: 'W' },
+  {key: 69, char: 'E' },
+  {key: 65, char: 'A' },
+  {key: 83, char: 'S' },
+  {key: 68, char: 'D' },
+];
+
+let renderKeys = () => {
+
+  let keys = codeKeys.map((v, i) => {
+    return `
+      <div data-key=${codeKeys[i].key} class="key">
+        <kbd>${codeKeys[i].char}</kbd>
+        <audio data-key=${codeKeys[i].key} src=${
+          `sounds/${codeKeys[i].key}.wav`
+        }></audio>
+        <div class="lambda">&lambda;</div>
+      </div>
+    `;
+  });
+
+  render (`
+    <div class="keys">
+      ${keys}
+    </div>
+  `, document.querySelector('#main'));
+}
+
+renderKeys();
+
+// ui
+
+let removeTransition = (e) => {
+  if (e.propertyName !== 'transform') return;
+  e.target.classList.remove('playing');
+}
+
+// playsound
+
+let play = (e) => {
+  let audio   = document.querySelector(`audio[data-key="${e.keyCode}"]`);
+  let key     = document.querySelector(`div[data-key="${e.keyCode}"]`);
+
+  if (!audio) return;
+
+  key.classList.add('playing');
+
+  audio.play();
+  audio.currentTime = 0;
+}
+
+const keys = Array.from(document.querySelectorAll('.key'));
+
+keys.forEach((key) => {
+  key.addEventListener('transitionend', removeTransition)
+});
+
+window.addEventListener('keydown', play);
+
+}