Home Web Development JavaScript JavaScript Countdown Timer With CSS UI | Pure JS Countdown Clock

JavaScript Countdown Timer With CSS UI | Pure JS Countdown Clock

July 6, 2019

17386

Want to create a countdown timer with HTML, CSS, & JavaScript? Solution: JavaScript Countdown Timer With CSS UI, A Pure JS Countdown Clock.

I am sure that you know what is countdown timer or clock. A countdown timer is a virtual clock that counts down from a certain number or date to indicate the beginning or end of an event. It can be use on the website to showing any offer becomes available at a specific date and time.

Today you learn to create a countdown timer clock using pure JavaScript with a good UI. This is a simple countdown timer built-in HTML, CSS, & JS no other library have been used. Suppose your websites is on construction mode, you can use this countdown timer for giving information to your users. Or you want to start sale on next day place this timer on your sale page, there are many ways to using this.

So, Today I am sharing JavaScript Countdown Timer With Attractive CSS UI. In other words, a Pure JS Countdown Clock With HTML CSS interface. This has CSS based minimal & flat design layout after all this looks very good. As you know I did not use any library for creating this, This is a pure JavaScript Program.

If you are thinking now how the design or UI actually is which I am talking about, then see the preview given below.

Preview Of Pure JS Countdown Clock

See this video preview to getting an idea of how this countdown clock looks like.

Now you can see this visually. If you like this, then get the source code of its.

JavaScript Countdown Timer With CSS UI Source Code

Before sharing source code, let’s talk about it. In HTML file I have just created 2 divs & a heading, I have created a <h1> & a div for the countdown with id="countdown". These two object I have placed inside the main div with class="main". Also with these, I have put the CSS & JS files links & two google fonts inside the <head> section.

In the JavaScript section First, I have created two const(get info), one for getting the current year & one for the chosen date. For the chosen date, I have put only year using default JS get date function, left mont & date I have put manually using array. After that, I have created another two const, one for fetch the current date & one for calculating the difference between chosen & current date.

For calculating the difference I have used JS math.floor command for each section like days, hours, etc. After calculating the difference I have changed the HTML value using JavaScript’s getElementById("countdown").innerHTML, ‘countdown‘ is the div I have created before.

Now all the designing & UI is done in CSS file, I have put position, colors, fonts details in the CSS. You will understand the whole concept after getting the codes, there is now nothing to explain all are the easy kind of stuff. For creating this program you have to create 3 files. First for HTML, second for CSS, & third for JavaScript.

Follow the steps to creating this without any error.

index.html

Create an HTML file named ‘index.html‘ and put these codes given here below.

<!DOCTYPE html>
<!-- code by webdevtrick ( https://webdevtrick.com ) -->
<html>

<head>
  <meta charset="UTF-8">
  <title>JavaScript Cowndown Timer | Webdevtrick.com</title>
  <link href="https://fonts.googleapis.com/css?family=Lato|Montserrat|Rubik+Mono+One&display=swap" rel="stylesheet">
      <link rel="stylesheet" href="style.css">
</head>
<body>
<div class="main">
	  <h1>Selected Date Is 7<sup>th</sup> Of August</h1>

  <div id="countdown"></div>
</div> 

    <script  src="function.js"></script>

</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>JavaScript Cowndown Timer | Webdevtrick.com</title>

</head>

<body>

<h1>Selected Date Is 7<sup>th</sup> Of August</h1>

</div>

</body>

</html>

style.css

Now create a CSS file named ‘style.css‘ and put these codes.

/** code by webdevtrick ( https://webdevtrick.com ) **/
html {
  display: grid;
  min-height: 100%;
}

body {
  display: grid;
  background: #333;
}

.main {
  position: relative;
  margin: auto;
  overflow: hidden;
  width: 850px;
  height: 480px;
}

h1 {
  font-family: "Montserrat", sans-serif;
  text-align: center;
  margin-top: 2em;
  font-size: 2em;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: #F6F4F3;
}
h1 sup {
	text-transform: lowercase;
	color: #FF3E41;
}

#countdown {
  color: #F6F4F3;
  text-align: center;
  text-transform: uppercase;
  font-family: "Lato", sans-serif;
  font-size: 1em;
  letter-spacing: 5px;
  margin-top: 5%;
}

.days, .hours, .minutes, .seconds, .left {
  display: inline-block;
  padding: 20px;
  width: 120px;
  border-radius: 10px;
}

.days {
  background: #D87200;
}

.hours {
  background:  #FF3E41;
}

.minutes {
  background: #FFB20C;
}

.seconds {
  background:  #2186FF;
}

.left {
	background: #E10A0A;
}
.c-number {
  font-family: "Montserrat", sans-serif;
  color: #333;
  font-size: 5em;
}

/** code by webdevtrick ( https://webdevtrick.com ) **/

html {

display: grid;

min-height: 100%;

}

