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

Last Updated : 18 Jan, 2021

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();
}