Bootstrap JQuery Date-Countdown Timer

Uses a few bootstrap elements and a jquery timer to countdown a date on .ready()

by Nate Armstrong

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<div class="row">
  <div class="col-12 col-sm-8 col-md-7 col-xl-6 col-xxl-5 m-auto">
    <div id="countdownTimer" class="time d-flex yellow-orange-time" data-date="Jun 1, 2021 08:00:00"></div>
  </div>
</div>


<!--
<div id='timerday' class='timerday'>
  <span id='txtday' class='txtday commontimer'>Days: </span>
  <span id='remday' class='remday'>%d</span>
</div>
<div id='timerhour' class='timerhour'><span id='txthour' class='txthour commontimer'>Hrs: </span><span id='remhour' class='remhour'>%h</span></div>
<div id='timermin' class='timermin'><span id='txtmin ' class='txtmin commontimer'>Mins: </span><span id='remmin ' class='remmin'>%i</span></div>
<div id='timersec' class='timersec'><span id='txtsec' class='txtsec commontimer'>Secs: </span><span id='remsec' class='remsec'>%s</span></div>
-->

CSS

#countdownTimer.time div{
  width: 100%;
  max-width: 500px;
  font-size: 1.5em;
  font-weight: 600;
}
#countdownTimer.time div span.commontimer {
  display:block;
  text-align: center;
}

#countdownTimer.time div span:not(.commontimer) {
  width:100%;
  display:block;
  text-align: center;
  font-size:2em;
}

#countdownTimer.yellow-orange-time div span.commontimer {
  background-color: yellow;
}

#countdownTimer.yellow-orange-time div span:not(.commontimer) {
  background-color: orange;  
}

JavaScript

const thisDate = document.querySelector('#countdownTimer').dataset.date;

$(document).on("ready", function(){
//$(document).ready(function() {
$("#countdownTimer").countdown({
		date: thisDate,
		onComplete: function( event ) {
		alert("hello");
		},
		minsOnly: false,
       
		leadingZero: true
	});
});
$(document).ready(function($) {
$.fn.countdown = function( method /*, options*/ ) {

	var defaults = {
			date: null,
			updateTime: 1000,
			htmlTemplate: "<div id='timerday' class='timerday'><span id='txtday' class='txtday commontimer'>Days:</span><span id='remday' class='remday'>%d</span></div><div id='timerhour' class='timerhour'><span id='txthour' class='txthour commontimer'>Hours:</span><span id='remhour' class='remhour'>%h</span></div><div id='timermin' class='timermin'><span id='txtmin ' class='txtmin commontimer'>Minutes:</span><span id='remmin ' class='remmin'>%i</span></div><div id='timersec' class='timersec'><span id='txtsec' class='txtsec commontimer'>Seconds:</span><span id='remsec' class='remsec'>%s</span></div>",
			minus: false,
			onChange: null,
			onComplete: null,
			onResume: null,
			onPause: null,
			leadingZero: false,
			offset: null,
			servertime:null,
			hoursOnly: false,
			minsOnly: false,
			secsOnly: false,
			weeks: false,
			hours: false,
			yearsAndMonths: false,
			direction: "down",
			stopwatch: false
		},
		slice = Array.prototype.slice,
		clear = window.clearInterval,
		floor = Math.floor,
		msPerHr = 3600000,
		secPerYear = 31556926,
		secPerMonth = 2629743.83,
		secPerWeek = 604800,
		secPerDay = 86400,
		secPerHr = 3600,
		secPerMin = 60,
		secPerSec = 1,
		rDate = /(%y|%m|%w|%d|%h|%i|%s)/g,
		rYears = /%y/,
		rMonths = /%m/,
		rWeeks = /%w/,
		rDays = /%d/,
		rHrs = /%h/,
		rMins = /%i/,
		rSecs = /%s/,
		dateNow = function( $this ) {
			var now = new Date(),
				settings = $this.data("jcdData");
			
			if( !settings ) {
				return new Date();
			}
			
			if( settings.offset !== null ) {
				now = getTZDate(...