Target Elements by Class Using jQuery my own code

HTML-CSS
1

Hello All
I used the code with my own on text editor but I don’t know what else should be added or removed.
Please help
my code FCC works well but it doesn’t work when use on text editor.
this are links and jQuery code:

kind regards

Your code so far

Bootstrap from scratch

jQuery Playground

#left-well

#target1 #target2 #target3

#right-well

#target4 #target5 #target6
```

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.3440.106 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/front-end-libraries/jquery/target-elements-by-class-using-jquery/

2

You should add jQuery library for your code to work in the the text editor!

Add this at the beginning of your html between <head></head>:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" type="text/javascript"></script>

1 Like
3

first of all thanks for your reply
I have added this link : <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
from w3.css
doesn’t it work?

4

Post your code so that it is easier to help.

1 Like
5 
<!DOCTYPE html>
<html>
<head>
	<title>Bootstrap from scratch</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"/>
	<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
	<!-- The link below is the link of fonts -->
	<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
	<!--The link below is the link of Bootstrap Font-Awesome  -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" integrity="sha384-XdYbMnZ/QjLh6iI4ogqCTaIjrFk87ip+ekIjefZch0Y+PvJ8CDYtEs1ipDmPorQ+" crossorigin="anonymous">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" type="text/javascript"></script>
</head>
<body>
  <script>
  	$(document).ready(function() {
    $("button").addClass("animated bounce");
  	});
  </script>
  <!-- Don't change the code below this line -->
  <div class="container-fluid">
	<h3 class="text-primary text-center">jQuery Playground</h3>
	<div class="row">
		<div class="col-xs-6">
			<h4 class="text-center">#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 class="text-center">#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>
6

You are missing the animated.css library.

https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css

1 Like
7

Thanks for your instruction

should i copy the link or download the whole file:

8

Thank you so much for your assistance. i have done it

9

Just use the link, unless you are going to be working offline.

1 Like
10