How to create countdown for 30 minutes using HTML,CSS and Javascript? Start Timer For 30 Minutes

How to create countdown for 30  minutes using HTML,CSS and Javascript? Start Timer For 30 Minutes

 
How to create countdown for 30  minutes using HTML,CSS and Javascript? Start Timer For 30 Minutes


How to create countdown for 30  minutes using HTML,CSS and Javascript?Start Timer For 30 Minutes

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 contdown for days/hours or years it totally depends on you.

 

 Hey Learners, 

Before moving on 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 server:-
 
 
 

See the Pen Untitled by Himanshu Singh (@himanishu) on CodePen.

 

HTML CODE:- 

HTML is the basic layout of any webpage.So we will insert only a div that has a class named as 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>  

 

 CSS code:-

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

FLEX Container:-
 
Flex Container aligns horizontally al the items in a same line in the flex container.
justify-content aligns the item horizontally.
align item align the item vertically.


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


JavaScript:-

 In javscript I have used the DOM property and the set interval function:-
 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++;  
   }  


Now your countdown is ready finally ! Hurrah! you can use this countdown in many palces like in e-commerce website like deal is ending in 30 minutes or sometimes u can use it as a countdown when you are studying/meditating,etc.


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.

You can follow me on Instagram.

Written by @Himanshu Singh.

Post a Comment

Previous Post Next Post