Home Life Amazing JavaScript Countdown Clock with PSD – Free

Amazing JavaScript Countdown Clock with PSD – Free

Amazing JavaScript Countdown Clock with PSD
Amazing JavaScript Countdown Clock with PSD

Countdown clock means- sequence a backward counting to indicate the remaining time before an event is scheduled to occur. Normally we use countdown clock for an upcoming event, anniversary, festival etc. At also say coming soon page. We also use it into e-commerce website to attract visitor that the offer will end soon.

By the way, today I’ll show you how to you can make a countdown clock with HTML, CSS, and JavaScript. Also, I’ll provide PSD for the countdown. It is designed for desktop and mobile. So it’s responsive and I’ll provide both PSD. The PSD designed by an American famous designer Matthew Fletcher. She is my online co-worker.

How to I’ll make the countdown clock with JavaScript

With the 3 steps I’ll show you how to you can make the countdown clock. At last, I’ll give you a demo link with a demo image. Also, I’ll upload the source code into Google Drive. So that you can download from there easily.

Step 1: Create HTML for markup. You can edit the HTML as you want by keeping class and ID which has been used in the JavaScript section.


Step 2: Write CSS for styling it. It’s a very basic style. You can style it as you want. You need to know CSS for styling it.

	.countdownTimer {
		width: 700px;
	    overflow: hidden;
	    display: block;
	    margin: 0 auto;
	    font-family: 'DSDigital', Helvetica, sans-serif;
		padding: 40px 0 20px 0;
	.digit {
		font-size: 90px;
		letter-spacing: 2px;
		font-weight: 700;
		text-shadow: 0px 0px 13px #000;
	.division {
		text-transform: uppercase;
	    font-weight: normal;
	    font-size: 20px;
	    margin-top: 40px;
	    display: block;
	    text-align: center;
	    text-shadow: 0px 0px 13px #000;
		display: inline-block;
		margin: 0 28px;

Step 3: At last, write JavaScript code for activating the countdown clock. Beneath of the code I’ve written the event date. Time actually will start from the date.

	(function () {
		"use strict";

		var Timer = {
			weeksDiv: document.getElementById("weeks"),
			daysDiv: document.getElementById("days"),
			hoursDiv: document.getElementById("hours"),
			//minutesDiv: document.getElementById("minutes"),
			secondsDiv: document.getElementById("seconds"),

			pad: function(num, size) {
				var s = num + "";
				while (s.length < size) s = "0" + s;
				return s;

			updateTime: function(){
				Timer.weeks = Math.floor(Timer.totalSeconds / 604800);
				Timer.days = Math.floor((Timer.totalSeconds % 604800) / 86400);
				Timer.hours = Math.floor((Timer.totalSeconds % 86400) / 3600);
				Timer.seconds = Math.floor(((Timer.totalSeconds % 86400) % 3600) % 60);

				Timer.weeksDiv.innerHTML = Timer.pad(Timer.weeks, 2);
				Timer.daysDiv.innerHTML = Timer.pad(Timer.days, 2);
				Timer.hoursDiv.innerHTML = Timer.pad(Timer.hours, 2);
				//Timer.minutesDiv.innerHTML = Timer.pad(Timer.minutes, 2);
				Timer.secondsDiv.innerHTML = Timer.pad(Timer.seconds, 2);

			countdown: function(){
				if (Timer.totalSeconds === 0){
					window.alert("Time's up!");
				} else {
					Timer.totalSeconds -= 1;
					window.setTimeout(Timer.countdown, 1000);

			init: function(toDate){
				Timer.totalSeconds = Math.floor(toDate - new Date())/1000;

		var toDate = new Date("February 15, 2019 00:00:00")

Apparently, it was the main part of the countdown clock. But if you use the full code, it’ll look like-


Here is a demo website. Demo website hosted on ThemePackNet and thanks to them. You can see and download the source code from here.

Thanks for reading and enjoying the article. Share the article on your Facebook, Twitter timeline.



Please enter your comment!
Please enter your name here