hi, while working on FCC assignments. I took some contents of the FCC playground and slap on html to play around with but it didn’t work the way it was intended to. Can anyone please look at this html page and tell me what I am missing? Thanks.
<!DOCTYPE html>
<html lang="en">
<head>
<title>jQuery Playground</title>
<meta charset="UTF-8">
<!-- jQuery Library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- jQuery Mobile -->
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<!-- Link below to add bootstrap to your page -->
<!-- <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/> -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- STYLES GO HERE -->
<!-- STYLES END HERE -->
<!-- jQuery -->
<script>
$(document).ready(function(){
//
$("#target1").css("color", "red");
// addclass function targets the button element to make it bounces
$("button").addClass("animated bounce");
// addclass function targets the class .well to make it shakes
$(".well").addClass("animated shake");
// addclass function targets the id #target3 to make it fade out
$("#target3").addClass("animated fadeOut");
// function .prop() allows us to adjust the properties of elements; in this case, it disabled element with id #target1
$("#target1").prop("disabled", true);
});
</script>
<!-- End -->
</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>
</body>
</html>
FYI, All the html and bootstrap css working find… Just the jQuery is not working. Except for the #target1 which the color text is red. So jQuery does work but not everything - animated (not working). I tried flipping import library around but nothing works. Thank you very much in advance.