From 43467f105bd73e9bca12df738ef86f7df0a879e2 Mon Sep 17 00:00:00 2001 From: Yehonathan Sharvit Date: Sun, 15 Jan 2017 09:47:11 +0200 Subject: [PATCH 1/2] POC: interactive coding in the browser with KLIPSE --- 01 - JavaScript Drum Kit/index-KLIPSE.html | 96 ++++++++++++++++++++++ 01 - JavaScript Drum Kit/style.css | 12 +++ 2 files changed, 108 insertions(+) create mode 100644 01 - JavaScript Drum Kit/index-KLIPSE.html diff --git a/01 - JavaScript Drum Kit/index-KLIPSE.html b/01 - JavaScript Drum Kit/index-KLIPSE.html new file mode 100644 index 0000000000..cd8e0fed87 --- /dev/null +++ b/01 - JavaScript Drum Kit/index-KLIPSE.html @@ -0,0 +1,96 @@ + + + + + JS Drum Kit + + + +
+
+
+
+ A + clap +
+
+ S + hihat +
+
+ D + kick +
+
+ F + openhat +
+
+ G + boom +
+
+ H + ride +
+
+ J + snare +
+
+ K + tom +
+
+ L + tink +
+
+
+ +
+ 

+  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);
+
+
+
+
+ + + + + + + + + + + + + + + + + + diff --git a/01 - JavaScript Drum Kit/style.css b/01 - JavaScript Drum Kit/style.css index 075578c930..2ce6fb0fd9 100644 --- a/01 - JavaScript Drum Kit/style.css +++ b/01 - JavaScript Drum Kit/style.css @@ -48,3 +48,15 @@ kbd { letter-spacing: .1rem; color: #ffc600; } + +#container { + width: 50%; + float: left; + padding-right: 3%; + padding-left: 2%; +} + +#code { + padding-right: 2%; + +} \ No newline at end of file From 844cb0995a3edf145f76362ed760ada508a137fe Mon Sep 17 00:00:00 2001 From: Yehonathan Sharvit Date: Sun, 15 Jan 2017 10:05:34 +0200 Subject: [PATCH 2/2] add explanations --- 01 - JavaScript Drum Kit/index-KLIPSE.html | 15 +++++++++++++++ 01 - JavaScript Drum Kit/style.css | 9 ++++++++- 2 files changed, 23 insertions(+), 1 deletion(-) diff --git a/01 - JavaScript Drum Kit/index-KLIPSE.html b/01 - JavaScript Drum Kit/index-KLIPSE.html index cd8e0fed87..eddb392ddd 100644 --- a/01 - JavaScript Drum Kit/index-KLIPSE.html +++ b/01 - JavaScript Drum Kit/index-KLIPSE.html @@ -49,6 +49,7 @@
+

The code is evaluated as you type...


   function removeTransition(e) {
     if (e.propertyName !== 'transform') return;
@@ -70,6 +71,11 @@
   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)
+
@@ -88,6 +94,15 @@ diff --git a/01 - JavaScript Drum Kit/style.css b/01 - JavaScript Drum Kit/style.css index 2ce6fb0fd9..1566a1100e 100644 --- a/01 - JavaScript Drum Kit/style.css +++ b/01 - JavaScript Drum Kit/style.css @@ -57,6 +57,13 @@ kbd { } #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