JQuery Setup Locally Not Working

Hello,

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">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      rel="stylesheet"
      href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
      integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf"
      crossorigin="anonymous"
    />

    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
      integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
      crossorigin="anonymous"
    />
    <link
      href="https://fonts.googleapis.com/css?family=Lobster"
      rel="stylesheet"
      type="text/css"
    />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
          <script>
            $(document).ready(function() {
              $("button").addClass("animated bounce");
              $(".well").addClass("animated shake");
            });
          </script>
  </head>
  <body>
    <!-- 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">
            <h4>#left-well</h4>
            <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>
          </div>
          <div class="col-xs-6">
            <h4>#right-well</h4>
            <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>
            </div>
          </div>
        </div>
      </div>
</html>

Hi,
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.