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

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

#1

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.


#2

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


#3

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).


#4

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


#5

JQuery animation still not working :frowning:


#6

Can you post your code?


#7

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


#9

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


#10

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>

#11

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.


#12

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?


#13

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.


#14

It should be like this

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