How To Count Time Using JavaScript ( Time Counter)
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.
50+ HTML, CSS & JavaScript Projects With Source 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.
Live Preview Of Time Counter:-
Code by | N/A |
Project Download | Link Available Below |
Language used | HTML ,CSS and JavaScript |
External link / Dependencies | No |
Responsive | Yes |
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.
Simple Portfolio Website Using Html And Css With Source Code
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.
HTML Output:
CSS CODE For Time Counter:-
FLEX Container:-
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
ADVERTISEMENT
ADVERTISEMENT
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%; }
ADVERTISEMENT
ADVERTISEMENT
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.
ADVERTISEMENT
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.
Responsive Resume/CV Website Using HTML & CSS
Javascript Output:
Video Output:
Weather App Using Html,Css And JavaScript
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.