Jquery working inside CodePen but not inside Visual Studio Code

JavaScript
1

I built my random quote generator inside of CodePen and it works well.

I used jquery and jquery ui.

And now I want to transfer all of my projects from CodePen to Visual Studio Code.

So I copied the code from CodePen to my Visual Studio and when I launch a Live Server to see the results I get the empty box without text:

box
box943Ă—591 6.4 KB

This obviously indicates that my Jquery is not working, but why?

Here is a link to my pen: [https://codepen.io/Gamintor/pen/ExZENbV]

2

have you imported jQuery in the project you have opened with Visual Studio Code?

3

If you’ve pasted what is in the HTML there on CodePen: open the HTML page you’ve created in a browser, open the browser console. Is there an error? If so, what does it say?

4

Yes I have both the jQuery and jQueryUI which I need for the color changing:

imported
imported951Ă—663 49.4 KB

5

Absolutely nothing.

Console is empty. No errors.

6

Can you create a github repo to share the files?

7

and where have you linked index.js?

2 Likes
8

I have not lol.

Thanks a lot, I solved the problem by adding a babel CDN inside index.html file and added a script inside my body tags which links to my index.js.

9

You shouldn’t need the Babel runtime, there’s nothing there that needs it afaics, just adding the index.js link in a script tag should be enough

1 Like
10

Like this?

<script src="./index.js"></script>
11

Yep, shouldn’t need anything else. Babel is a tool to convert JavaScript code to JavaScript code (you have something using syntax that won’t work in a browser you want to run your code in → put it into Babel → get code that will run). There are very few reasons for putting it into a website. It’s almost exclusively used during development: converting code live is slow and uses a lot of resources. CodePen does have the option to use it, but none of the code you have would need it anyway afaics.

2 Likes
12

Yeah, but I tried now without Babel and the newQuote button isn’t working.

So I guess I need to use Babel.

13

I agree with Dan and his explanation - it doesn’t really make sense. Perhaps you have some ESNext feature in your JS.

1 Like
14

There is definitely nothing in the Codepen code that requires Babel and it wouldn’t work on Codepen (without Babel) if you did need it.

If you add Babel to the Codepen and view the compiled code (down arrow on the top right > View Compiled JS) you can see all it does is some formatting.

So there must be something else going on locally.

1 Like
15

How to check if there is something going on locally?

16

Use the browser console, see what errors it is throwing. Normally if something is missing, or you’re calling something incorrectly, it will tell you.

1 Like
17

I just did that and nothing is getting thrown in the console.

So when I use the <script src='./index.js'></script> it loads the page with random color and random quote, but when I click on the new quote button it isn’t working.

I then add <script type="text/babel" src='./index.js'></script> and everything works fine. Console never logs any problem in both of the cases.

18

type="text/babel" is specifically for using Babel, I don’t see how it would do anything without Babel.

I’m still not sure I understand your setup. Can you post the exact content of your HTML and JS file as you have it locally right now?

1 Like
19

Sure, here is a link to my github repo: [GitHub - Gamintor/quote.github.io]

20

No, I don’t think I have any new features