Skip to content

Home

Jump to bottom
Jan Hermann edited this page Nov 7, 2023 · 5 revisions

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
    • data-view (optional) — defines view in which will be numbers shown.
      • options:
        • all - shows all numbers (e.g. O years 1 day 0 hours 42 minutes 58 seconds)
        • rest - shows only numbers bigger than zero (e.g. 1 day 42 minutes 58 seconds)
        • blank - shows all numbers from first nonempty number even with zeroes (e.g. 1 day 0 hours 42 minutes 58 seconds)

  • 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.

Clone this wiki locally