Simple JavaScript countdown

Simple JavaScript countdown to set date with no dependencies.

by Ciprian Popescu

HTML

<p>
    <a href="https://getbutterfly.com/date-countdown-using-vanilla-javascript/">Date Countdown Using Vanilla JavaScript</a>
</p>

<div id="countdown"></div>
<div id="countdown-elements">
  <span>hours</span>
  <span>minutes</span>
  <span>seconds</span>
</div>

CSS

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-size: 14px;
    color: #24292e;
}

#countdown {
    width: 200px;
    background-color: #FFFFFF;
    text-align: center;
    font-size: 48px;
}
#countdown-elements {
    width: 200px;
    background-color: #FFFFFF;
    text-align: center;
}
#countdown-elements span {
    font-size: 10px;
    text-transform: uppercase;
    display: inline-block;
    padding: 0 8px;
}

JavaScript

/**/
function pad(n) {
  return n < 10 ? '0' + n : n;
}

function CountDownTimer(dt, id) {
	let end = new Date(dt),
    	_second = 1000,
		_minute = _second * 60,
		_hour = _minute * 60,
		_day = _hour * 24,
		timer;

	function showRemaining() {
		let now = new Date(),
			distance = end - now;

		if (distance < 0) {
			clearInterval(timer);
			document.getElementById(id).innerHTML = 'EXPIRED!';

			return;
		}

		let days = Math.floor(distance / _day),
			hours = Math.floor((distance % _day) / _hour),
			minutes = Math.floor((distance % _hour) / _minute),
			seconds = Math.floor((distance % _minute) / _second);

		document.getElementById(id).innerHTML = pad(hours) + '<span>:</span>' + pad(minutes) + '<span>:</span>' + pad(seconds);
	}

	timer = setInterval(showRemaining, 1000);
}
/**/

CountDownTimer('10/27/2020 10:1 AM', 'countdown');