Countdown
A simple JavaScript API for producing an accurate, intuitive description of the timespan between two Date instances.
Countdown documentationHow to use
Copy-paste the following <script>
near the end of your pages under JS Implementing Plugins to enable it.
<script src="./assets/vendor/countdown/countdown.js"></script>
Copy-paste the init function under JS Plugins Init., before the closing </body>
tag, to enable it.
<script>
(function() {
// INITIALIZATION OF COUNTDOWN
// =======================================================
const oneYearFromNow = new Date()
document.querySelectorAll('.js-countdown').forEach(item => {
const days = item.querySelector('.js-cd-days'),
hours = item.querySelector('.js-cd-hours'),
minutes = item.querySelector('.js-cd-minutes'),
seconds = item.querySelector('.js-cd-seconds')
countdown(oneYearFromNow.setFullYear(
oneYearFromNow.getFullYear() + 1),
ts => {
days.innerHTML = ts.days
hours.innerHTML = ts.hours
minutes.innerHTML = ts.minutes
seconds.innerHTML = ts.seconds
},
countdown.DAYS | countdown.HOURS | countdown.MINUTES | countdown.SECONDS
)
})
});
</script>
Basic example
Days
Hours
Mins
Secs
<div class="js-countdown row">
<div class="col-3">
<h2 class="js-cd-days h1 text-primary mb-0"></h2>
<h5 class="mb-0">Days</h5>
</div>
<!-- End Col -->
<div class="col-3">
<h2 class="js-cd-hours h1 text-primary mb-0"></h2>
<h5 class="mb-0">Hours</h5>
</div>
<!-- End Col -->
<div class="col-3">
<h2 class="js-cd-minutes h1 text-primary mb-0"></h2>
<h5 class="mb-0">Mins</h5>
</div>
<!-- End Col -->
<div class="col-3">
<h2 class="js-cd-seconds h1 text-primary mb-0"></h2>
<h5 class="mb-0">Secs</h5>
</div>
<!-- End Col -->
</div>
<!-- End Row -->
Modal example
Countdown
Days
Hours
Mins
Secs
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">Open modal</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Countdown</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="js-countdown row">
<div class="col-3">
<h2 class="js-cd-days h1 text-primary mb-0"></h2>
<h5 class="mb-0">Days</h5>
</div>
<!-- End Col -->
<div class="col-3">
<h2 class="js-cd-hours h1 text-primary mb-0"></h2>
<h5 class="mb-0">Hours</h5>
</div>
<!-- End Col -->
<div class="col-3">
<h2 class="js-cd-minutes h1 text-primary mb-0"></h2>
<h5 class="mb-0">Mins</h5>
</div>
<!-- End Col -->
<div class="col-3">
<h2 class="js-cd-seconds h1 text-primary mb-0"></h2>
<h5 class="mb-0">Secs</h5>
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-white" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<!-- End Modal -->