Explanation needed: JS not working on codepen

#1

Hey guys, I’m a newcomer at the Camp! and new user of codepen so I wanna share a doubt in hope that someone can provide me an answer :frowning:
I’m currently working on the portfolio challenge (yay!) but some of the JS code I wrote don’t do the desired function on codepen, buuuuut, it works on codeply (and as a normal page).
Here’s the PEN: https://codepen.io/Fvzion/full/gvZVXa/ and here’s the desired functionality in Codeply: https://www.codeply.com/go/mNAiiwG123

Obviously the code isn’t wrong but I really want to know why the codepen version doesn’t works.
Hope someone could explain me the reason :frowning:

#2

This should be a simple fix.
It appears the codeply website takes care of loading bootstrap and jquery more automatically.

If you read the JS portion of the getting started bootstrap docs:
https://getbootstrap.com/docs/4.0/getting-started/introduction/#js

You will see it says that jquery must be loaded before bootstrap.

If you were working locally you would have to structure your code this way and the same is true for codepen settings.

Simply drag the jquery above/before the bootstrap js like so:

drag
drag1162×161 17 KB

#3

Thank you sir!
I didn’t read that part but it’s very logic now that I see it, my script was trying to get the functions from bootstrap instead from jquery!!
Thank you again, now my brain can focus on finish the design.

#4