DEV Community

Cover image for Day 20-24: Drum Machine

Posted on


Day 20-24: Drum Machine

The project

As the name suggest, we're gonna make a site with drum pads that play sound when triggered πŸ₯. The site was made with React and SASS. I figured I'll take 3 days to complete this, but circumstances pushed this to 4 days. Life always get in the way, so I should be more prepared about it πŸ’ͺ

What I learned

  • How to dynamically render components in React

We can use array and its methods, such as

render() {
    const soundArr = ["blip", "clan", "clap", "cymbal", "kclick", "piano1", "piano2", "snaps", "whoop"];
    const keyArr = ["Q", "W", "E", "A", "S", "D", "Z", "X", "C"];

    return (
        <div id="drum-machine">
            <p id="drum-title">Drum Machine</p>
            <Display />
            {, index) => <DrumPad audioName={soundClip} key={keyArr[index]} cap={keyArr[index]} />)}
Enter fullscreen mode Exit fullscreen mode
  • onkeydown event on the document

To detect key presses on the HTML document, we can use the onkeydown event:

document.onkeydown = (e) => {
    let pressedSound = document.getElementById(e.key.toUpperCase());
    if(pressedSound) {;
        document.getElementById("display").innerText =;
Enter fullscreen mode Exit fullscreen mode

Note that there used to be onkeypress event, but it is now deprecated.

  • Add gradient overlay over background image

We can use background-image CSS property for this:

background-image: linear-gradient(180deg, rgba(0,255,233,0.0) 0%, rgba(0,0,0,1) 100%), 
Enter fullscreen mode Exit fullscreen mode


It's nearing the end of Ramadan, which means preparation for Eid is incoming. It will be a very busy week. Hope I can still continue doing this throughout Eid celebration.

Anyway, happy Eid for Muslims around the world! ✨

Follow me on Github!
Also on Twitter!

Top comments (0)

11 Tips That Make You a Better Typescript Programmer


1 Think in {Set}

Type is an everyday concept to programmers, but it’s surprisingly difficult to define it succinctly. I find it helpful to use Set as a conceptual model instead.

#2 Understand declared type and narrowed type

One extremely powerful typescript feature is automatic type narrowing based on control flow. This means a variable has two types associated with it at any specific point of code location: a declaration type and a narrowed type.

#3 Use discriminated union instead of optional fields


Read the whole post now!