This project was created with Parcel. For familiarization and setting additional features refer to documentation.
This is a sound kit project made by me to demonstrate and practice my js skills.
The goal for this project is to build a drum kit app that runs in the
browser. The main concepts are key events and CSS animations. Key events begin
with using the <kbd> HTML tag. Within each tag, the data-key attribute is
created and its value is set to the key code value for each key. For example,
the letter ‘U’ on the keyboard has a key code of ‘85’, the ‘K’ on the
keyboard has a key code of ‘75’, and so on. To make the pressed key play its
assigned sound, it’s bound to the <audio> tag with the data-key value.
In this project we have a clear context for what the JavaScript needs to do, which is:
- Listen for a keydown event to play a drum sound
- Animate the keys on the screen when they are played
When a drum key is pressed, the event listener listens for the CSS transition property to end. With the event listener implemented, each drum key displays the transition, plays a drum sound and returns to its original state automatically.
