Basic Countdown Timer In Plain JavaScript – Countdown.js

Preview:

Description:

A simple, lightweight JavaScript library for displaying countdown timers on the web page.

How to use it:

1. Install and import the countdown.js library.

# Yarn
$ yarn add @hermajan/countdown
# NPM
$ npm i @hermajan/countdown

<script src="./src/countdown.js"></script>

2. Add a <time> tag to the page and define the date the timer should countdown from using the datetime attribute:

<time class="countdown" datetime="2021-12-24T23:59">2021-12-24T23:59</time>

3. Start the countdown timer.

startCountdowns();

4. Specify the text to display after the countdown has finished.

<time 
  class="countdown" 
  datetime="2021-12-24T23:59"
  data-ended="The event is over.">
  2021-12-24T23:59
</time>

5. Determine whether to display days/hours/minutes/seconds text.

<time 
  class="countdown" 
  datetime="2021-12-24T23:59"
  data-ended="The event is over."
  data-remains="Remains" 
  data-after=".">
  2021-12-24T23:59
</time>

6. Localize the countdown timer.

const words = {
  cs: {
    years: ["rok", "roky", "roků"],
    days: ["den", "dny", "dní"],
    hours: ["hodina", "hodiny", "hodin"],
    minutes: ["minuta", "minuty", "minut"],
    seconds: ["sekunda", "sekundy", "sekund"]
  },
  en: {
    years: ["year", "years", "years"],
    days: ["day", "days", "days"],
    hours: ["hour", "hours", "hours"],
    minutes: ["minute", "minutes", "minutes"],
    seconds: ["second", "seconds", "seconds"]
  },
  sk: {
    years: ["rok", "roky", "rokov"],
    days: ["deň", "dni", "dní"],
    hours: ["hodina", "hodiny", "hodín"],
    minutes: ["minúta", "minúty", "minút"],
    seconds: ["sekunda", "sekundy", "sekúnd"]
  }
};

<time 
  class="countdown" 
  datetime="2021-12-24T23:59"
  data-lang="en">
  2021-12-24T23:59
</time>