Antmated bounce

Antmated bounce
0.0 0

#1

I have used this code and it passes the challenge
but when I use it in my editor outside fcc it doesn’t work
I’ve added the JS cdn and css suggested in similar
topics but I just can’t get it to work…further I’ve added
the bootstrap cdn and I can’t make it appear as it does
in the challenge… I realize you have to download or
add the cdn for css and libraries for bootstrap and jquery
but can’t get it to work outside of FCC regardless of what
I try…any ideas??? THANKS!!!

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/64.0.3282.186 Safari/537.36.

Link to the challenge:


#2

Can you show us your entire code which would show how you are trying to include all the relevant libraries? It is probably a case of a missing library or a library loaded in the wrong order.

To enter a code block into the forum, precede it with a line of three backticks and follow it with a line of three backticks to make easier to read. See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.


#3

This code will only work with jQuery. The reference to jQuery needs to appear before this script.

  $(document).ready(function() { $("button").addClass("animated bounce");
 
  });

#4




<!DOCTYPE html>
<html lang="en">
<head>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"> 
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script>
$(document).ready(function(){
   $("button").addClass("animated bounce");
    });
});
</script>

</head>

<body>
<p id="demo">JavaScript can change HTML content.</p>
<button type="button" onclick="document.getElementById('demo').innerHTML = 'Hello JavaScript!'">Click Me!</button>


<!-- 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>
</body>
</html>

#5

don’t know why the backticks aren’t showing when I post them!


#6

The JavaScript you posted the 2nd time here is different than the first time. If you look at your browser’s console, you will see the following error:

Uncaught SyntaxError: Unexpected token } line 19

See my comment in your code below:

<script>
$(document).ready(function(){
   $("button").addClass("animated bounce");
    }); // Why is this line here?  It is causing the error.
});
</script>

#7

thank you so much for your help!! I two versions because I tried different things. Appreciate your help…