Which jQuery library to use, to make things work?

For fun I copied the code from the jQuery beginners’exercises to an HTML page of my own, but whichever jQuery library I’m linking to, I can’t get ALL the functions to work. Only some will work.

Specifically: the functions 'animated / shake / hingedo not work, nor does the page respond to any of the parent/children targeting, but all the appending and the coloring of elements do work.
Why is that?

And additionally: why doesn’t the FreeCodeCamp exercise mention the linking to jQuery at all here actually…?

** ** UPDATE: I used the correct jQuery, the issue was different here. Extra CSS was used from here: daneden.github.io/animate.css/ **

I’ve used these in the Head:

<script type = "text/javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type = "text/javascript" src = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>

Below is the actual code that I’ve put in script tags:

$(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:even”).addClass(“animated shake”);

});

and then the HTML in the Body of course:

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

Help! :confused:

1 Like

Most common uses
Google:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

or

Microsoft:
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.2.min.js"></script>

Thanks, but that still doesn’t solve the animated/shake etc. nor the parenting problems.

Hey,

I pulled this from the jQuery site: https://api.jqueryui.com/shake-effect/

<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

You need the above three in your head tags

You can get the hosted libraries from Google Developer: https://developers.google.com/speed/libraries/#libraries

The jQuery is just adding the css classes animated and shake so those classes need to be defined in your css to do anything when added. I think that probably comes from https://daneden.github.io/animate.css/ so you could use that css library in your project for those classes.

1 Like

FINALLY!!!
This is the correct answer - it now works!
I cannot believe FreeCodeCamp has omitted mentioning this in the exercises… I would say it is vital for beginners to know that the effects don’t just drop out of nowhere.

1 Like

Thank you but I’m actually using the correct jQuery libraries already - read the reply below, (the correct answer is that there’s extra CSS needed for the effects).

Oh okay I didn’t look at your code I read the first bit where you asked about the libraries.
Glad you solved it :slight_smile:

@jolarti You should make an issue on the repo of fcc for this, if its necessary.

1 Like

Seems a bit much to add to a repo - wish i could just drop a feedback line somewhere.

@jolarti Try here: contacts at the very bottom of the page. Probably JavaScript curriculum @SaintPeter

I could see possibly adding a note to the first jQuery part where we use animate.css.

You could open an issue for this on the FCC Repo.

1 Like