Home Developer Blog

JS 30 Day 1

Live Demo

First ever blog post here. I am still learning the ropes with jekyll. This first set of posts will be going through the javascript30 course. Javascript 30 is a free course provided by Wes Bos. You can check that out here. My hope is to retoactively supply links for these deployed assignments. I am looking into setting that up soon. Apart from that I will be posting my throughts and process for going through these assignments as I learn more about Javascript.

The Task:

The task is to create visual keys on the screen that will display a sound name and the appropriate keyboard key that, when pressed, will trigger the sound. As an added bonus these should be clickable as well.


Trying to accomplish the buttons to be clickable threw me for a loop while following allong with the video. I had to step back and break down what was actually happening before I figured a solution out for it. I ended up grabbing onto innerHTML and throwing it through a switch statement that felt really hacky. The other thing that bothered me but was definitely self inflicted was when I held down a key or if I clicked as fast as I could -- I would end up breaking the button and the "playing" class would stay and never get removed. I resolved this by changing around the removeTransform function into just a transform function and then applying a time delay to remove the applied class once it was set.

All in all I really felt like I hacked my way through this one and I'm still considering trying to refactor it. Either way, until I get these deployed here is a link to the source code for day1.