[DAY 66-68] I built a drum set app using React

Hi everyone! Welcome back to another blog where I document the things I learned in web development. I do this because it helps retain the information and concepts as it is some sort of an active recall.

On days 66-68, after completing the first 2 projects in the front end course (the random quote machine and the markdown previewer), I successfully deployed the random quote machine and markdown previewer apps to github pages.

After that, I moved on to the 3rd project which is a drum machine.

What I did first is to write the HTML of the app by making div containers for the drum pad buttons, power toggle, display, and volume slider.

Each drum pad button having its own container, I also added the respective audio clips to be played for each button. After that, I made a function to handle presses and also event listeners to handle keydowns so that when I click a drum pad or press the key associated with it, the audio clip will play.

For the power toggle button, I looked up a tutorial on how to make a simple night-mode toggle button using input and label elements. However, I changed its function so that when the power toggle is set to FALSE, the whole app will not work.

For the display container, it pretty much displays the current audio being played as text.

Lastly, for the volume slider, I used an input element with a type attribute of range. I made a function so that whenever the slider is moved up or down, the volume will change correspondingly. I also slightly adjusted its design to match the color palette of the app.

Anyways, the link for the apps are:

Random Quote Machine: https://thomascansino.github.io/P41-Random-Quote-Machine/

Markdown Previewer: https://thomascansino.github.io/P42-Markdown-Previewer/

Drum Machine: https://thomascansino.github.io/P43-Drum-Machine/

That’s all for now, more updates in my next blog! See you there!