jQuery and CSS library part 2

I’m trying to place a library, Animate.css, on my new page, created for help me with the “Front and libraries certification”.
With a solution discovered on the forum.


*Until i got it, but i created one folder style.css for my styles. Copying and pasting all css library.
I would lik do this using a CDN (https://animate.style/ -

) But nothing happens when i put it on my page.

@JorgeLAB - you could copy your code showing us how you tried to add the animate library to your site, then someone can review that and maybe point out where things went wrong. Another option is to go to https://animate.style/ and read through the suggestions on how to add their css to your site - they detail a few methods on the home page there.

This is my code, I tried to do fourteen tasks in my page, to test each example.
So what just works is the style changes. Using the .css method or the .html. But no class in the animation library works.

<!DOCTYPE html>
<html lang='en'>
	<head>
		<title>jQuery</title>
		<meta charset="UTF-8">
		<meta name="description" content="Documentation Front libraries">
		<meta name="keywords" content="Ruby, Rails">
		<meta name="author" content="Jorge Borges">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<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="estilos.css">-->
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css"/>
		<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
	</head>
	<script >
		$(document).ready(function() {
   		$("button").addClass("animated bounce");
   		$(".test_2 .well").addClass("animated shake");
   		$(".test_2 #target3").addClass("fadeOut");
   		$(".test_3 #target1").addClass("btn-primary");
   		$(".test_4 button").removeClass("btn-default");
   		$(".test_5 #target1").css("color","purple");
   		$(".test_6 #target4").prop("disabled", true);
   		$(".test_7 #target2").html("<strong>Botão</strong>");
   		$(".test_8 #target5").remove();
   		$(".test_9 #target1").appendTo(".test_9 #right-well");
   		$(".test_10 #target3").clone().appendTo(".test_10 #right-well"); // function chaining
   		$(".test_11 #target5").parent().css("background-color", "purple");
   		$(".test_12 #left-well").children().css("color", "blue");
   		$(".test_13 .target:nth-child(2)").addClass("shake");
   		$(".test_14 #left-well .target:even").addClass("shake");
   		$(".test_14 #right-well .target:even").addClass("shake");
   		$(".test_15").addClass("shake");
   		$(".test_1").addClass("animated hinge")
  	});
	</script>	
	<body>
		<section>
			<div class="test_1">
				<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>
			</div>
		</section>
		<section>
			<div class="test_2">
				<div class="container-fluid">
					<h3 class="text-primary text-center">jQuery Playground 2</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>
			</div>
		</section>
		<section>
			<div class="test_3">
				<div class="container-fluid">
					<h3 class="text-primary text-center">jQuery Playground 3</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>
			</div>
		</section>
		<section>
			<div class="test_4">
				<div class="container-fluid">
					<h3 class="text-primary text-center">jQuery Playground 4</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>
			</div>
		</section>
		<section>
			<div class="test_5">
				<div class="container-fluid">
					<h3 class="text-primary text-center">jQuery Playground 5</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>
			</div>
		</section>
		<section>
			<div class="test_6">
				<div class="container-fluid">
					<h3 class="text-primary text-center">jQuery Playground 6</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>
			</div>
		</section>
		<section>
			<div class="test_7">
				<div class="container-fluid">
					<h3 class="text-primary text-center">jQuery Playground 7</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>
			</div>
		</section>
		<section>
			<div class="test_8">
				<div class="container-fluid">
					<h3 class="text-primary text-center">jQuery Playground 8</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>
			</div>
		</section>
		<section>
			<div class="test_9">
				<div class="container-fluid">
					<h3 class="text-primary text-center">jQuery Playground 9</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>
			</div>
		</section>
		<section>
			<div class="test_10">
				<div class="container-fluid">
					<h3 class="text-primary text-center">jQuery Playground 10</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>
			</div>
		</section>
		<section>
			<div class="test_11">
				<div class="container-fluid">
					<h3 class="text-primary text-center">jQuery Playground 11</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>
			</div>
		</section>
		<section>
			<div class="test_12">
				<div class="container-fluid">
					<h3 class="text-primary text-center">jQuery Playground 12</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>
			</div>
		</section>
		<section>
			<div class="test_13">
				<div class="container-fluid">
					<h3 class="text-primary text-center">jQuery Playground 13</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>
			</div>
		</section>
		<section>
			<div class="test_14">
				<div class="container-fluid">
					<h3 class="text-primary text-center">jQuery Playground 14</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>
			</div>
		</section>
	</body>
</html>
Summary

This text will be hidden

@JorgeLAB I looked at your code and I see at least one item you should address. Take a look at ‘Basic Usage’ on https://animate.style/ and check that against your script - you will want to update the classes you are using in, for example,

$(".test_2 .well").addClass("animated shake");
1 Like

@seanconcannon thanks, I understand, should using animate__. I was inattentive just looking at the task step by step.

1 Like