How to make your own countUp.js plugin using JavaScript ?

Last Updated : 27 Jul, 2025

prerequisite:

If you are a beginner in JavaScript and have basic programming knowledge then don't worry, you have landed in a perfect place.

Let us divide the problem into multiple segments:

Implementing a simple structure using HTML.
Providing a basic display style using CSS.
The main programming to implement, the behavior using JavaScript
- onclick="....( )" : To trigger the function
- Creating a class with the name Counter
- Using a constructor to initialize the class
- Creating the method/function with the name shoot( ) for animation
- Calling the method shoot from the class Counter

Step 1: Implementing the HTML

HTML

<!---inside body----> <div class="container"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20200326201748/download312.png" /> <div class="main"> <h1 id="counter"> _______ </h1> <!-- This is the target id --> <button onclick="trigger()"> START </button> </div> </div> <!-- Inside body --> <script>  // Including JavaScript Code </script>

Step 2: Implementing the CSS

CSS

.container {  display: flex;  padding:20px; }   .main{  padding:20px; }   button{  width:100px;  height:45px;  background-color:#33ff33;  border-radius:10px; }

Step 3: JavaScript

JavaScript

// Creating the Class: Object Prototype class Counter {  // Countructor: Initializing the Class  constructor(data) {  this.start = data["start"];  this.end = data["end"];  this.frames = data["frames"];  this.step = data["step"];  this.target = data["target"];  }  // Method for Animation  shoot() {  // Variables  var count = 0;  var stepArray = [];  // Putting the starting Value  document.getElementById(this.target)  .innerHTML = this.start;  // Storing the step value in Array  while (this.end > this.start) {  this.start += this.step;  stepArray[count++] = this.start;  }  // Doing Countup Animation  var functional_target = this.target;  for (let i = 0; i < count; i++) {  setTimeout(function () {  document.getElementById(functional_target)  .innerHTML = stepArray[i];  }, (i + 1) * this.frames);  }  // Placing the final value  setTimeout(function () {  document.getElementById(  functional_target).innerHTML = this.end;  }, count * frames);  } } // Creating object from class var animate = new Counter({  start: 100000,  end: 2000000,  frames: 1,  step: 1000,  target: "counter" }); // Triggering the Class Method function trigger() {  // Calling the shoot() method of the class  animate.shoot(); }