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>