Countdown Timer Project in JavaScript

Hello everyone, welcome to today’s tutorial. Today I will be explaining, how to create a countdown timer using JavaScript, HTML and CSS. A countdown timer is a clock that counts the time from a certain point to indicate the start or end of an occasion.

The html code is:

<body>
<h1>Click the button below to start the timer </h1>
<input type="button" class ="b1" value=" Click on me to start the time" id="b1" height="20px" onclick="CountDown();">

<h2>Remaining time is displayed here:</h2></br></br>
<table align="center">
<tr>
<td align="center" ><h3> Minutes</h3></td>
<td></td>
<td align="center" ><h3> Seconds</h3></td>
</tr>

<tr>		  
<td><input  class ="c1" id="min" type="text" readonly ></td>
<td style="font-size: 30px"> <b> :</b></td> 
<td><input class="c2" id="sec" type="text"readonly > </td>
</tr>

</table></br>
<p id="comment"></p>
</body>

The button created, which on click goes to a JavaScript function called CountDown() (explained later in this tutorial), which makes the timer start running(counts downward).

There are two text boxes created, first one displays minutes that is remaining and the second one displays the second that are remaining. The table provides a better oriented displayed. A paragraph element is used to display certain comments.

The JavaScript code is:

<script>
var mins = 1; 
var secs = mins * 60; 
function CountDown() { 
    document.getElementById("b1").disabled = true;
    setTimeout('Timer()', 90); 	
} 

function Timer() { 
        minutes = document.getElementById("min"); 
        seconds = document.getElementById("sec");
        
        minutes.value = getMins(); 
        seconds.value = getSecs(); 
        document.getElementById("comment").innerHTML = "The countdown begins!!";
    
  if (secs < 20) { 
            minutes.style.color = "#ff6600"; 
            seconds.style.color = "#ff6600";
            document.getElementById("comment").innerHTML = "Time is less than 20seconds!!"; 
        } 
    
        if (secs < 10) { 
            minutes.style.color = "#cc0000"; 
            seconds.style.color = "#cc0000";
            document.getElementById("comment").innerHTML = "Time is running!!"; 
        } 

        if (mins < 0 ) { 
            minutes.value = '00'; 
            seconds.value = '00';
            document.getElementById("comment").innerHTML = "Oops !!It ends here.";
        }

        else { 
            secs--; 
            setTimeout('Timer()', 1000); 	
        } 
    
}

function getMins() { 
    mins = Math.floor(secs / 60); 
    return mins; 
} 

function getSecs() { 
    return secs - Math.round(mins * 60); 
}
</script>

In this code, initially the “mins” are specified indicating the timer you want to set for the timer. Which the converted to seconds in the “secs”, the function CountDown(), calls another function Timer() after 90  milliseconds. Disabling the button would not affect the countdown while the timer is running.

setTimeout is a method that executes an expression after certain interval specified.

JavaScript function

The Timer() displays the countdown in appropriate position and displays different messages when the time is reduced to certain point. In this code, when the seconds are less than 20, the countdown is displayed in orange color with a message. When the seconds are less than 10, its displayed in red and a message being displayed.

The getMins() and getSecs() function returns the proper integer value of ‘mins’ and ‘secs’ into the text fields.

This code helps in the one runs the countdown.

else {
secs–;
setTimeout(‘Timer()’, 1000);
}

The entire code is:

<!DOCTYPE html> 
<html>
<title>Timer</title>
<head> 
<h1>Click the button below to start the timer </h1>
  <style>
    .b1 {
      background-color: #66a3ff;
      border:3px solid #000066;
      padding: 30px 32px;
      text-align: center;
      text-decoration: none;
      font-size: 20px;
      margin: 10px 10px;
      cursor: pointer;
      border-radius: 35px;
    }
    body{
      background-color: #ffaa80;
    }

    #min,#sec{
    font-size: 30px;
    background: #ffccff;
    }
    
    .c1{
    display:inline-block !important;
    margin-right:2px;
    }
    .c2{
    display:inline-block;
    }
    
    p{
    font-size: 20px;
    }
    
  </style>
</head> 
<body align="center"> 

<input type="button" class ="b1" value=" Click on me to start the time" id="b1" height="20px" onclick="CountDown();">
<h2>Remaining time is displayed here:</h2></br></br>
<table align="center">
<tr>
<td align="center" ><h3> Minutes</h3></td>
<td></td>
<td align="center" ><h3> Seconds</h3></td>
</tr>
<tr>		  
<td><input  class ="c1" id="min" type="text" readonly ></td>
<td style="font-size: 30px"> <b> :</b></td> 
<td><input class="c2" id="sec" type="text"readonly > </td>
</tr>
</table></br>
<p id="comment"></p>
        

<script>
var mins = 1; 
var secs = mins * 60; 
function CountDown() { 
  document.getElementById("b1").disabled = true;
    setTimeout('Timer()', 90); 
} 

function Timer() { 
        minutes = document.getElementById("min"); 
        seconds = document.getElementById("sec");
         
        minutes.value = getMins(); 
        seconds.value = getSecs(); 
        document.getElementById("comment").innerHTML = "The countdown begins!!";
    
    if (secs < 20) { 
            minutes.style.color = "#ff6600"; 
            seconds.style.color = "#ff6600";
            document.getElementById("comment").innerHTML = "Time is running!!"; 
        } 
    
        if (secs < 10) { 
            minutes.style.color = "#cc0000"; 
            seconds.style.color = "#cc0000";
            document.getElementById("comment").innerHTML = "Time is less than 10seconds now!!"; 
        } 
    
        if (mins < 0 ) { 
            minutes.value = '00'; 
            seconds.value = '00';
            document.getElementById("comment").innerHTML = "Oops !!It ends here.";
        }
    
        else { 
            secs--; 
            setTimeout('Timer()', 1000); 
        } 
}

function getMins() { 
    mins = Math.floor(secs / 60); 
    return mins; 
} 
function getSecs() { 
    return secs - Math.round(mins * 60); 
}

</script>	  
 </body>
</html>

We can run the code to see how it is working.

Thank you, everyone, hope you all enjoyed this learning and wish this tutorial has helped you.

Leave a Reply

Your email address will not be published. Required fields are marked *