JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<div id="timer"></div>

<div id="progress"><div id="prog"></div></div>
<div id="progress2"><div id="prog2"></div></div>

<input type="number" id="user" value="2">

<input type="button" onclick="count();" value="GO">

<div id="test"></div>

CSS

#progress {
  width: 200px;
  height: 20px;
  border: 2px solid #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  border-radius: 2px;
  position: relative;
  margin: 8px 0;
}
#prog {
  width: 200px;
  height: 20px;
  background-color: #3c9;
  position: absolute;
  left: 0;
  top: 0;
}

#progress2 {
  width: 200px;
  height: 20px;
  border: 2px solid #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  border-radius: 2px;
  position: relative;
  margin: 8px 0;
}
#prog2 {
  width: 0px;
  height: 20px;
  background-color: #3c9;
  position: absolute;
  left: 0;
  top: 0;
}

JavaScript

var timeoutHandle;
function countdown(minutes) {

    var seconds = 60;
    var mins = minutes
    function tick() {
        var counter = document.getElementById("timer");
        var current_minutes = mins-1
        seconds--;
        counter.innerHTML =
        current_minutes.toString() + ":" + (seconds < 10 ? "0" : "") + String(seconds);
        if( seconds > 0 ) {
            timeoutHandle=setTimeout(tick, 1000);
        } else {

            if(mins > 1){

               // countdown(mins-1);   never reach “00″ issue solved:Contributed by Victor Streithorst
               setTimeout(function () { countdown(mins - 1); }, 1000);

            }
        }
        

    }
    tick();
    

}

function count() {

var tot = document.getElementById("user").value;

countdown(tot);

var convert = 200;
var convert2 = 0;

var prog = document.getElementById('prog');
var prog2 = document.getElementById('prog2');

prog.style.width = convert + 'px';
prog2.style.width = convert2 + 'px';



setInterval(function() {
  
var progress = document.getElementById('timer').innerHTML;

var newarray = progress.split(":");
var mi = (newarray[0]); //mins
var se = (newarray[1]); //secs

var se2 = +se;

var minsum = (mi * 60);
var elapsed = (minsum + se2); //how many secs

var usersum = (tot * 60); // convert mins to secs
var usersum2 = (usersum / 200); //1.2
convert = (elapsed / usersum2).toFixed(2);
convert2 = (prog2 + usersum2).toFixed(0);

prog.style.width = convert + 'px';
prog2.style.width = convert2 + 'px';
  
  
}, 200);




}