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.

Thoughts:

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.