• Post category:HTML

Simple Countdown Timer in HTML | New Method

Creating Simple Countdown Timer using HTML:

In the above code, we are creating a Simple countdown timer using HTML, CSS, and JavaScript. We are going to create a countdown timer by decrementing it from 10 minutes.

<html>
<head>
<title>simple countdown timer html</title>
<style type="text/css">
    body{
      margin: 0;   }
   p{
      display: inline-flex;
      font-size: 50px;
      height: 70px;
      width: 200px;
      align-items: center;
      justify-content: center;    }
</style>
</head>

<body>
<p id="countdown"></p>

<script type="text/javascript">
    const startingMinutes =10;
   let time=startingMinutes*60;

   const countdownEl=document.getElementById('countdown');
   setInterval(updateCountdown, 1000);

   function updateCountdown(){
      const minutes=Math.floor(time/60);
      let seconds= time % 60;
      seconds=seconds < 10 ? '0' + seconds : seconds;
      countdownEl.innerHTML=minutes+":"+seconds;
      time--;
   }  
</script>
</body>
</html>

Live Preview:

See the Pen
Countdown timer by Wonderdevelop (@wonderdevelop)
on CodePen.

Output:

simple countdown timer html

In the above code, we have created an <p> element with an ID attribute inside the HTML body section. And also created some JS functions for the countdown. We initialize minutes using constant and time using let in JS. We have created the updateCountdown function in JS for the countdown.

To add a countdown on your website, you can copy and paste it the above code.

Leave a Reply