JQuery(animate)

[Ezeji]

Tell us what’s happening:
Describe your issue in detail here.
I tried jQuery on visual studio code. But the addClass isn’t working. Like the animated stuffs ain’t working. But other’s are. I don’t know 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");
  $("#left-well").children().css("color", "green");
  $(".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:**

User Agent is: Mozilla/5.0 (Linux; Android 10; TECNO KE5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/98.0.4758.87 Mobile Safari/537.36

Challenge: Target Even Elements Using jQuery

Link to the challenge:

freeCodeCamp.org

[lasjorg]

You have to use the correct version of the libraries (Bootstrap and Animate.css) and use the correct classes (depending on lib version).

Jquery, bootstrap are not loading in local dev environment

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…

[Ezeji]

So to be clear, I need to download Animate.css library?
But is==> addClass (“animated shake”) still correct?
Thanks for the well update I almost got frustrated?
And I also noticed something concerning the bootstrap. I added it to my previous work and everything became bold as if it was zoomed. Why?

[lasjorg]

1. Yes you have to add Animate.css

2. That depends on the version of Animate.css, on the newer version it is shakeX and shakeY

3. No idea, are you sure it isn’t just because Bootstrap adds a better font with a better font size. But everything shouldn’t be bold or looked zoomed. You will have to post an example on something like Codepen.

[Ezeji]

Thanks.
May be I’ll post the bootstrap own on code pen.