Drum Kit Project 🥁

This project was built by following Wes Bos's JavaScript 30 course. It simulates a virtual drum kit that plays different drum sounds when specific keys are pressed on the keyboard.

Code Sample

function playSound(e) {
  const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
  const key = document.querySelector(`.key[data-key="${e.keyCode}"]`);
  if (!audio) return;
  audio.currentTime = 0;
  audio.play();
  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);

What I Learned

• Using JavaScript event listeners for keydown events
• Selecting DOM elements with data attributes
• Playing audio files dynamically in the browser
• Adding and removing CSS classes to trigger animations