JavaScript Count Up to a Number

This JavaScript code project uses CountUp JS library to smoothly count up to a given number. It includes three instances of CountUp.JS being used to count up the number of likes, shares, and visitors, respectively. Each count is displayed within a span element with an ID that corresponds to the CountUp.JS instance used for that number.

Additionally, the code includes several other elements, including icons and headings, that are not directly related to CountUp.JS but are used to display the numbers in a visually appealing way.

Overall, this code is useful to display and animate numbers on a webpage in an engaging way, such as for tracking social media engagement or website traffic.

How To Create JavaScript Count Up To A Number

First of all, load the Noramlize and Font Awesome CSS by adding the following CDN links into the head tag of your HTML document.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css'>

Now, create a span element with an id “number” and place the number value that you want to count up to smoothly. The following is the HTML sturcure shown on the demo page:

<div class="container">
  <div class="wrap">
    <p class="countup">CountUp.JS demo </p>
    <div class="">
       <h2><i class="fa fa-thumbs-o-up fa-2x"></i></h2>
    </div>
    <h1><span id="number">100</span> likes</h1>
    <div class="">
       <h2><i class="fa fa-heart fa-2x"></i></h2>
    </div>
    <h1><span id="number1">100</span> shares</h1>
    <div class="">
       <h2><i class="fa fa-user fa-2x"></i></h2>
    </div>
    <h1><span id="number2">100</span> visitors this year</h1>
  </div>
</div>

Style the numbers using the following CSS styles. These CSS rules are optional, you can use your own styles according to your needs.

html, body {
  width: 100%;
  height: 100%;
}

.container {
  text-align: center;
  width: 100%;
  font-family: sans-serif;
  display: flex;
  width: 100%;
  height: 100%;
  background: #1a2a6c;
  /* fallback for old browsers */
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #fdbb2d, #b21f1f, #1a2a6c);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  background: linear-gradient(60deg, rgba(253, 187, 45, 0.8), rgba(178, 31, 31, 0.8), #1a2a6c), url("https://images.unsplash.com/photo-1432888622747-4eb9a8efeb07?") center center no-repeat;
  background-size: cover;
  background-color: #0B486B;
}

.wrap {
  margin: auto;
  color: #353535;
  border-radius: 10px;
  padding: 20px;
  width: 30%;
  background-color: #fff;
  box-shadow: 0px 0px 10px #555;
}

h1 {
  color: #b21f1f;
}

Load the CountUp JS, forEach, WayPoints and SmoothScroll Js by adding the following CDN links before closing the body tag:

<script src='https://cdn.jsdelivr.net/countupjs/1.8.5/countUp.min.js'></script>
<script src='https://cdn.rawgit.com/toddmotto/foreach/e82a4fed997593820ae65a09a35068b696bf10a0/dist/foreach.min.js'></script>
<script src='https://cdn.rawgit.com/imakewebthings/waypoints/d21e1690bb5f407de4bf0bd9f08d967cf2027424/lib/noframework.waypoints.js'></script>
<script src='https://cdn.rawgit.com/cferdinandi/smooth-scroll/aad0d74d4d97d9ca8e1323356abded9d5770a714/dist/js/smooth-scroll.min.js'></script>

Finally, add the following JavaScript function to activate the counting functionality.

window.onload = function() {
  var options = {
    useEasing : true, 
    useGrouping : true, 
    separator : ',', 
    decimal : '.', 
    prefix: '',
    suffix: ',000'
  };
  var demo = new CountUp("number", 0, 300, 0, 2.5, options);
  demo.start();
  
  var options1 = {
    useEasing : true, 
    useGrouping : true, 
    separator : ',', 
    decimal : '.', 
    prefix: 'Given ',
    suffix: ''
  };
  
  var demo1 = new CountUp("number1", 0, 25000, 0, 2.5, options1);
  demo1.start();
  
  var options2 = {
    useEasing : true, 
    useGrouping : true, 
    separator : ',', 
    decimal : '.', 
    prefix: '',
    suffix: ',000'
  };
  
  var d = new Date();
  var n = d.getMonth();
  var f = n+1;
  var e = 300 / 12;
  var newtotal = e*f;
 
  var demo2 = new CountUp("number2", 0, newtotal, 0, 2.5, options2);
  demo2.start();
}

That’s all! hopefully, you have successfully created functionality to count up to a number using JavaScript. If you have any questions or suggestions, feel free to comment below.