JavaScript library for creating countdowns.

Installation

Install this project via one of package managers:

Usage

  • Add HTML tag in your page. You can add more than one, Countdown will be bound on elements with defined class. Insert it in page like this:
 <time class="countdown" data-lang="en" datetime="2021-12-21T15:16" data-remains="Remains" data-after="." data-ended="The event is over.">2021-12-21T15:16</time>

  • You can change attributes:

    • class (required) - defines on which class will be Countdown bound to
    • data-lang (optional) - defines which language will be used for time strings. You can choose from cs (Czech), en (English), sk (Slovak)
    • datetime (required) - sets ending time of countdown. Use one of valid formats from MDN.
    • data-remains (optional) - defines string which will be included before countdown
    • data-after (optional) - defines string which will be included after countdown
    • data-ended (required) - defines string which will be written after countdown is ended

  • Include JS file from src/countdown.js in your page via HTML tag like this:

<script src="vendor/hermajan/countdown/src/countdown.js"></script> <!--  installation via Composer -->
<script src="node_modules/@hermajan/countdown/src/countdown.js"></script> <!--  installation via npm -->

  • Start countdown in one of these ways:

    • include starter:

      <script src="vendor/hermajan/countdown/src/start.js"></script> <!--  installation via Composer -->
<script src="node_modules/@hermajan/countdown/src/start.js"></script> <!--  installation via npm -->

    • in your JavaScript:

      <script>startCountdowns();</script>

    • with definition of your defined class, e.g. "my-countdown-class":

      <script>startCountdowns("my-countdown-class");</script>

  • Then countdowns will run. Rendered examples are on website.

Examples