Make a JavaScript Drum Kit in Vanilla JS! #JavaScript30 1/30
Why Stack Overflow recommends it
Stack Overflow users cite it mostly as the tutorial their own drum kit code comes from, then ask why the keydown or transitionend handling behaves differently in their version.
Recommended by 0 people across 0 different months, 2017 to 2023.
What it is
Wes Bos builds a keyboard drum kit in plain JavaScript as the first project in his JavaScript30 series. He walks through keydown events, selecting audio elements by data attributes, playing sounds, and using CSS transitions with transitionend to animate keys.
What people said
Cites Devon Rusinek · 2017-10 · Stack Overflow · on “'Make a JavaScript Drum Kit in Vanilla JS! #JavaScript30 1/30' Tutorial keydown event not registering”
I recently started the first project tutorial Make a JavaScript Drum Kit in Vanilla JS! #JavaScript30 1/30 [this video] as a part of the Javascript in 30 Days tutorial series by Wes Bos. I cloned the repository [LINK] off of Github and so I have started with the index-START.html file when I began watching the tutorial. As he first started making changes to the code at the 3:53 mark, he began inputting code in between the script tags that looked like this: `<script> window.addEventListener('keydown', function(e) { console.log(e); }); </script> ` When he ran the code in the chrome browser by typing the "d" key as it is a keyboard drumset, the console reflected that an event had taken place. However
Cites brenobarreto · 2019-12 · Stack Overflow · on “Keydown event triggering classList.remove doesn't work if the key is pressed too many times in a row”
I've implemented Wes Bos' Javascript 30 course's Drum Kit ( [this video] ), but something is odd. When a key is pressed, I add a class with key.classList.add('playing') , which transitions the key's div to a border-color: yellow , among other things, then removes the class again with this.classList.remove('playing'); once triggered by a transitionend event. It works fine, until I try to press a key many times really fast. Then, eventually the .playing class "sticks" to the div, ie, it's no longer removed. window.addEventListener('keydown', (e) => { const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`); const key = document.querySelector(`.key[data-key="${e.keyCode}"]`); if (!audi
Cites sagittariusAsparagus · 2022-02 · Stack Overflow · on “eventListener works within HTML file but not .js file (Drum Kit project)”
I am working on this project [this video] to make a drum kit using Vanilla JS. Everything has worked thus far, except the last step of removing a transition using an eventListener. In the tutorial the javascript code is within script tags in the HTML file, but I wanted to practice using an externally linked .js file. I think this is causing an issue with the last function to remove the transition, but I can't pinpoint why it doesn't work. HTML/CSS and JS below: <pre><code> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Drum Kit</title> <link rel="styl
Cites Shaveen Perera · 2023-08 · Stack Overflow · on “why am i getting null value eve if i press 'asdfghjkl'?”
window.addEventListener('keydown',function(e){ const audio = document.querySelector(`audio[data-key=${e.code}]`) console.log(audio); }); <div class="keys"> <div data-key="keyA" class="key"> <kbd>A</kbd> <span>clap</span> </div> <div data-key="keys" class="key"> <kbd>S</kbd> <span>hihat</span> </div> <div data-key="keyD" class="key"> <kbd>D</kbd> <span>kick</span> </div> <div data-key="keyF" class="key"> <kbd>F</kbd> <span>openhat</span> </div> <div data-key="keyG" class="key"> <kbd>G</kbd> <span>boom</span> </div> <div data-key="keyH" class="key"> <kbd>H</kbd> <span>ride</span> </div> <div data-key="keyJ" class="key"> <kbd>J</kbd> <span>snare</span> </div> <div data-key="keyK" class="key"> <