Drum Machine React - exporting from CodePen to VsCode

Hi, I was trying to export my Drum Machine project https://codepen.io/NicoCastel/pen/vYdexwr?editors=0010 with the idea to create a Repo on GitHub. To make this, I use create-react-app and all the things that come with it, because it seems pretty easier instead of make it from scratch (I’m not able in a reasonable time yet).

I was testing the app, and I noticed that, on the CodePen app, the volume works ad intended, but on the LocalHost, it doesn’t work. Any idea?

I can’t give you the Local files, but I have done something with import and export, and the app renders normal, except for that.

Why can’t you share the GitHub repo?

Without being able to test the code we will be hard-pressed to know exactly what is wrong.

1 Like

Ok, done, here is the link

after this little experience, I think it’s time to learn seriously how Git and GitHub work :face_in_clouds:

Open the browser console and look at the errors. There are 3 of them but the last is the one about the volume.

Uncaught TypeError: document.getElementsByClassName(...).forEach is not a function

getElementsByClassName returns an HTMLCollection which doesn’t have forEach on it. I would suggest you use querySelectorAll or you can turn the HTMLCollection into an array (you can use Array.from() or spread syntax).

Not 100% sure why it works on Codepen but I’m guessing the transpile done by Babel might have something to do with it.


BTW, keep the .gitignore that comes with create-react-app so the node_modules are ignored.

1 Like

Thanks for the help!

I think also that Babel could be the reason of that.