numcounter v1.2.0

NumCounter

A lightweight and dependency-free number counter that animates numbers incrementing or decrementing, which allows you to control the 'speed' too!

VIEW DEMO HERE

Usage

1. Either include the CDN

or install it as an NPM package.

npm i numcounter

2. Import the package (you can skip this step if you've included the CDN script).

import NumCounter from 'numcounter';

3. Create an object of the necessary arguments.

• targetEl - HTML element that will output the number (required)
• start - number to start counting from (optional. Default value is 0)
• end - number to end counting at (optional. Default value is 100)
• steps - number of steps to increment or decrement by. Only whole numbers are allowed (ie. 0, 1, 2, 3, 4, ...) (optional. Default value is 1)
• delay - number to indicate the delay between increments or decrements. You can think of this as the "speed" of the number counter. Negative numbers cannot be used. Maximum value is 100 (optional. Default value is 50)

const params = {
  targetEl: el,  // Required param
  start: 0,      // Optional param. Default value is 0
  end: 50,       // Optional param. Default value is 100
  steps: 1,      // Optional param. Default value is 1
  delay: 10      // Optional param. Default value is 50
};

4. Instantiate the NumCounter class and pass in the arguments object.

const numCounter = new Numcounter(params);

5. Initialize the counter when you're ready by invoking .init().

numCounter.init();

Example

Example of a simple program that counts from 0 to 50 when you click a button:

import NumCounter from 'numcounter';

const el = document.querySelector('div');
const btn = document.querySelector('button');

const params = {
  targetEl: el,  // Required param
  start: 0,      // Optional param. Default value is 0
  end: 50,       // Optional param. Default value is 100
  steps: 1,      // Optional param. Default value is 1
  delay: 10      // Optional param. Default value is 50
};

const numCounter = new Numcounter(params);

btn.addEventListener('click', () => {
  numCounter.init();
});