How to add jQuery CDN Link in .html?

1

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
2

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
3

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

w
w993×92 4.02 KB

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

5

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

6

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)

7

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

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

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

10

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

12

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.

e
e1912×1075 106 KB

13

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