Fitter happier drum machine

hi there!

this is my first real effort project. if anyone has some constructive criticism, id love to hear it. my main goal was a fun UI with clean d.r.y. code, but im sure there are many improvements to be had.

fitter happier drum machine

thanks for looking!


1 Like

Background image can be improved. ; )

Also, when I hit one button multiple times, sound restarts, but when I hit multiple buttons, sounds overlap. It is good if behaviour is consistent.

1 Like

Wow this is really really cool!! Nice Job!
I liked the image, the header and vibe of the page. They all totally match.
Loved the clean HTML!
Also Colors, fonts and the design of centerpiece is top-notch. Keep it going! :call_me_hand:

I can suggest some future steps like how to add a screen before this to shock the user even more but even as is this is a neat project.

1 Like

This is definitely one of the more interesting drum machines I’ve seen in a while :slight_smile: I like the unique styling and sounds. And I like the way the sounds function consistently for both keyboard and mouse. It’s responsive to both changes in view port width and text size (although I think you should use em units for the widths/heights so the buttons grow proportionately as the text size increases).

Speaking of buttons, each of those <div>s you are using for the buttons should probably be actual <button>s. This gains you extra accessibility for both keyboard and screen reader users. As a general rule you should always try to use the semantically correct HTML element when available.

My only other thought is that you implemented the bare minimum to pass all the tests, which is fine, but usually any type of app that plays sound would have at least a volume control.