Time Counter Javascript | How To Count Time In Javascript







Time Counter Javascript | How To Count Time In Javascript

Welcome to today’s tutorial. Today we are going to create a time counter for 60 seconds. For this, we are going to use HTML, CSS and Javascript.

 You need basic ES6 knowledge for this javascript project. This tutorial is well suited for javascript intermediates. Let us get started with the project.

By the end of this blog after reading,you can make a countdown not only of sixty seconds you can create your own customized countdown timer even if you want a contdown for days/hours or years it totally depends on you.

 Hey Learners, 

Before moving on the code Let’s First discuss what are the prerequisite required for this tutorial.

 

setInterval () Function:-

The setInterval() method calls a function at specified intervals (in milliseconds).

The setInterval() method continues calling the function until clearInterval() is called, or the window is closed.

1 second = 1000 milliseconds.

 

  • To execute the function only once, use the setTimeout() method instead.
  • To clear an interval, use the id returned from setInterval():
               myInterval = setInterval(function, milliseconds);
  • Then you can to stop the execution by calling clearInterval():
               clearInterval(myInterval); 
 
before writing the code let’s see the live server of the countdown so you can understand it perfectly.
 

Live server:-

See the Pen Untitled by Himanshu Singh (@himanishu) on CodePen.

 

HTML CODE:- 

HTML is the basic layout of any webpage.So we will insert only a div that has a class named as timer.

 <!DOCTYPE html>  
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="timer"></div>
</body>
</html>

CSS code:-

CSS  is styling of the layout.We have used flex property of the CSS.

FLEX Container:-
 
Flex Container aligns horizontally al the items in a same line in the flex container.
justify-content aligns the item horizontally.
align item align the item vertically.
 body{
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
background:linear-gradient(pink,aqua)
}
.timer{
color: white;
font-size:56px;
font-weight: bolder;
border:5px solid white;
padding:50px;
border-radius:50%;
}

JavaScript:-

 In javscript I have used the DOM property and the set interval function:-

 var time=document.getElementsByClassName("timer")

var timings=60;
var i=0;
var myInterval = setInterval(Timeout, 1000);
function Timeout(){

time[0].innerHTML=`${(timings*60-i)%60}`
i++;
}

Now your countdown is ready finally ! Hurrah! you can use this countdown in many palces like in e-commerce website like deal is ending in 30 minutes or sometimes u can use it as a countdown when you are studying/meditating,etc.

I hope you have loved this blog and learnt many things at a place please let us know your review in the comment section if you liked it please comment below as it will give us motivation to create more blogs.

If you faced any difficulty feel free to comment down your problems and If you really liked it, please show your love in the comment section this really motivates a blogger to provide more such content.

You can follow me on Instagram.

Written by @Himanshu Singh. 

Share on:

Leave a Comment