Hello all, this is my first time posting a project here. Here is the link to my drum machine, which was created using React & vanilla CSS: My Drum Machine Project - Webpage My Drum Machine Project - Github repository
*edited to add my new GitHub links instead of Codepen, because I finally figured out how to get my React project onto Github and deploy it on Github Pages.
I avoided looking at the sample or other people’s drum machine code until I got mine to function, just so I could hash things through my own research. I was pretty happy to get it working!
Now that I’ve looked at some other people’s code I can see how my solution is a bit inelegant in that I am repeating HTML for each button. Not to mention, I didn’t use an HTML element for the audio, so it doesn’t pass three of the tests.
On my next loop, I want to:
Rewrite the React section to be less redundant
Pass the remaining tests
Change the button appearance on click / keypress
Implement volume control
I would appreciate any feedback or suggestions on my code or UI so far! Thank you!
I usually don’t comment on styling choices, especially since I’m not very artistically inclined, but I want to give you a shout out for taking the extra time to make this look nice. I wish I could have made my drum machine look as slick.
And now for a few suggestions:
At the default font size it is responsive to changes in view port width but I am getting a horizontal scroll bar just a little before I hit the break point as I’m narrowing my browser. Not a game changer but I think since you have obviously tried to make this responsive that you should try to eliminate that unnecessary scroll bar.
Bigger problems arise when I manually increase the text size. The buttons start to overflow the main container and the right side content starts to overlap the buttons. If you don’t know how to manually increase the text size, using Firefox, go to the View->Zoom menu and activate ‘Zoom Text Only’. Then while holding down the Ctrl key scroll your middle mouse button to change the text size. It won’t take long before you see the issues. I will suggest that one way to help solve this problem is to use em units on your break points. For starters, just divide the pixel value you have by 16 to get ems and then you can adjust from there. Using em will automatically allow you to take into account both view port width and text size at the same time.
You probably should have an <h1> on this page and the content should be wrapped in a <main>. I think it’s as easy as changing div#title to an h1. Then, you might want the controls div to come before the pads div in the html, that way the <h1> will be at the top of the page (for screen readers). Then you can use flexbox properties to reverse them in the display so the buttons still show on the left.
Overall the interface is very nice. And another kudos for making the keyboard focus indicators on the buttons very clear. Almost everyone of these that I have seen before fails to do that.
Wow, thanks for your detailed feedback! Truthfully, I normally do not spend a whole lot of time on my UI for the projects unless I’m really interested. This one seemed fun, so I put a little more time in.
Thanks for bringing up the horizontal scroll bar issue. I should be able to correct that.
The text zoom issue is not something I would have thought of, so thanks! I will fix it.
I just updated to add an h1 element. Also moved the controls div up in the html and reversed the direction with flexbox-- good call on the accessibility concern. Also changed div#root to main.
Thanks for taking the time to provide feedback on my project!
I will investigate the delay. I noticed some delay on the first time I clicked each button, but afterwards it seemed okay. Not sure what could be causing it.
I think the cause may be that the first time playSound is called on a button click it has to create a new Audio object and get the sound file, so there is a delay while it is getting the sound file for the first time. I’m guessing if you created all of the Audio objects immediately when the app loaded then the first time you clicked a button the sound would play immediately. Also, if you cached all of the Audio objects you create at the beginning then you wouldn’t need to keep creating new Audio objects to begin with.
Very good project @loofmot. I like it. But, you are using duplicate font properties in your CSS code two times. You can find it by clicking on the down arrow and then “Analyze CSS” in the CSS code box.
The reason for that is because an audio file will be downloaded into the browser when clicking on the button. But, if you click on the same button, there will be no delay because the audio file is already downloaded.
@bbsmooth Thank you, that would have taken me some time to figure out. When I rewrite the code to pass the tests, I will look into creating the Audio objects when the app loads so there is no delay in the sound.
p.s. I have fixed the responsive issues with scroll bar and font size changes. I appreciate your very informative responses.
@paulsonstech Thank you for your kind feedback! I’ve eliminated the duplicate font properties
Thank you!
