count-up-down

This is the base repository that I use to create a simple static page for counting up or down.

How to Use

Browser

We are using jsDelivr to distribute the package for browser usage. The HTML snippet is as the following.

<div class="root">
  <div class="row">
    <div class="wrapper">
      <div class="value" id="years"></div>
      <div class="unit">years</div>
    </div>
    <div class="wrapper">
      <div class="value" id="months"></div>
      <div class="unit">months</div>
    </div>
    <div class="wrapper">
      <div class="value" id="days"></div>
      <div class="unit">days</div>
    </div>
  </div>
  <div class="row">
    <div class="wrapper">
      <div class="value" id="hours"></div>
      <div class="unit">hours</div>
    </div>
    <div class="wrapper">
      <div class="value" id="minutes"></div>
      <div class="unit">minutes</div>
    </div>
    <div class="wrapper">
      <div class="value" id="seconds"></div>
      <div class="unit">seconds</div>
    </div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/count-up-down.min.js"></script>
<script>
  const ONE_HOUR_AGO = new Date(new Date().getTime() - 3600 * 1000);

  window.addEventListener('load', () => {
    // This will render to the divs with the ID "years", "months", and so on.
    renderToDivs(calculate(ONE_HOUR_AGO, new Date()).result);

    setInterval(() => {
      renderToDivs(calculate(ONE_HOUR_AGO, new Date()).result);
    }, 1000);
  });
</script>

Node

To install the package, if you are using npm:

# NPM.
npm install --save count-up-down

# Or, if you are using yarn:
yarn add count-up-down

Then, do this in your file:

import { calculate } from 'count-up-down';

const ONE_HOUR_AGO = new Date(new Date().getTime() - 3600 * 1000);

// {
//   result: { days: 0, hours: 1, minutes: 0, months: 0, seconds: 0, years: 0 },
//   type: 'countdown'
// }
console.log(calculate(new Date(), ONE_HOUR_AGO));

Documentation

The API documentation is generated using typedoc. Below are the links to the browser and Node package:

1. Browser
2. Node

To re-generate the documentation, we can do yarn generate:doc on the the root of this repository.

Development

Prerequisites

1. Yarn Classic (v1)
2. Node.js® LTS (at least v14)

After that, on root project, do this to install the dependencies:

yarn

Folder Information

The following is the information on each of the important folders in this repository.

1. plugins folder contains the plugins for esbuild
2. scripts folder contains build scripts
3. src folder contains the main library code

Versioning

This library follows semantic versioning. Please visit https://semver.org for more information.

License

See LICENSE.