diff --git a/exercises/01 - JavaScript Drum Kit/solution.css b/exercises/01 - JavaScript Drum Kit/solution.css new file mode 100644 index 0000000..61a5546 --- /dev/null +++ b/exercises/01 - JavaScript Drum Kit/solution.css @@ -0,0 +1,50 @@ +html { + font-size: 10px; + background:url(http://i.imgur.com/b9r5sEL.jpg) bottom center; + background-size: cover; + } + body,html { + margin: 0; + padding: 0; + font-family: sans-serif; + } + + .keys { + display:flex; + flex:1; + min-height:100vh; + align-items: center; + justify-content: center; + } + + .key { + border:4px solid black; + border-radius:5px; + margin:1rem; + font-size: 1.5rem; + padding:1rem .5rem; + transition:all .07s; + width:100px; + text-align: center; + color:white; + background:rgba(0,0,0,0.4); + text-shadow:0 0 5px black; + } + + .playing { + transform:scale(1.1); + border-color:#ffc600; + box-shadow: 0 0 10px #ffc600; + } + + kbd { + display: block; + font-size: 40px; + } + + .sound { + font-size: 1.2rem; + text-transform: uppercase; + letter-spacing: 1px; + color:#ffc600; + } \ No newline at end of file diff --git a/exercises/01 - JavaScript Drum Kit/solution.html b/exercises/01 - JavaScript Drum Kit/solution.html new file mode 100644 index 0000000..326587d --- /dev/null +++ b/exercises/01 - JavaScript Drum Kit/solution.html @@ -0,0 +1,61 @@ + + + + + + JS Drum Kit + + + + + +
+
+ A + Clap +
+
+ S + Hi-Hat +
+
+ D + Kick +
+
+ F + Open-Hat +
+
+ G + Boom +
+
+ H + Ride +
+
+ J + Snare +
+
+ K + Tom +
+
+ L + Tink +
+
+ + + + + + + + + + + + \ No newline at end of file diff --git a/exercises/01 - JavaScript Drum Kit/solution.js b/exercises/01 - JavaScript Drum Kit/solution.js new file mode 100644 index 0000000..30c6a8e --- /dev/null +++ b/exercises/01 - JavaScript Drum Kit/solution.js @@ -0,0 +1,21 @@ +document.addEventListener("keydown", function(e) { + let div = document.querySelector(`.key[data-key="${e.keyCode}"]`); + let audio = document.querySelector(`audio[data-key="${e.keyCode}"]`); + + if(!div) + return undefined; + + div.classList.add("playing") + audio.currentTime = 0; + audio.play(); + + let keyArr = document.querySelectorAll(".key"); + + keyArr.forEach(element => + { + element.addEventListener("transitionend", function() + { + element.classList.remove("playing"); + }); + }); + }); \ No newline at end of file