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 Array.map():

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 />
            {soundArr.map((soundClip, index) => <DrumPad audioName={soundClip} key={keyArr[index]} cap={keyArr[index]} />)}
        </div>
    );
}

• 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) {
        pressedSound.play();
        document.getElementById("display").innerText = pressedSound.parentElement.id;
}

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%), 
    url('https://t4.ftcdn.net/jpg/03/58/36/11/360_F_358361101_z9baaIEmkyst0OQ8mov82r9hen7glZGb.jpg');

Afterwords

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!