Drum machine functionality

Getting slightly annoyed with the functionality and layout of this project. The controls and display will not centre within the #drum-machine parent container, nor will the functionality work. Could someone take a look and give me some advice please

The drums one (codepen.io)

You misspelled onclick (you have onlcick)

As for the layout, I don’t see any CSS used for centering. Use auto margin, flexbox/grid for centering elements.

Thank you that was a critical mistake. I’ve corrected this and selected the correct id and now it works fine. The CSS is a nightmare

CSS needs to be approached and learned like JS. With patience and commitment.

It looks simple enough but it takes time to learn it well. It isn’t just an afterthought, it is a vital part of any website/app. If you need help you can also look at some CSS frameworks but I would highly suggest learning CSS as best you can first.

CSS layout has gotten a lot simpler with flexbox and grid. Learn them, use them.

Thank you. CSS sorted.
Is it possible to add React to this code?
I’ve written most of in it html and javascript and sitting here looking at it thinking I need to re-write it to add react components

The drums one (codepen.io)

Thank you. CSS sorted.
Is it possible to add React to this code?
I’ve written most of in it html and javascript and sitting here looking at it thinking I need to re-write it to add react components

The drums one (codepen.io)

Well, you should have to rewrite it in React. But it is a good way to learn React if you are in the process of learning it. But it’s not like you “just” replace plain JS with React, it takes a little work to rewrite it.

BTW, you are still missing the keyboard handler code. The sounds should play when pressing the keys.

so I couldn’t add the React onKeyPress to the current code and render to the DOM?

You have keypress events in vanilla Javascript, no need for React: KeyboardEvent - Web APIs | MDN

Thank you I found the correct event for the style of my code

1 Like