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 @@ + + + + + JS Drum Kit + + + + + +
+
+ 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 @@ + + + + + JS + CSS Clock + + + + +
+
+
+
+
+
+
+ + + + + + + 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