Skip to content

Latest commit

 

History

History
26 lines (22 loc) · 1.53 KB

README.md

File metadata and controls

26 lines (22 loc) · 1.53 KB

JavaScript Drum Kit

Requirment

When click key, corresponds button on screen should place a highlight effect, and the corresponds radio should be played.

Improvement

  • keyCode is deprecated now, so changed to key.
  • hover effect on button.
  • User can click the button on screen to trigger the effect change and sound.

Basic Guide

  • add listener to listen to keydown event on window.
  • get key value, use querySelector to find correspond button (div) and radio.
  • trigger the highlight effect by add class, call play() to play radio, you also have to set radio start point first.
  • remove the highlight effect after the animation finished. (listent to transitionend event).
  • listen to click event on button, you should be carful of the different between e.target and e.eventTarget.

Relevent Resources