The code I practiced doesn't work on my own webpage, why?

Hi. When I copied the code works just fine on freeCodeCamp to a blank web page, some part of it just doesn’t work anymore. I am a bit confused. Could anyone help me to understand and let me know what shall I do to make it work.

Does the code in question use Bootstrap and jQuery? Challenges in fcc load them behind the scenes. If you want to try it from scratch you’ll do it like this:

Note: I’m assuming you’re doing this locally, not on CodePen.

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Page title goes here</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>

<body>
  <!-- Stuff that appears in the page go here -->

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>

</html>

Save it as filename.html

1 Like

If you use the above code, I’d recommend using a CDN for bootstrap.min.js as well. Although using a locally-stored copy is fine if you don’t have reliable Internet access during the development phase (but for deployment you should definitely use a CDN).

You’re right. I just blindly copy-pasted the script tags from bootstrap’s site. I’ll edit it.

1 Like

JQuery animation still not working :frowning:

Can you post your code?

(post withdrawn by author, will be automatically deleted in 24 hours unless flagged)

I cleaned up your code.
You need to use triple backticks to post code to the forum.
See this post for details.

Thank you, I am trying again.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Page title goes here</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script>
  $(document).ready(function() {
    $("#target1").css("color", "red");
    $("#target1").prop("disabled", true);
    $("#target4").remove();
    $("#target2").appendTo("#right-well");
    $("#target5").clone().appendTo("#left-well");
    $("#target1").parent().css("background-color", "red");
    $("#right-well").children().css("color", "orange");
    $("#left-well").children().css("color", "green");
    $(".target:nth-child(2)").addClass("animated bounce");
    $(".target:even").addClass("animated shake");
	$("body").addClass("animated hinge");
  });
</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>
</body>
</html>

It’s best to move the <script> tags right before the closing </body> tag.

Those animations require a different CSS file.
https://daneden.github.io/animate.css/

Download the animate.css file, put it in the same directory as your page, then add
<link rel="stylesheet" href="animate.css"> in the <head> section.

It is working now, thanks a bunch.

Just one more question. I was trying to add

<link rel="stylesheet" href="https://daneden.github.io/animate.css">

instead of downloading the animate.css and link it local, but it doesn’t work. Could you help me to understand why?

Because it’s a URL that directs to a webpage, not a CSS file. What’s weird is that I tried using https://raw.github.com/daneden/animate.css/master/animate.css instead of downloading it, but it wouldn’t work.

It should be like this

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