Create 30 Minutes Countdown Timer In JavaScript
Hello Coder! Welcome to the Codewithrandom blog. In this article, we will learn 30 Minutes Countdown Timer In JavaScript where you can start a countdown, stop the countdown, and also reset the countdown to the default value.
This design will count down to a specific time such as 30 minutes or 1 hour. HTML, CSS, and JavaScript have been used to create this 30 Minutes Countdown Timer.
50+ HTML, CSS and JavaScript Projects With Source Code
.png "How to create countdown for 30 minutes using HTML,CSS and Javascript? Start Timer For 30 Minutes")
A countdown timer is a type of online computer program that lets people set a specific time frame. With this type of timer, users can finish chores before the timer expires because the time limit begins when the timer is initiated by the user.
How to create a countdown for 30 minutes using Javascript?
By the end of this blog after reading, you can make a countdown not only of thirty minutes you can create your own customized countdown timer even if you want a countdown for days/hours or years it totally depends on you.
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.
100+ HTML,CSS and JavaScript Projects With Source Code ( Beginners to Advanced)
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 stop the execution by calling clearInterval():
clearInterval(interval);
before writing the code let’s see the live server of the countdown so you can understand it perfectly.
Live Preview of 30 Minutes Countdown Timer:-
Html Code For Countdown Timer:-
HTML is the basic layout of any webpage. So we will insert only a div that has a class named 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>
We’ll use the <div> element with classtimer to add the structure for our timer’s countdown using a straightforward html tag. Using the class timer, we will build the timer’s container. To our countdown timer, we will apply the styling.
Gym Website Using HTML and CSS (Source Code)
A blank screen will now appear if you glance at the output. In order to make our timer container visible, we must also add width, height, and a background colour. However, we are temporarily adding some writing inside our project container so that you can see the result.
HTML Output:
Netflix Clone Using HTML,CSS and JavaScritp (Source Code)
ADVERTISEMENT
ADVERTISEMENT
CSS Code For Countdown Timer:-
FLEX Container:-
ADVERTISEMENT
Flex Container aligns horizontally all the items in the same line in the flex container.
justify-content aligns the item horizontally.
align item align the item vertically.
ADVERTISEMENT
CSS is the styling of the layout. We have used the flex property of the CSS. I have used very little code here to design. You copy the entire CSS code and add it to your CSS file.
ADVERTISEMENT
body{
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
background-image: url("https://images.unsplash.com/photo-1553095066-5014bc7b7f2d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8d2FsbCUyMGJhY2tncm91bmR8ZW58MHx8MHx8&w=1000&q=80");
background-repeat: no-repeat;
background-size: cover;
}
.timer{
color: white;
font-size:56px;
font-weight: bolder;
border:5px solid white;
padding:50px;
border-radius:50%;
}Step1:We’ll style our countdown website by using the body tag selection. We’ll use the display property to change the display to “flex,” and the align-items property to center all of the content. Here, we’ve inserted an image background and used the background-image property to make it. The background picture will be added to our project using the URL.
Ecommerce Website Using HTML, CSS, and JavaScript (Source Code)
body{
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
background-image: url("https://images.unsplash.com/photo-1553095066-5014bc7b7f2d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8d2FsbCUyMGJhY2tncm91bmR8ZW58MHx8MHx8&w=1000&q=80");
background-repeat: no-repeat;
background-size: cover;
}
Step2:We will apply the styling to our timer container using the class selector (.timer). We’ll use the colour property to make the typeface white, the font-size property to make the font 56 pixels, the border property to add a 6 pixel border, and the border-radius property to add a 50% border radius to give our timer the appearance of a circle clock.
.timer{
color: white;
font-size:56px;
font-weight: bolder;
border:5px solid white;
padding:50px;
border-radius:50%;
}
Multiple Choice Quiz using HTML, CSS &JavaScript
JavaScript for Countdown Timer
var time=document.getElementsByClassName("timer")
var timings=30;
var i=0;
var myInterval = setInterval(Timeout, 1000);
function Timeout(){
if((timings*60-i)%60>=10){
time[0].innerHTML=parseInt(`${(timings*60-i)/60}`)+":"+`${(timings*60-i)%60}`;
}
else{
time[0].innerHTML=parseInt(`${(timings*60-i)/60}`)+":0"+`${(timings*60-i)%60}`;
}
i++;
}First, we’ll use the document to make a time variable for the timer. Using getElementByClassName, we will choose the html element and create a new variable called timings. We’ll set the value of this variable to 30, and we’ll use the timeout function to create a timeout function that will check to see if the timings have been multiplied by 68 seconds before lowering the minute values at each second.
Word Counter For Text Area Using HTML & JavaScript
I have used the DOM property and the set interval function:-
Now your countdown is ready finally! Hurrah! you can use this countdown in many places like on an e-commerce website like the deal is ending in 30 minutes or sometimes u can use it as a countdown when you are studying/meditating, etc.
In this blog post, we will discuss 15+ CSS Skeleton with complete source code so you can just copy and paste them into your own project. Happy exploring !! If there is any problem, you can let me know by commenting. Earlier I shared many more tutorials where I showed step-by-step how to create countdown time.
Hopefully from this tutorial, you have learned how to create 30 Minutes Countdown Timer using JavaScript.
Final Output Of 30 Minutes Countdown Timer In Javascript:
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.
Thank You For Visiting!!!
You can follow me on Instagram.
Written by @Himanshu Singh.
What is a countdown timer?
A countdown timer is a type of online computer programme that lets people set a specific time frame. Users can finish tasks before the timer expires with this type of timer because the time limit begins when the user commences it.
What is the purpose of a countdown timer?
Businesses that must make deadlines frequently employ countdown timers, as seen on websites like Swiggy where the delivery boy is required to deliver the food within a specific time frame.
