Author: | hermajan |
---|---|
Views Total: | 478 views |
Official Page: | Go to website |
Last Update: | December 14, 2021 |
License: | MIT |
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>