30 Minutes Countdown Timer In JavaScript
Last Updated : Mar 11, 2024
IN - JavaScript | Written & Updated By - Pragati
In this tutorial we will show you the solution of 30 minutes countdown timer in JavaScript, as we know countdown timer is updating countdowns for particular timing, here we are going to displaying 30 minutes counter by setInterval method when it reach 30 minutes alert message will appear for instruct user by using setTimeout() method.
These are built-in methods by using this we achieve our result.
Step By Step Guide On 30 Minutes Countdown Timer In JavaScript :-
As we seen above with the help of those methods we gets result of countdown timer for 30 minutes.
The setInterval() method offered on the window and worker interfaces, repeatedly calls a function or executes a code snippet with a fixed time delay between each call.
This method returns an interval ID which uniquely identifies the interval, so you can remove it later by calling clearInterval() method. Method setTimeout() is used to do some process after time limit gone.
<!DOCTYPE html>
<html>
<head>
<title>wait 30 mints</title>
</head>
<body>
<H3 id="demo">30</H3>
<script>
var m=30;
var waitt=30*60*1000;
setInterval(function(){
m=m-1;
document.getElementById('demo').innerHTML+=m;
},60000);
setTimeout(() => {
alert("30 Mints Left!");
document.getElementById('demo').style.display="none";
},waitt);
</script>
</body>
</html>- <!DOCTYPE html> tag which is instruct the web browser about what version of HTML file written in and it’s not have any ending tag.
- The<html> tag is used to indicate the beginning of HTML document.
- As above shown <head> tag is contain information about webpage and external file links are declared here. <title> tag is used for set the webpage title.
- Both <head> and <title> tags having their pair end tag, so we need to close the ending tags respectively. If you’re not closed anyone of ending tag properly that is also affect the webpage result.
- <body> tag is beginning of main coding part because it contain coding of entire website blocks and elements described here.
- Here we defined h3 tag for with id ‘demo’ for appends result of 30minutes timer on webpage.
- In script file we defined variable ‘m’ for store value 30 and variable ‘waitt’ for store value 30*60*1000. In function fun() we used setInterval() method with waiting time as ’60 seconds’ so within this method what we had done will updated for each 60 seconds.
- Variable 30 value will displayed on webpage and each 60 seconds it id decreased by 1 for make 30 minutes counter. After finishing 30 minutes counter we alerts user by alert message ‘30 Mints Left!’ and hiding counter by sets counter element style property sets to none.
- Both </body>,</html> tags closed respectively. </body> tag indicates the end of body, Then </html> tag indicates the end of HTML document.
Conclusion :-
In conclusion now we are able to know how to create 30 minutes countdown timer on webpage using JavaScript.
When we executing this program on browser we can see 30 minutes updated for each 60 seconds it will decreased by one so we easily achieved our result.
We can also do some other process also for each 60seconds on webpage try out something different.
I hope this tutorial on 30 minutes countdown timer in JavaScript helps you and the steps and method mentioned above are easy to follow and implement.
About Pragati
