Particle Javascript (Resolved)

At a glance

The community member is trying to add a JavaScript code from Codepen to their HTML, but is having trouble getting it to work. They have tried embedding the CSS and JS code, adding an ID, and checking if Client Only is turned off, but nothing is showing up except a red background.

The comments suggest that the community member needs to include the particles.js library and provide the link to their build for others to help. After some back-and-forth, another community member provides the solution: the community member should add the CSS and JavaScript code directly in the HTML Embed, without needing to add any IDs or classes. The solution is marked as resolved.

Useful resources

CCandle

How to add this Javascript Code? https://codepen.io/VincentGarreau/pen/bGxvQd
I tried to embedd the CSS wrapped in <style></style> and the JS wrapped in <script></script> into HTML Embed Code. Then added this ID to a box: particles-js, but nothing is shown except the red background. I also checked if Client Only is turned off.

31 comments

CCandle

How to add Javascript?

OOleg Isonen

You need to share the link to your build for anyone to look into it

CCandle

Here is the link: https://p-73071613-a5ef-4302-86a2-b870752f952d.apps.webstudio.is/?authToken=71d5bf8c-f5b8-4855-93c0-5abc6f2d97f3&mode=preview

OOleg Isonen

what is particlesJS?

OOleg Isonen

I don't see any library you added

OOleg Isonen

Attachment

OOleg Isonen

in codepen this library is added

CCandle

Thanks for helping. I tried to add this to my Code, but it didn't work:

<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js">
</script>

<script src="https://threejs.org/examples/js/libs/stats.min.js">
</script>

or the two within <script></script>

src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"

src="https://threejs.org/examples/js/libs/stats.min.js"

OOleg Isonen

have you tried asking gpt?

CCandle

yep I just tried that and also tried different orders of putting the code, but nothing seems to work. I must be missing something noobish >.<

<style>"CSS-Code"</style>

<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<script src="https://threejs.org/examples/js/libs/stats.min.js"></script>

"HTML-Code"

<script>"JS-Code"</script>

Join the Webstudio community

Particle Javascript (Resolved)