Front-End Libraries Project #3 – Drum Machine
Yesterday, day 91, was the official start of my next Free Code Camp project – a virtual drum machine. This project is relatively self-explanatory, but I’ll still cover the basic requirements in a moment. First, I want to address the elephant in the room.
Don’t worry, Lunchbox, I’m not talking about you.
I’m talking about the fact that I kind of disappeared yesterday without posting any sort of Twitter update or blog post. The truth is, I had a really good morning coding. Then I had one of the worst headaches I have experienced in a long time. I couldn’t handle light or sounds or pretty much anything until somewhere around 4-5 pm. By then, I could barely think straight because of the medicine that I took. I seriously don’t do well with any type of medicine, especially without food.
In any case, I figured it would be fine if I waited until today to post an update. After all, I completed my coding in the morning, so at least I already did the important part.
Now that that’s out of the way, let’s get back to the drum machine project.
Overview of the Drum Machine
This application is a simple virtual drum pad that plays an audio clip whenever the user presses on each pad or types in the key associated with each pad. As usual, you can view an example of the drum machine, as created by Free Code Camp.
Requirements / User Stories:
- I should be able to see an outer container with a corresponding id=”drum-machine” that contains all other elements.
- Within #drum-machine I can see an element with a corresponding id=”display”.
- Within #drum-machine I can see 9 clickable drum pad elements, each with a class name of drum-pad, a unique id that describes the audio clip the drum pad will be set up to trigger, and an inner text that corresponds to one of the following keys on the keyboard: Q, W, E, A, S, D, Z, X, C. The drum pads MUST be in this order.
- Within each .drum-pad, there should be an HTML5 audio element which has a src attribute pointing to an audio clip, a class name of clip, and an id corresponding to the inner text of its parent .drum-pad (e.g. id=”Q”, id=”W”, id=”E” etc.).
- When I click on a .drum-pad element, the audio clip contained in its child audio element should be triggered.
- If I press the trigger key associated with each .drum-pad, the audio clip contained in its child audio element should be triggered (e.g. pressing the Q key should trigger the drum pad which contains the string “Q”, pressing the W key should trigger the drum pad which contains the string “W”, etc.).
- When a .drum-pad is triggered, a string describing the associated audio clip is displayed as the inner text of the #display element (each string must be unique).
My Progress (So Far)
While the description of this project is much simpler than the last, the coding and implementation of it are far from simple.
Yesterday morning, I was able to create the HTML and CSS for the project. I also started creating my functional and class React components. Admittedly, I spent quite a bit of time this morning making some changes to the overall appearance of my drum machine. I thought it looked a little too similar to the one created by FCC, and I wanted to put my own spin on it. Because of this, I am not quite as far along as I would have hoped after two days. After all, I completed the last project in two days, so I set the bar kind of high. But again, this project isn’t as simple as the last, so it makes sense that it is going to take a bit longer.