How the HTML is calling the javascript in this demo?

Total nubi to Javascript here. I tried to copy cut and past the HTML, CSS, and the JS from this demo into their respective local HTML, CSS, and JS files. I know enough HTML and CSS to get the HTML to ‘call’ the external css style sheet. But I don’t begin to understand what is running in the background to get the javascript to work.
I looked at several tutorials on ways to call the script, but so far it is not working.
I assume it goes in the HTML…but where and how?

At the bottom-right of the codePen page is an export option. The export has a src folder that contains the codePen code, and a dist folder that is ready to be run locally for you. Normally the scripting files are loaded with a <script> tag at the end of the body.

2 Likes

Hi there posweyb,

The demo, I presume, is using jQuery
and then setting inline CSS. :eek:

It would be better for the javascrpt to use
classList to do the lifting. :winky:

Javascript is not my forté but here is a
Vanilla example…

Full Page View:-
https://codepen.io/coothead/full/MWjqJPy

Editor View:-
https://codepen.io/coothead/pen/MWjqJPy

coothead

2 Likes