Scripts do nothing in my own files I'm editing in IDE; works fine using the in-browser compiler

1

Tell us what’s happening:
To make a long story short, I have no problem with the exercise in the code, but I can’t seem to get any of the animations to work when it comes to composing in an IDE. I’ve added the latest jQuery library from Google but the earlier lessons don’t cover when to call that library or how it should be implemented in my .html file.

Am I getting ahead of myself? Should I just worry about completing the exercises and not about how to build on my own? Is this forum even an appropriate place to ask this sort of question?

I can provide a link to my public github repo if that helps…

Your code so far

<script>
  $(document).ready(function() {
    $("button").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 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/61.0.3163.100 Safari/537.36.

Link to the challenge:
https://www.freecodecamp.org/challenges/target-html-elements-with-selectors-using-jquery

2

Those animations comes from an open source library called Animate.css, in order to make them work you need to include it as well.

The easiest integration for quick prototyping would probably be by adding it via a CDN like:

<head>
  <link rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/animate.css@3.5.2/animate.min.css">
  <!-- or -->
  <link rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
</head>

Or you can add it as a package if you have a module builder system.
For more detailed explanation you can refer to the official gihub repo page.

Hope it helps :slight_smile:

3

Awesome, thank you so much! I had assumed I just didn’t have the correct library or something along those lines. The exercises would be nice if they had some direction around how to prototype this stuff on your own.