How To Create a Countdown Timer For 30 Minutes

How To Create a Countdown Timer For 30 Minutes

In this article, we will learn how to create 30 minutes countdown timer 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.

How to create a countdown for 30  minutes using HTML, CSS, and 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.

 

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 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>

Netflix Clone Using HTML, CSS, and javascript (Source Code)

FLEX Container:-

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.

CSS code for Countdown Timer

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.

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

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

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.

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.

Leave a Reply