JS - CountDown Clock

In this example below you will see how to do a JS - CountDown Clock with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by imsajid12, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright imsajid12 ©
  • HTML
  • CSS
  • JavaScript
    <html>
	<head>
		<title>Countdown Clock</title>
	</head>
	<body>
		<table class="countdownContainer">
			<tr class="info">
				<td colspan="4">Birthday Countdown</td>
			</tr>
			<tr class="info">
				<td id="days"></td>
				<td id="hours"></td>
				<td id="minutes"></td>
				<td id="seconds"></td>
			</tr>
			<tr>
				<td>Days</td>
				<td>Hours</td>
				<td>Minutes</td>
				<td>Seconds</td>
			</tr>
		</table>
	</body>
</html>

/*Downloaded from https://www.codeseek.co/imsajid12/js-countdown-clock-MEzQRg */
    body {
	background: #f6f6f6;
}

.countdownContainer {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
	text-align: center;
	background: #ddd;
	border: 1px solid #999;
	padding: 10px;
	box-shadow: 0 0 5px 3px #ccc;
} 

.info {
	font-size: 80px
}


/*Downloaded from https://www.codeseek.co/imsajid12/js-countdown-clock-MEzQRg */
    function countdown() {
	var now = new Date();
	var eventDate = new Date(2018, 11, 12);
	
	var currentTime = now.getTime();
	var eventTime = eventDate.getTime();
	
	var remainingTime = eventTime - currentTime;
	var seconds = Math.floor(remainingTime / 1000);
	var minutes = Math.floor(seconds / 60);
	var hours = Math.floor(minutes / 60);
	var days = Math.floor(hours / 24);
	
	hours %= 24;
	minutes %= 60;
	seconds %= 60;
	
	hours = (hours < 10) ? "0" + hours : hours;
	minutes = (minutes < 10) ? "0" + minutes : minutes;
	seconds = (seconds < 10) ? "0" + seconds : seconds;
	
	document.getElementById("days").textContent = days;
	document.getElementById("hours").textContent = hours;
	document.getElementById("minutes").textContent = minutes;
	document.getElementById("seconds").textContent = seconds
	
	setTimeout(countdown, 1000);
}

countdown();

Comments