How to add jQuery CDN Link in .html?

Tell us what’s happening:
Where should I add CDN Link in my Project? I have made a Project in Codepen, and over there It’s added in the Javascript column. But in my local machine do I have to add it in .html or .js? I have tried adding it in my <head> of .html but it’s not working.

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Challenge: Build a Random Quote Machine

1 Like

You need to put it right before closing a body tag to allow HTML to load before the script. In HTML section as <script> is HTML tag

1 Like

Thanks snigo for answer. I have tried that as well but it isn’t working.

I did try to add after <script src="js/main.js"></script> but still no luck.

Can you show the full code of the html file.? The actual code and not a screen shot. Also, are you seeing any errors in the browser console? What is the folder structure of your project (you can provide a screen shot of that)?

How do you test presence of jQuery in the scope?

You can easily check if jQuery is being shipped by accessing this https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js in the browser, and to me, it works meaning that you have it in the scope

Here is the code of .html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Random Quote Machine</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="style.scss">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.10.2/css/all.css">
   
</head>
<body>
    <div id="wrapper">
        <div id="quote-box">
          <div class="quote-text">
            <i class="fa fa-quote-left"> </i><span id="text"></span> <i class="fas fa-quote-right"></i>
          </div>
          <div class="quote-author">
            - <span id="author"></span>
          </div>
          <div class="buttons">
            <a class="button" id="tweet-quote" title="Tweet this quote!" target="_blank">
              <i class="fab fa-twitter"></i>
            </a>
            
            <button class="button" id="new-quote">New quote</button>
          </div>
        </div>
        <div class="footer"> <a href="https://www.linkedin.com/in/zaid-irfan-khan-9a4b964b/" target="_blank">Zaid</a></div>
      </div>
      
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
      <script src="js/main.js"></script>
        </body>

</html>

And the Screenshot of the folder structure.
g
(Not a folder structure though)

you have js/main but your main.js is not in a js folder, it should be

<script src="main.js"></script>
1 Like

It does show us your folder structure. You can see @biscuitmanz’s reply for what the issue is.

Thanks biscuitmanz, I fixed it but I couldn’t get work my jquery CDN.

Yes I fixed it, but still my CDN link it’s not working.

Can you elaborate on what is “not working”? We do not know what you are trying to achieve inside main.js, because we can not see its contents.

Here is the project link on Codepen.

I am trying to get the same results on my local machine and after debugging I realized it’s the jQuery CDN Link which is not picking up.

Here is the Screenshot of the project on my local machine.

Thank you, everyone, I got the solution, I checked, I had added jQuery CDN Link in my .js file as well. I removed it from there and It worked.

But probably the main issue was js/main.js instead of main.js

Thanks @biscuitmanz

1 Like