diff --git a/01 - JavaScript Drum Kit/img/bg.jpg b/01 - JavaScript Drum Kit/img/bg.jpg new file mode 100644 index 0000000000..590036d636 Binary files /dev/null and b/01 - JavaScript Drum Kit/img/bg.jpg differ 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..3b6f976460 --- /dev/null +++ b/01 - JavaScript Drum Kit/index.html @@ -0,0 +1,60 @@ + + + + + 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/js/drum.js b/01 - JavaScript Drum Kit/js/drum.js new file mode 100644 index 0000000000..8bf5264ab1 --- /dev/null +++ b/01 - JavaScript Drum Kit/js/drum.js @@ -0,0 +1,37 @@ +function playSound(e) { + let keyCode; + if (e.type === "click") { + keyCode = e.currentTarget.dataset.key; + } else { + keyCode = e.keyCode; + } + + const audio = document.querySelector(`audio[data-key="${keyCode}"]`); + if (!audio) return; + audio.currentTime = 0; + audio.play(); + showStyle(e); +} + +function showStyle(e) { + let keyCode; + if (e.type === "click") { + keyCode = e.currentTarget.dataset.key; + } else { + keyCode = e.keyCode; + } + + const key = document.querySelector(`.key[data-key="${keyCode}"]`); + key.classList.add("playing"); +} + +function removeTransition(e) { + if (e.propertyName != "transform") return; + this.classList.remove("playing"); +} + +const keys = document.querySelectorAll(".key"); + +keys.forEach(key => key.addEventListener("transitionend", removeTransition)); +window.addEventListener("keydown", playSound); +keys.forEach(key => key.addEventListener("click", playSound)); diff --git a/01 - JavaScript Drum Kit/style.css b/01 - JavaScript Drum Kit/style.css index a69d6b635d..78d0cdd937 100644 --- a/01 - JavaScript Drum Kit/style.css +++ b/01 - JavaScript Drum Kit/style.css @@ -1,51 +1,52 @@ html { - font-size: 10px; - background: url(https://i.imgur.com/b9r5sEL.jpg) bottom center; - background-size: cover; + font-size: 10px; + background: url(./img/bg.jpg) bottom center; + background-size: cover; } -body,html { - margin: 0; - padding: 0; - font-family: sans-serif; +body, +html { + margin: 0; + padding: 0; + font-family: sans-serif; } .keys { - display: flex; - flex: 1; - min-height: 100vh; - align-items: center; - justify-content: center; + display: flex; + flex: 1; + min-height: 100vh; + align-items: center; + justify-content: center; } .key { - border: .4rem solid black; - border-radius: .5rem; - margin: 1rem; - font-size: 1.5rem; - padding: 1rem .5rem; - transition: all .07s ease; - width: 10rem; - text-align: center; - color: white; - background: rgba(0,0,0,0.4); - text-shadow: 0 0 .5rem black; + border: 0.4rem solid black; + border-radius: 0.5rem; + margin: 1rem; + font-size: 1.5rem; + padding: 1rem 0.5rem; + transition: all 0.07s ease; + width: 10rem; + text-align: center; + color: white; + background: rgba(0, 0, 0, 0.4); + text-shadow: 0 0 0.5rem black; } .playing { - transform: scale(1.1); - border-color: #ffc600; - box-shadow: 0 0 1rem #ffc600; + transform: scale(1.1); + border-color: #ffc600; + box-shadow: 0 0 1rem #ffc600; } kbd { - display: block; - font-size: 4rem; + display: block; + font-size: 4rem; } .sound { - font-size: 1.2rem; - text-transform: uppercase; - letter-spacing: .1rem; - color: #ffc600; + font-size: 1.2rem; + text-transform: uppercase; + letter-spacing: 0.1rem; + color: #ffc600; }