Using jQuery libraries outside FCC!

Tell us what’s happening:

How do I use JQuerry outside FCC? How do I add libraries on other platforms like codepen.io and my own laptop?

This is what I have tried on codepen yet:
https://codepen.io/rohan-kumar/pen/mdbavmY

Your code so far


<script>
  $(document).ready(function() {

  });
</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 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/12.1.2 Safari/605.1.15.

Link to the challenge:
https://learn.freecodecamp.org/front-end-libraries/jquery/target-html-elements-with-selectors-using-jquery/

1 Like

That’s how you do it. If you want to add it, let’s say in github, write <script src = "[jquery link]"></script>

Okay, but I’m not familiar with gitbhub. Let’s say for now I’m using it on codepen and I have added jQuery and animate.css on it then what am I missing ?

With this code:

<button class="btn btn-danger test">This is the new world!</button>

<script>
$(".test").on("click", function(){
      $(this).addClass("animated shake")
    };
</script>

This is not the same library as the fcc one. look up on how to use the .animate() command. If you want, I can show you later.

I followed some travery media tutorials on Youtube and im able to use query on both platforms outside FCC. Although the animate thing works only for the first time when i click it on codepen otherwise its working. I’ll follow the whole course and see if i need any external help.
Thank you for helping.:+1:

1 Like

You’re welcome. I love using jquery, but sadly, now people are using react and stuff like that so I can’t use it much anymore.