Jquery, bootstrap are not loading in local dev environment

JavaScript
3

  • The classes used in the challenge are from Bootstrap V3. The well class was removed in V4 (migration docs).

  • The classes used for the animations are from the Animate.css library, so you need to add that as well.

  • Version 4 of Animate.css added prefixes (Migration from v3.x and under) so you have to add the prefixes or use the animate.compat.css version.

  • Just as an FYI, the slim version of jQuery does not include the ajax and effects modules, just so you know, in case you need them. Also, you are missing the starting <html> tag in your HTML.

Updated HTML code with Bootstrap V3, latest jQuery full version, and using animate.compat.css just for simplicity. I removed PopperJS, you can add it back if needed (as far as I know the curriculum does not use it).

<!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" />
    <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="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.compat.css"
    />
    <title>Jquery playground</title>
  </head>
  <body>
    <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>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
      integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
      integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
      crossorigin="anonymous"
    ></script>
    <script>
      $(window).ready(function () {
        $('button').addClass('animated bounce');
      });
    </script>
  </body>
</html>
1 Like