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

prerequisite:

1. Document Object Model ( DOM ) 
2. Use of Classes in ES6

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:

1. Implementing a simple structure using HTML.
2. Providing a basic display style using CSS.
3. 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();
}

Output:

Custom Countup Preview

Main Used Functions:

• document.getElementById(Target Id).innerHTML
• setTimeout( function() {  Function Here } , timedelay )

OVERVIEW

The flow of  the Program

This is the basic prototype of the custom countUp.js that we can implement using the concept of Class in JavaScript.

 One can also use their own function to render the values in specific ways.