The code i used passed the challenge but it doesn’t work in Chrome. Why?
Your code so far
<script>
$(document).ready(function() {
$("#target1").css("color", "red");
$("#target1").prop("disabled", true);
$("#target4").remove();
$("#target2").appendTo("#right-well");
$("#target5").clone().appendTo("#left-well");
$("#target1").parent().css("background-color", "red");
$("#right-well").children().css("color", "orange");
$(".target:nth-child(2)").addClass("animated bounce");
});
</script>
<!-- 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>
Your browser information:
Your Browser User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Safari/604.1.38.
Link to the challenge:
I have a remote version of jQuery and animate.js in my HTML. I’m using Sublime Text 2 for a text editor and Chrome for a browser. All of the code works in the browser except for 2 lines.
$(document).ready(function() {
$(“button”).addClass(“animated”);
$(".btn").addClass(“shake”);
$("#target1").addClass(“btn-primary”);
$(“button”).removeClass(“btn-default”);
$("#target1").prop(“disabled”, true);
$("#target4").html("#target4");
$("#target3").text(“Go Bears”);
$("#target4").remove();
$("#target2").appendTo("#right-well");
$("#target5").clone().appendTo("#left-well");
$("#target1").parent().css(“background-color”, “red”);
$("#right-well").children().css(“color”, “purple”);
$(".target:nth-child(2)").addClass(“animated bounce”); **
$(".target:even").addClass(“animated shake”);
$(“body”).addClass(“animated fadeOut”);
});
I used devTools to see if I could troubleshoot why, but there was no error. I understand the code. Just curious why those 2 lines aren’t working.
These are the 2 that aren’t working.
$(“.target:nth-child(2)”).addClass(“animated bounce”); **
$(“.target:even”).addClass(“animated shake”);
Thank you for responding so quickly and helping me with this.
HTML file
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<title>Bootstrap Practice</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>
<!-- jQuery (necessary for Bootstrap's JS plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- link to .js file with jQuery code goes here -->
<script src="/Users/adamdixon/Desktop/codeCampChallenges/bootstrapPractice/practice.js"></script>
</body>
</html>
.js file
$(document).ready(function() {
$("button").addClass("animated");
$(".btn").addClass("shake");
$("#target1").addClass("btn-primary");
$("button").removeClass("btn-default");
$("#target1").prop("disabled", true);
$("#target4").html("<em>#target4</em>");
$("#target3").text("Go Bears");
$("#target4").remove();
$("#target2").appendTo("#right-well");
$("#target5").clone().appendTo("#left-well");
$("#target1").parent().css("background-color", "red");
$("#right-well").children().css("color", "purple");
$(".target:nth-child(2)").addClass("animated bounce"); <!--does not work-->
$(".target:even").addClass("animated shake"); <!--does not work-->
$("body").addClass("animated fadeOut");
});
Sorry about not using back tics. For me, all 6 buttons shake. I was thinking that only the even numbered buttons should shake.
I understand now, thank you very much. I’m currently subscribed to Code School as well as FCC. I’ve completed some JS courses and see how they relate with jQuery. Code is working just fine now. Thank you so much for your help and quick response. I now feel like I have someone (other than my younger cousin) to reach out to for help. I will now sign up to donate some money to support FCC in response to your immediate feedback. It won’t be much for now, but hopefully after I land my first front-end developer job I’ll be able to increase it. Now on to work on my first tribute page!