First exercise in working my way through the JavaScript 30 tutorial (http://javascript30.com).
In the first exercise we build a little drum kit to practice:
- Key events
- Playing audio
- Listening for the transition and animation end events
I took a little extra time after completing the tutorial to customize the exercise. Some things I added:
- Change the background image
- Fix the background to be centered and not repeating
- Change the key codes to reflect The Beets hit song, "Killer Tofu"
- Break the words out into two lines
- Center the words vertically and horizontally
- Add a more cartoon-y font
- Change up the colors to match The Beets logo
Things I would want to improve:
- Making the site responsive, currently the background does not optimize for smaller devices
- The keys should shrink as you scale down the page
- Separating out the JS from the main index file
- Find a solution for having two different "L" sounds. Or make both L's active if clicked.
- Change the audio to reflect parts of the actual "Killer Tofu" song
- Add an easter egg that if the right combo/tempo of song is played, it brings up a YouTube video of the full "Killer Tofu" song (https://www.youtube.com/watch?v=p7c3bQQmwVE).