Drum Machine Feedback

Drum Machine Feedback


Hi guys just finished my drum machine: https://codepen.io/mav1283/pen/yqpdep , what you think? It’s passing all test on Chrome and not on Firefox and Brave, i don’t get past on test 8… Also the progress bar for the volume range isn’t showing up except on Firefox.


I like it a lot. Very good job. The only thing is i don’t hear the sound for “Hi-Hat-Close”. Hope i’m not so deaf :slight_smile:


@sorinr Thanks man, you can turn up the volume :slight_smile:


Yea. You made my day :slight_smile: Didn’t looked up at my volume.


Nice work!! I like the direction you went with your project. Really cool and the sounds were original. When I revisit my own to make improvements in the future I will incorporate some of your features!! I really like my own but I kinda like yours a bit better (a little frustrating to admit…). I applaud you @mav1283 I need to work harder lol.

Check out mine if you like.


@j8ahmed Thanks for your kind words man, yours is cool awesome too, you could add additional functionality to it like add the percentage of volume in the display when you slide the handle… Try using sampleswap: https://sampleswap.org/ it’s where i find and used all my sounds, and it’s also suggested by our fellowcampers , and for your storage Cloudinary: https://cloudinary.com/ again suggested by the awesome community here… I’m working on the calculator now and struggling :sweat: with it


Oh that is great! thanks for the links.

I have not started the calculator project yet. I need to pivot a bit before going back in lol.

Also, have you heard any tips from our fellow campers on how to get familiar with github and gain some hands on experience? I am trying to do so before applying for some remote jobs on codepen. I would really appreciate any info. I am just googling away with mediocre results.


There’s quite a ton of github tutorials on youtube, here’s my favorite: https://www.youtube.com/watch?v=Y9XZQO1n_7c you just need to download and install git and try the basics like cloning etc, push and pull stuff. if you’re using Visual Studio Code as your text editor it already has it,


@mav1283 Thankyou Again! I really appreciate the information. I will look into it!


You have great taste with the layout and UI, for that Drum Machine, I definitely use your project as inspiration for mine. Just finished mine using Vue, here is my copen link https://codepen.io/renmasuo/full/NBJWBg


@renmanimel Thanks for the kind words man, yup i wanted it to look like a real drum machine similar to Roland or Yamaha… Your work is beautiful! Just add a padding to the body so it looks good on mobile screens… I hear many great things about Vue, have yet to try it!


@mav1283 How long did it take you to complete this project, including the design and react? As in, how many days and hours per day did it take you?

The reason I ask is because looking at it, it seems like it would take may well over a week to do something like that if I were putting in around 4-5 hours a day.


@Embustero I guess around 2-3 weeks cause i’m learning other stuff, like going back and forth with css grid :slight_smile: it was my first time learning react and it’s tough for me, having a hard time with the concept of passing props lol, but i made another one, here’s my pure vanilla js version: https://my-awesome-vanilla-drum-machine.netlify.com/ --> this was based on Wes Bos javascript30 tutorial:https://javascript30.com/ – i highly recommend it :slight_smile: just register and follow his tutorial. I based all 2 versions on actual drum machine like roland or yamaha.