JSFiddle - React, Tailwind, and code Playground

by geekrose Lee

HTML

<div id="countdown" style="background:gray"></div>

JavaScript

// set the date we're counting down to
var target_date = new Date().getTime();
 var delay=10;
// variables for time units
var days, hours, minutes, seconds;

// get tag element
var countdown = document.getElementById("countdown");

// update the tag with id "countdown" every 1 second
setInterval(function () {

    // find the amount of "seconds" between now and target
    var current_date = new Date().getTime();
    var seconds_left = (current_date - target_date) / 1000;
    var a=(delay-seconds_left);
    // do some time calculations


    minutes = parseInt(a / 60);
    seconds = parseInt(a % 60);
    var progress = a/delay*100;
   

    // format countdown string + set tag value
    countdown.innerHTML = '<div style="background:red; width:'+progress+'%">'+minutes + "m: " + seconds + "s" + '</div>';  

    if(seconds_left>delay)
    {setTimeout(action(),10);}
   
}, 1000);
var action=function()
{
close();
}