diff --git a/01 - JavaScript Drum Kit/index-FINISHED.html b/01 - JavaScript Drum Kit/index-FINISHED.html deleted file mode 100644 index 1a16d0997c..0000000000 --- a/01 - JavaScript Drum Kit/index-FINISHED.html +++ /dev/null @@ -1,83 +0,0 @@ - - - - - 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-START.html b/01 - JavaScript Drum Kit/index-START.html deleted file mode 100644 index 4070d32767..0000000000 --- a/01 - JavaScript Drum Kit/index-START.html +++ /dev/null @@ -1,66 +0,0 @@ - - - - - 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.html b/01 - JavaScript Drum Kit/index.html new file mode 100644 index 0000000000..13e6ec47e3 --- /dev/null +++ b/01 - JavaScript Drum Kit/index.html @@ -0,0 +1,17 @@ + + + + + λ Drums + + + + + +
+ + + + diff --git a/01 - JavaScript Drum Kit/index.js b/01 - JavaScript Drum Kit/index.js new file mode 100644 index 0000000000..1cf489784d --- /dev/null +++ b/01 - JavaScript Drum Kit/index.js @@ -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 ` +
+ ${codeKeys[i].char} + +
λ
+
+ `; + }); + + render (` +
+ ${keys} +
+ `, 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); + +} diff --git a/01 - JavaScript Drum Kit/sounds/65.wav b/01 - JavaScript Drum Kit/sounds/65.wav new file mode 100644 index 0000000000..f7586bde4f Binary files /dev/null and b/01 - JavaScript Drum Kit/sounds/65.wav differ diff --git a/01 - JavaScript Drum Kit/sounds/68.wav b/01 - JavaScript Drum Kit/sounds/68.wav new file mode 100644 index 0000000000..149e53dde3 Binary files /dev/null and b/01 - JavaScript Drum Kit/sounds/68.wav differ diff --git a/01 - JavaScript Drum Kit/sounds/69.wav b/01 - JavaScript Drum Kit/sounds/69.wav new file mode 100644 index 0000000000..7685da6653 Binary files /dev/null and b/01 - JavaScript Drum Kit/sounds/69.wav differ diff --git a/01 - JavaScript Drum Kit/sounds/81.wav b/01 - JavaScript Drum Kit/sounds/81.wav new file mode 100644 index 0000000000..040f202319 Binary files /dev/null and b/01 - JavaScript Drum Kit/sounds/81.wav differ diff --git a/01 - JavaScript Drum Kit/sounds/83.wav b/01 - JavaScript Drum Kit/sounds/83.wav new file mode 100644 index 0000000000..710649cd29 Binary files /dev/null and b/01 - JavaScript Drum Kit/sounds/83.wav differ diff --git a/01 - JavaScript Drum Kit/sounds/87.wav b/01 - JavaScript Drum Kit/sounds/87.wav new file mode 100644 index 0000000000..447607c88e Binary files /dev/null and b/01 - JavaScript Drum Kit/sounds/87.wav differ diff --git a/01 - JavaScript Drum Kit/sounds/boom.wav b/01 - JavaScript Drum Kit/sounds/boom.wav deleted file mode 100755 index 8d6423bcdb..0000000000 Binary files a/01 - JavaScript Drum Kit/sounds/boom.wav and /dev/null differ diff --git a/01 - JavaScript Drum Kit/sounds/clap.wav b/01 - JavaScript Drum Kit/sounds/clap.wav deleted file mode 100755 index ef952e5eb4..0000000000 Binary files a/01 - JavaScript Drum Kit/sounds/clap.wav and /dev/null differ diff --git a/01 - JavaScript Drum Kit/sounds/hihat.wav b/01 - JavaScript Drum Kit/sounds/hihat.wav deleted file mode 100755 index 885cb196a3..0000000000 Binary files a/01 - JavaScript Drum Kit/sounds/hihat.wav and /dev/null differ diff --git a/01 - JavaScript Drum Kit/sounds/kick.wav b/01 - JavaScript Drum Kit/sounds/kick.wav deleted file mode 100755 index 8fe46dea0c..0000000000 Binary files a/01 - JavaScript Drum Kit/sounds/kick.wav and /dev/null differ diff --git a/01 - JavaScript Drum Kit/sounds/openhat.wav b/01 - JavaScript Drum Kit/sounds/openhat.wav deleted file mode 100755 index 50637521dc..0000000000 Binary files a/01 - JavaScript Drum Kit/sounds/openhat.wav and /dev/null differ diff --git a/01 - JavaScript Drum Kit/sounds/ride.wav b/01 - JavaScript Drum Kit/sounds/ride.wav deleted file mode 100755 index e5829dfef9..0000000000 Binary files a/01 - JavaScript Drum Kit/sounds/ride.wav and /dev/null differ diff --git a/01 - JavaScript Drum Kit/sounds/snare.wav b/01 - JavaScript Drum Kit/sounds/snare.wav deleted file mode 100755 index c4edfc7534..0000000000 Binary files a/01 - JavaScript Drum Kit/sounds/snare.wav and /dev/null differ diff --git a/01 - JavaScript Drum Kit/sounds/tink.wav b/01 - JavaScript Drum Kit/sounds/tink.wav deleted file mode 100755 index f907ea2c0e..0000000000 Binary files a/01 - JavaScript Drum Kit/sounds/tink.wav and /dev/null differ diff --git a/01 - JavaScript Drum Kit/sounds/tom.wav b/01 - JavaScript Drum Kit/sounds/tom.wav deleted file mode 100755 index 9e2cdf691e..0000000000 Binary files a/01 - JavaScript Drum Kit/sounds/tom.wav and /dev/null differ diff --git a/01 - JavaScript Drum Kit/style.css b/01 - JavaScript Drum Kit/style.css index 075578c930..b1d3e5b1df 100644 --- a/01 - JavaScript Drum Kit/style.css +++ b/01 - JavaScript Drum Kit/style.css @@ -1,12 +1,25 @@ html { - font-size: 10px; - background: url(http://i.imgur.com/b9r5sEL.jpg) bottom center; + background: url(https://scontent-ort2-2.cdninstagram.com/vp/fd321c90ddd48898e42d7da58dc53585/5BDA0457/t51.2885-15/e35/19121196_1974023296160144_6525512982984654848_n.jpg) center; background-size: cover; + font-family: 'Electrolize', sans-serif; } + +.lambda { + text-align: center; + font-size: .5em; + margin: 0; + padding: .5em; + line-height: 1em; +} + body,html { margin: 0; padding: 0; - font-family: sans-serif; +} + +#main { + text-align: center; + cursor: pointer; } .keys { @@ -18,33 +31,28 @@ body,html { } .key { - border: .4rem solid black; - border-radius: .5rem; - margin: 1rem; - font-size: 1.5rem; - padding: 1rem .5rem; - transition: all .07s ease; - width: 10rem; + border: 1px solid gray; + display: cursor; + border-radius: .2rem; + transition: all .02s ease; + padding: .5em; + margin: .5em; + height: 5em; + width: 5em; text-align: center; color: white; background: rgba(0,0,0,0.4); - text-shadow: 0 0 .5rem black; } .playing { - transform: scale(1.1); - border-color: #ffc600; - box-shadow: 0 0 1rem #ffc600; + transform: scale(1.2); } kbd { display: block; - font-size: 4rem; + font-size: 2rem; } .sound { - font-size: 1.2rem; - text-transform: uppercase; - letter-spacing: .1rem; - color: #ffc600; + color: #333; }