30 Minutes Countdown Timer Using JavaScript

30 Minutes Countdown Timer Using JavaScript

30 Minutes Countdown Timer Using JavaScript

In this article, I have shown you how to create 30 Minutes Countdown Timer using JavaScript, HTML, and CSS. Earlier I shared many more types for countdown timer tutorials. But those timers count down to a specific date.

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. Here I have given the required source code and explanation. You need to have a basic idea about HTML, CSS, and javascript to make it.

30 Minutes Countdown Timer in JavaScript

Below I have given a demo that will help you to know how it was created. In this demo section, you will find the required source code. You can copy that source code directly and use it in your work.

See the Pen
30 minutes countdown timer in javascript by Foolish Developer (@foolishdevweb)
on CodePen.

As you can see above, this is a simple countdown timer with a 30-minute countdown timer. The countdown will begin as soon as you load the webpage. The problem is, there are no control buttons that allow you to turn off the countdown. 

But before that, I have shared many more designs where there are different control buttons. However, those designs are relatively difficult to make. There will be a thirty-minute countdown but you can change this time to your liking. 

Build 30 minutes Countdown Timer using JavaScript

The countdown will start when you open this project. After 30 minutes the countdown will end and a message will be displayed. You can change this message to suit your needs.

First, create the HTML and CSS files. Even if you do not create a JavaScript file here. You can add all the JavaScript code to the HTML file.

The following HTML codes help to create the basic structure of this 30 Minutes Countdown Timer. Only one line of HTML code is used here. I have used all the other HTML elements in JavaScript. 

You copy the entire HTML code and add it to your HTML file(index.html). Here is the basic structure required for HTML code.

<!DOCTYPE html>
<html lang=“en”>
<head>
  <meta charset=“UTF-8”>
  <meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
  <meta http-equiv=“X-UA-Compatible” content=“ie=edge”>
  <title>Document</title>
  <!–css code–>
  <link rel=“stylesheet” href=“style.css”>
</head>
<body>
  <div id=“ten-countdown”></div>
 <!– javascript code–>
 <!–
   <script>
   add javascript code
   </script>
 –>
</body>
</html>

The following codes are the CSS codes used to design the 30 Minutes Countdown Timer. I have used very little code here to design. You copy the entire CSS code and add it to your CSS file(style.css).

 /* Design the home pahe */  
  body {
  padding: 20px;
  text-align: center;
  margin: 100px auto;
  }
  /* Count box design */
  div {
  border: 5px solid #004853;
  display:inline;
  padding: 5px;
  color: #004853;
  font-family: Verdana, sans-serif, Arial;
  font-size: 90px;
  font-weight: bold;
  text-decoration: none;
}

Now is the time to make it work. Below is the required JavaScript for this. I have given the necessary information along with which codes have been used. Hopefully, that information will help you to understand the following JavaScript.

//Required html element for countdown clock
function countdown( elementName, minutes, seconds )
{
    var element, endTime, hours, mins, msLeft, time;
    function twoDigits( n )
   
    {return (n <= 9 ? “0” + n : n);}
//A constant of the id function of the countdown element
    element = document.getElementById( elementName );
//The countdown time has been calculated.
//Total time of countdown, added at the end of all  
    endTime = (+new Date) + 1000 * (60*minutes + seconds) + 500;
    updateTimer();
    function updateTimer()
    {
        msLeft = endTime – (+new Date);
//What happens when the countdown time ends
//1000 ms = 1s
        if ( msLeft < 1000 ) {
            element.innerHTML = “Time is up!”;
        }
//What will happen before the countdown ends
        else {
            time = new Date( msLeft );
            hours = time.getUTCHours();
            mins = time.getUTCMinutes();
//Determines how time can be viewed in a webpage
//innerHTML helps to display an element in a webpage
            element.innerHTML = (hours ? hours + ‘:’ + twoDigits( mins ) : mins) + ‘:’ + twoDigits( time.getUTCSeconds() );
            setTimeout( updateTimer, time.getUTCMilliseconds() + 500 );
        }
    }
}
//It has been decided how long the countdown will last
// Time format: Hours, Minutes, seconds
//For a 30 minute countdown: 0, 30, 0
countdown( “ten-countdown”, 30, 0 );

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.