bobbyc
March 9, 2018, 12:34am
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:
https://www.freecodecamp.org/challenges/target-html-elements-with-selectors-using-jquery
This code will only work with jQuery. The reference to jQuery needs to appear before this script.
$(document).ready(function() { $("button").addClass("animated bounce");
});
bobbyc
March 9, 2018, 1:22am
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>
bobbyc
March 9, 2018, 1:23am
5
don’t know why the backticks aren’t showing when I post them!
bobbyc
March 9, 2018, 8:42pm
7
thank you so much for your help!! I two versions because I tried different things. Appreciate your help…