body {

display: grid;

background: #333;

}

.main {

position: relative;

margin: auto;

overflow: hidden;

width: 850px;

height: 480px;

}

h1 {

font-family: "Montserrat", sans-serif;

text-align: center;

margin-top: 2em;

font-size: 2em;

text-transform: uppercase;

letter-spacing: 3px;

color: #F6F4F3;

}

h1 sup {

text-transform: lowercase;

color: #FF3E41;

}

#countdown {

color: #F6F4F3;

text-align: center;

text-transform: uppercase;

font-family: "Lato", sans-serif;

font-size: 1em;

letter-spacing: 5px;

margin-top: 5%;

}

.days, .hours, .minutes, .seconds, .left {

display: inline-block;

padding: 20px;

width: 120px;

border-radius: 10px;

}

.days {

background: #D87200;

}

.hours {

background: #FF3E41;

}

.minutes {

background: #FFB20C;

}

.seconds {

background: #2186FF;

}

.left {

background: #E10A0A;

}

.c-number {

font-family: "Montserrat", sans-serif;

color: #333;

font-size: 5em;

}

function.js

The final step, Create a JavaScript file named ‘function.js‘ and put the codes.

/** code by webdevtrick ( https://webdevtrick.com ) **/
const year = new Date().getFullYear();
const choosenDate = new Date(year, 7, 6).getTime();

let countdown = setInterval(function() {

  const today = new Date().getTime();

  const diff = choosenDate - today;

  let days = Math.floor(diff / (1000 * 60 * 60 * 24));
  let hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  let minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
  let seconds = Math.floor((diff % (1000 * 60)) / 1000);

  document.getElementById("countdown").innerHTML =
    "<div class=\"days\"> \
  <div class=\"c-number\">" + days + "</div>days</div> \
<div class=\"hours\"> \
  <div class=\"c-number\">" + hours + "</div>hours</div> \
<div class=\"minutes\"> \
  <div class=\"c-number\">" + minutes + "</div>minutes</div> \
<div class=\"seconds\"> \
  <div class=\"c-number\">" + seconds + "</div>seconds</div> \
<div class=\"left\">LEFT</div>\
</div>";

}, 1000);

/** code by webdevtrick ( https://webdevtrick.com ) **/

const year = new Date().getFullYear();

const choosenDate = new Date(year, 7, 6).getTime();

let countdown = setInterval(function() {

const today = new Date().getTime();

const diff = choosenDate - today;

let days = Math.floor(diff / (1000 * 60 * 60 * 24));

let hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));

let minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));

let seconds = Math.floor((diff % (1000 * 60)) / 1000);

document.getElementById("countdown").innerHTML =

"<div class=\"days\"> \

<div class=\"c-number\">" + days + "</div>days</div> \

<div class=\"hours\"> \

<div class=\"c-number\">" + hours + "</div>hours</div> \

<div class=\"minutes\"> \

<div class=\"c-number\">" + minutes + "</div>minutes</div> \

<div class=\"seconds\"> \

<div class=\"c-number\">" + seconds + "</div>seconds</div> \

<div class=\"left\">LEFT</div>\

</div>";

}, 1000);

That’s It. Now you have successfully created JavaScript Countdown Timer With CSS UI, A Pure JS Countdown Clock. If you have any doubt or question comment down below.

Thanks For Visiting, Keep Visiting.

12 COMMENTS

Giuseppe July 6, 2019 At 8:04 pm

Optimize JS Man…

Reply
- shaan July 7, 2019 At 2:13 am
  
  sure but there are already very fewer lines of codes.
  
  Reply
Amitesh Kumar July 7, 2019 At 4:51 am

Great. However instead of rendering countdown html hrs, minutes etc. each second just update their text content.

Reply
- shaan July 7, 2019 At 6:44 am
  
  Thanks for your suggestion I will definitely try
  
  Reply
Shivam ojha July 9, 2019 At 3:55 pm

Hello, how i insert time in function.js to start the timer.

Reply
- shaan July 9, 2019 At 3:57 pm
  
  For inserting time you have to create a new function & math calculation
  
  Reply
amarnath. July 29, 2019 At 11:11 am

I have created three files in notepad++ and I have run it, it just shows HTML code in the browser. Could anyone help, please!

Reply
- shaan July 29, 2019 At 11:23 am
  
  show me your html code
  
  Reply
UDAY THATI October 7, 2019 At 7:32 am

Thanks bro ur coding guru great job

Reply
UDAY THATI October 7, 2019 At 7:47 am

How to add this code in webpage

Reply
emer November 9, 2019 At 2:30 pm

vgood scripts… can u show me how to apply this for this particular scenario
current time is: xxxxxx
enter no of hrs xxxxx
time out is: xxxx
remaining time: xxxx

Reply
Niyas October 14, 2020 At 4:44 am

How to automatically open another page after the timer runs out…? Pls show me….

Reply