JSFiddle - React, Tailwind, and code Playground

by felixwenzel02

HTML

<html lang="en">
   <body>
     <button type="button" id="start_progressbar">start the progressbar
     </button>
     <button type="button" id="start_timer">start the timer
     </button>
     <div id="progress_bar">
       <div></div>
     </div>
     <div id="countdown_timer"></div>
   </body>

 </html>

CSS

#progress_bar {
  width: 90%;
  height: 23px;
  bottom: 22px;
  left: 50%;
  transform: translate(-50%);
  position: fixed;
  background-color: #0A5F44;
  z-index: 2;
}

#progress_bar div {
  height: 100%;
  text-align: left;
  padding: 0 10px;
  line-height: 23px; /* same as #progressBar height if we want text middle aligned */
  width: 0;
  background-color: #CBEA00;
  box-sizing: border-box;
}

#countdown_timer {
  position: fixed;
  bottom: 14px;
  left: 6%;
  z-index: 3;
  }

JavaScript

//onclick event for progressbar
document.getElementById("start_progressbar").onclick = progress;

//progress bar
    function progress(timeleft, timetotal, $element) {
      var progressBarWidth = (timetotal - timeleft) * ($element.width() / timetotal);
      $element.find('div').animate({
        width: progressBarWidth
      }, timeleft == timetotal ? 0 : 1000, "linear"); //.html(timeleft + " seconds to go"); //comment out -html if no text should appear in the progress bar
      if (timeleft > 0) {
        setTimeout(function() {
          progress(timeleft - 1, timetotal, $element);
        }, 1000);
      }
    }

    progress(5, 5, $('#progress_bar')); // put the desired number of secons here


//onclick event for progressbar
document.getElementById("start_timer").onclick = startTimer;

//countdown timer  
      function startTimer(duration, display) {
      var timer = duration,
        minutes, seconds;
      setInterval(function() {
        minutes = parseInt(timer / 60, 10);
        seconds = parseInt(timer % 60, 10);

        minutes = minutes < 10 ? "0" + minutes : minutes;
        seconds = seconds < 10 ? "0" + seconds : seconds;

        display.text(minutes + ":" + seconds);

        if (--timer < 0) {
          timer = 0; //set to "0" if you want timer to stop, or to same value as time to cycle continously
        }
      }, 1000);
    }

    jQuery(function($) {
      var fiveMinutes = 5 * 1, //put the desired time for the countdown here (format seconds (max60)x multiplier)
        display = $('#countdown_timer');
      startTimer(fiveMinutes, display);
    });