From 242130b829157c1e6e847ec5c4bbf109496a4621 Mon Sep 17 00:00:00 2001 From: Gustav Lindberg Date: Wed, 18 Jan 2017 21:31:21 +0100 Subject: [PATCH] 3 done --- 01 - JavaScript Drum Kit/index.html | 64 ++++++++++ 01 - JavaScript Drum Kit/index.js | 22 ++++ 02 - JS + CSS Clock/index.html | 113 ++++++++++++++++++ .../{index-START.html => index.html} | 27 ++++- 4 files changed, 224 insertions(+), 2 deletions(-) create mode 100644 01 - JavaScript Drum Kit/index.html create mode 100644 01 - JavaScript Drum Kit/index.js create mode 100644 02 - JS + CSS Clock/index.html rename 03 - CSS Variables/{index-START.html => index.html} (60%) diff --git a/01 - JavaScript Drum Kit/index.html b/01 - JavaScript Drum Kit/index.html new file mode 100644 index 0000000000..85de0afbfd --- /dev/null +++ b/01 - JavaScript Drum Kit/index.html @@ -0,0 +1,64 @@ + + + + + Codestin Search App + + + + + +
+
+ A + clap +
+
+ S + hihat +
+
+ D + kick +
+
+ F + openhat +
+
+ G + boom +
+
+ H + ride +
+
+ J + snare +
+
+ K + tom +
+
+ L + tink +
+
+ + + + + + + + + + + + + + + + diff --git a/01 - JavaScript Drum Kit/index.js b/01 - JavaScript Drum Kit/index.js new file mode 100644 index 0000000000..2f97a17742 --- /dev/null +++ b/01 - JavaScript Drum Kit/index.js @@ -0,0 +1,22 @@ +document.addEventListener('keydown', function(e) { + var keyCode = e.keyCode; + var audio = document.querySelector(`audio[data-key="${keyCode}"]`); + var keyElement = document.querySelector(`.key[data-key="${keyCode}"]`); + + if(!audio) return null; + + audio.currentTime = 0; + audio.play(); + keyElement.classList.add('playing'); +}); + +var keys = document.querySelectorAll('.key'); + +function removeTransition(e) { + if(e.propertyName !== 'transform') return null; + e.target.classList.remove('playing'); +} + +keys.forEach((key) => { + key.addEventListener('transitionend', removeTransition) +}); diff --git a/02 - JS + CSS Clock/index.html b/02 - JS + CSS Clock/index.html new file mode 100644 index 0000000000..869341d99d --- /dev/null +++ b/02 - JS + CSS Clock/index.html @@ -0,0 +1,113 @@ + + + + + Codestin Search App + + + + +
+
+
+
+
+
+
+ + + + + + + diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index.html similarity index 60% rename from 03 - CSS Variables/index-START.html rename to 03 - CSS Variables/index.html index ca2b59d077..d4b6e19308 100644 --- a/03 - CSS Variables/index-START.html +++ b/03 - CSS Variables/index.html @@ -9,10 +9,10 @@

Update CSS Variables with JS

- + - + @@ -22,6 +22,21 @@

Update CSS Variables with JS