Issues getting jQuery to work off-platform

Thank you in advance to anyone who can help me figure this out. I am trying to get an html file to load the ‘jQuery Playground’ from the Front End Libraries course. Everything else seems to load but the buttons dont ‘bounce’ on load and the well doesnt ‘shake’. I’m really clueless as to why this isnt working. It works in the editor in the course online but not when I try it myself. This is my code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <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>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
      integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
      crossorigin="anonymous"/>
      <link
        rel="stylesheet"
        href="style.css">
  </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"
              id="target5">#target5
            </button>
            <button
              class="btn btn-default"
              id="target6">#target6
            </button>
          </div>
        </div>
      </div>
  </div>
</body>
</html>

the animations are from a yet different library, I don’t remember what it is

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