JQuery Setup Locally Not Working


I usually try to setup all my exercises locally and usually successfully. :laughing:

I’m struggling with this particularly setup. The code works on freecodecamp but not locally.

As anyone been able to set this up themselves locally?

Here’s the code:

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
            $(document).ready(function() {
              $("button").addClass("animated bounce");
              $(".well").addClass("animated shake");
    <!-- Only change code above this line -->

    <div class="container-fluid">
        <h3 class="text-primary text-center">jQuery Playground</h3>
        <div class="row">
          <div class="col-xs-6">
            <div class="well" id="left-well">
              <button class="btn btn-default target" id="target1">#target1</button>
              <button class="btn btn-default target" id="target2">#target2</button>
              <button class="btn btn-default target" id="target3">#target3</button>
          <div class="col-xs-6">
            <div class="well" id="right-well">
              <button class="btn btn-default target" id="target4">#target4</button>
              <button class="btn btn-default target" id="target5">#target5</button>
              <button class="btn btn-default target" id="target6">#target6</button>

What is the exercise? And what does not work?

1 Like

I took a look at what they load, because using .addClass() the class has to be defined somewhere. Those definitions come from two packages:

    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.css" rel="stylesheet">

As you can see in both cases you’re importing css, that jquery adds to a target HTML element. Just add those two lines in the <header> tag. Btw, this approach that you use is really good for learning, well done.

1 Like

They weren’t working at all on all of the JQUERY exercises. They work on the free code camp platform but not locally. I didn’t have any issues with the bootstrap exercises using CDN locally.

So after adding those two lines of code its now working.

Is there any documentation I can read on the fix… I’m not sure if I understand the “why” its not working part?

I think I just understood. JQUERY only invokes those selectors. They aren’t built in. So I could have created my own selectors and this would have also worked.

1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.