Drum Machine Review Please! v 2.0

Code Feedback
1

Hello campers, Please review my drum.

I didn’t include FCC test suite on purpose to have more freedom to structure my code.

Design is inspired by Wes Bos.

Thanks in advance!

https://build-a-drum-machine.herokuapp.com/

1 Like
2

Looks good - when I hit one of the heater buttons the label goes outside of the display box (firefox, didn’t check other browsers) - you could maybe also add the ability to click the buttons instead of just using the keyboard

1 Like
3

Interesting, that never happens on Chrome!

Thanks I will put that into consideration.

1 Like
4

@shimphillip Good job. I agree with @moT01 . The UI, though, looks a lot very similiar to Wes’s project. Maybe change the buttons colors around a bit.

I saw someone put a record feature on theirs. That would be really cool.

5

Hey @shimphillip, looks nice, i was kind of playing for a long time, just one thing i see, heater texts gets overflow out of the box in firefox, but in chrome it’s fine, since chrome is too brilliant.! Rest of all i enjoy it.

6

Appreciate the feedback Guys, I will work on them.

1 Like
7

Alright guys I made the changes! Only took couple hours :wink:

#patch notes

  1. Labels won’t go outside of the display box in firefox.
  2. Changed button colors
  3. Added record feature. This is kind of primitive though. I am just saving keystrokes in array and play them using setTimeout but I want to replicate actual intervals from user inputs as well. Any idea how I can implement this?

I really appreciate the feedbacks you guys gave me. @Sujith3021 @b3u @moT01 Feel free to give me more if you have any!

P.S If the page stays the same, try refreshing or clearing your cookies/cache.

1 Like
8

very nice! I always thought a record button should be added to the drum machine project.
Couple of things I noticed from the design perspective:

  • the middle display area changes its size depending on how long the audio label is. I found that to be very distracting and I would suggest you fix its size (at the bigger end obviously) to avoid the unexpected button movement around it.
  • the record button is awesome! but it replays everything back fast. So maybe version 3.0 can allow setting the playback speed. ( Definitely a nice to have! Don’t do it unless you have time and really want to!)

I finished my drum machine project recently and I made it super simple so I totally get how much work it is to add those extra features! Nicely done!
(this was mine: https://codepen.io/hbar1st/full/RBqLjb/ )

2 Likes
9

Thanks for your suggestions. I will work on them :slight_smile:

I just checked out yours. It looks great, I like the animations you have going there!

1 Like