Running jQuery on my own machine

1

Hi everybody,

I’m going through the freeCodeCamp challenges but I’m trying to follow along on my own machine. After all, these are all really cool concepts but they won’t do much good if we can’t actually use them to create our own webpages! I’ve gotten to the jQuery section of the course where it asks us to make the buttons bounce. The code works just fine on the freeCodeCamp emulator but when I try to run it on my own machine, nothing happens. I’ve tried googling how to use jQuery but I haven’t had much luck. Would somebody please take a look at my code and tell me what I’m doing wrong? I’ll also include computer specs if it helps.

<script src="https://code.jquery.com/jquer-3.2.1.min.js" type="text/javascript">
</script>
<script>
  $(document).ready(function() {
    $("button").addClass("animated bounce");
  });
</script>

<!-- Only change code above this line! -->

<head>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

	<title>Hello, world!</title>
</head>

<body>
	<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>

Operating System: MacOSX Sierra
Code Editor: Atom IO
Web Browser: Google Chrome

I can include more information if needed. Thanks everybody!

2

You need to add an additional stylesheet with animations that is used behind the scenes in this lesson.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">

Here is an example html at https://pastebin.com/tpwCBvvd.

3

That did it! Thank you, I didn’t realize there were other libraries behind the scenes. I appreciate your help!

1 Like