Why is my js not working? Please help

JavaScript
1 
<!DOCTYPE html>
<html>
<div class="container">

  <div class="header">
    <img src="https://cdn.shopify.com/s/files/1/1695/0625/files/ONE_TREE_FOR_THE_SEA_WHITE.png?v=1586380461" width="100px" style="margin-right:20px;padding:10px;">
    <h2>ONE TREE FOR THE SEA™</h2>
  </div>

  <div class="row">
    <div class="col-lg-3 stats">
      <i class="fa fa-tree aria-hidden=" true"></i>
      <div class="counting" data-count="1">0</div>
      <h5>TREES PLANTED</h5>
    </div>

    <div class="col-lg-3 stats">
      <i class="fa fa-cloud" aria-hidden="true"></i>
      <div class="counting" data-count="48">0</div>
      <h5>LBS CO2 REMOVED/YR</h5>
    </div>

    <div class="col-lg-3 stats">
      <i class="fa fa-globe" aria-hidden="true"></i>
      <div class="counting" data-count="260">0</div>
      <h5>LBS OXYGEN PRODUCED/YR</h5>
    </div>
  </div>

  <h6>- WE PLANT A TREE FOR EACH PRODUCT SOLD -</h6>

</div>
</html>

<style>
  @import url(https://fonts.googleapis.com/css?family=lato:400,700|Montserrat:400,700);
  @import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css);

  .container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #125676;
    width: 100vw;
  }

  .header {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #2490c2;
    width: 100vw;
  }

  h2 {
    font-family:arial;
    font-size: 1.75em;
    font-weight: 700;
    color: greenyellow;
  }

  .row {
    margin: 20px;
    display: flex;
    flex-wrap: wrap;
    width: 80vw;
    justify-content: center;
    background-color: ;
  }

  .stats {
    padding: 20px 40px 10px 40px;
    color: white;
    text-align: center;
    font-size: 20px;
    font-weight: 700;
    font-family: 'Montserrat', sans-serif;
  }

  .stats .fa {
    color: #fff;
    font-size: 50px;
  }
  
  h6{
    background-color:;
    font-family:arial;
    align-items:center;
    justify-content:center;
    text-align:center;
    color:greenyellow;
    font-weight:700;
    margin-top:-30px;
    font-style:italic;
  }
</style>

<script>
// number count for stats, using jQuery animate

$('.counting').each(function() {
  var $this = $(this),
      countTo = $this.attr('data-count');
  
  $({ countNum: $this.text()}).animate({
    countNum: countTo
  },

  {

    duration: 3000,
    easing:'linear',
    step: function() {
      $this.text(Math.floor(this.countNum));
    },
    complete: function() {
      $this.text(this.countNum);
      //alert('finished');
    }

  });  
  

});
</script>
2

Also, is there any way to create math for each tree? For example multiply the other categories–each tree produces ‘x’ amount of oxygen and removes’x’ amount of CO2?

3

Looks like your missing a head tag, a body tag, and you’re using jQuery but I don’t see it imported anywhere.

4

How do I do that? I am new at coding, sorry.

5

What environment are you working with? On your computer or are you using something like codepen? And what is the error message you are getting?

6

Codepen, but I wanted it all coded in the html section so I do not have to reference

7

No error just doesnt count up from zero on each category

8

Can you link codepen?

9

Im not sure i didnt login before I started. I think you can just copy/ paste my code above into HTML of codepen.

10

Here I have set up codepen to be happy.
https://codepen.io/br3ntor/pen/eYpYmyG

You definitely can write your CSS and JS in one html file but I don’t think codepen is intended to be used like that.

In codepen the html section on the left is the inside of the body tag.

The head tag and any third party libraries are setup in the codepen settings.

Codepen takes care of the html and doctype too, you only have to worry about what you would write in the body tag.

11

I suggest repl.it, there is no boilerplate already made there, you need to explicitly write all the code there

also, both here and codepen, if you don’t create an account you can’t save your code and it will be forever lost

1 Like
12

Yes, I was able to break it out in codepen and have it work but I wanted it all coded in html single script. Is there a reason why is would not work like that?

13

if you want one single file the structure is:

<!DOCTYPE html>
<html>
   <head>
      <!-- here metadatas -->
   </head>
   <body>
      <style>
         /* here css */
      </style>
      <!-- here the html elements -->
      
      <!-- here script tags as last thing in the body element -->
   </body>
</html>

you can open a repl.it account and you can code html files entirely with no masked parts

14

You can have everything in one file, but it’s not a best practice. If you are just doing a learning exercise, it’s ok, but if you were to create an actual project, you want to separate things into their own files in most cases. The repl.it site is amazing.

15

What environment are you working with?

16

You were right I had to import using code below. Thank you for your help.

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