How To Count Time Using JavaScript ( Time Counter JavaScript)

Welcome to today’s tutorial. Today we are going to create a Time Counter for 60 Seconds Using JavaScript. For this, we are going to use HTML, CSS, and JavaScript Code. and if you want to can change Time Counter from 60 seconds to 30 minutes or 60 minutes Through a Change in the Javascript code.

in our time counter project, we give time to the project like 60 seconds or maybe 60 minutes. so you can add this counted time in the javascript code.

Hey Learners,Before moving on to 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.

Html CODE For Time Counter:-

Any website's core design is HTML. Therefore, we will merely add a div with the class "timer." The styling and functionality of the timer, which will be introduced through javascript, will be used to form the basic structure for time.

Just now, we used the div tag and the class "timer" to build a container. Our timer will be made using CSS and the container.

<html lang="en">

<head>
    <title>Timer</title>
    <!--Stylesheet-->
    <link rel="stylesheet" href="style.css">
</head>

<body>

    <div class="timer">Timer</div>

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

</html>

Now if we look at the output you will see a blank screen as we have not added thing other than the timer container.

CSS CODE For Time Counter:-

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

All items on the same line are horizontally aligned by the Flex Container.
The item is horizontally aligned using justify-content.
vertical alignment of the item

 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%;
    }

Step 1: We will set the display to flex using the body tag selector, and we will centre the items using the align-item attribute. 700 vh is the height setting. We will set a linear gradient with a pink and aqua combo using the background property.

Step2: we style .timer div in css,we give basic styling to timer div. give padding and font size, color and that's all for this css code.

JavaScript CODE For Time Counter:-

In JavaScript, 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 Timer Countdown is ready finally! Hurrah! you can use this countdown in many places like on e-commerce websites where deals are 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 learned 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 the 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.

Written by @himanshu Singh.