I did not use classes in this project. All code is written on hooks. It was hard to make it work. You can see the working project here and here. Also the project is on github. Please evaluate my work.
Nice job, really nice.
The design looks pretty simple, but it is not the main point for this challenge.
The slider that is responsible for volume level is not going to the very bottom. I mean, it looks like to be not 100% height of the parent element. This can be fixed.
As for the volume, I checked the drum machine in three browsers (Firefox, Chrome and Opera) and everywhere the volume slider works correctly. Perhaps I misunderstood something?!
Yes, it works correctly. But here is what I meant.
Do you see it now? When it is 0% it is not in the bottom of the brown element.
What browser do you have? In my browsers it looks like this:
All buttons should be clickable despite machine being turned of.
I’m using Firefox Quantum 60.1.0esr.
My OS is Linux, maybe that slider is differently shown up for different OS.
Thanks friends! Only now I realized that I tested my code only on a personal computer in Windows OS, and when I tested the code on mobile devices, I found a lot of bugs. The same, I think, will be in Linux. I’ll work on it. When I fix the bugs, I’ll let you know.
Bugs should be same(if any) on Win and Linux distro. Browsers are same across them, unless you use different browser at different OS. Also ctrl+f5 to clear page cache solves whole lotta problems.
use different classes when is turned of for when button is not clicked and when is clicked. That’s how i did it.
I use Firefox Quantum 69.0 (64-bit). After pressing ctrl+f5, nothing changed. Everything works fine (I mean Windows 7)
So no bugs? Coolio. Also ctrl+f5 is just forced clear old cache.