I thought I would share my Front End Drum Machine with the community. From a UI perspective it isn’t the best example even though it passes all of the tests, any advice on this would be appreciated.
I wanted to share this as I have a implemented it using react-bootstrap which I haven’t seen in a lot of projects here. I have encountered a couple of problems with this approach and I was wondering if anyone has had similar experiences .
I implemented the drum machine as a modal. The first issue is that the FCC test script hamburger menu doesn’t work if the modal show attribute is set to true, however I need this set to true as I want the modal to appear when the page loads, I see this when I run this locally and on codesandbox.io. I can solve this by removing this attribute (show={true}) from the code and reloading the page, selecting the drum machine test from the menu, and then adding show={true} back to the code. Now when the page next reloads the hamburger menu stops working again, but as the drum machine option is selected the tests can be run.
Another issue is that when the drum pad is in mobile mode the letters don’t sit right within the buttons, I spent a long time trying to resolve this but it feels to me that this is a react-bootstrap issue.
Besides these issues any feedback on any aspect of my drum machine is welcome.
I had a play using the tab key, which I admit I hadn’t previously done, and although I was able to play a few notes I eventually saw this error as well. It seems to work fine if I only use the mouse, and the tests are passing.
The file it occurs in is part of the react-bootstrap distribution (../node_modules/react-bootstrap/esm/Modal.js). I saw this a few times when I was developing the project in the early stages but not for a while now. This one will need a bit of digging I fear.
A project like this should be able to be used with keyboard only. And yes, I have a feeling it is related to your use of a modal window. Just curious, why are you doing this?
@lasjorg I have tried the fix you suggest, I’m not seeing this error occur when I run it locally but it still seems to happening on codesandbox.io, not sure why this is but I will keep looking at it.
I choose to use react-bootstrap and a modal to help me learn these components as I hadn’t used them before (I did the previous front end projects in React but I didn’t use much Bootstrap or modals), and from a learning perspective it has been a useful exercise. In hindsight though I don’t think this was the best design choice for this particular project, I may have another go at it with a different approach.