Well, first I decided to get rid of the deprecated keyCode property so I'd stop seeing strikethrough lines in my code. It was a really simple fix. Turns out the property.key works quite well and...just uses letters.
I also decided that I wanted to change up the content. Instead of a drum kit, I wanted to make a soundboard with some clips from our podcast. This was a really easy substitution—the hardest part was locating audio clips in our old files, and that was just a matter of taking the time to do it.
The second tricky (though not very) element was making the app work on mobile devices. See, the original uses
keydown events to trigger the sounds and the visual transitions on the page. But on a mobile device, there isn't a keyboard to use. Instead, I needed to make a good old-fashioned click event on each of the triggers for the sounds.
The biggest takeaway I need to investigate is
document.querySelectorAll. I thought they'd be equivalent, but the
forEach command that works so well on querySelector...does not work on getElementsByClass. So, that will be something I plan to investigate further.
Additionally, I need to better understand the options for the css
transform property. I first made changes to the size of objects individually, but seeing the use of
transform: scale(1.1); was enlightening.
So, another day of coding down, and a fun project as the result.