freeCodeCamp Challenge Guide: Use jQuery to Modify the Entire Page

Use jQuery to Modify the Entire Page


Problem Explanation

Add the classes animated and hinge to your body element.

Relevant Links


Solutions

Solution 1 (Click to Show/Hide)
<script>
  $("body").addClass("animated hinge");
  $(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");
    $("#left-well").children().css("color", "green");
    $(".target:nth-child(2)").addClass("animated bounce");
    $(".target:even").addClass("animated shake");
    $("body").addClass("animated hinge");
  });
</script>

<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>
2 Likes

i dont have any answer with this code

There was no opening or closing body element in the text editor.
The opening tag needs to be above your first div and the closing tag needs to after your last div.
This got it to work.
It’s kind of hard to modify a tag that is not on the page. Or was this part of the problem solving?

2 Likes

First You have to add body element and then add two classes:

$(“body”).addClass(“animated fadeOut”);
$(“body”).addClass(“hinge”);

2 Likes

The way I solved was to add the body element, as others already mentioned (don’t forget to close it at the bottom), then added the following:

$(“body”).addClass(“animated hinge”);

As I understood the directions the author said to use hinge instead of fadeOut…Cheers.

2 Likes

shall i get to know the content of these class (animated,hinge)

Hey guys,
I completed these practice already and move to next level which got confuse what should i need to do? anyone who can help any clue? thanks!