Progress Updater

Live Progress Updater

by f1sherman

HTML

<form>
  <span>
    <label for="timer">Seconds:</label>
    <input id="timer" type="number" />
  </span>
  <input type="submit" value="start" id="start_button" />
</form>

<div class="outer" id="outer">
  <div class="inner" id="inner">
  
  </div>
</div>

CSS

.outer {
  margin-top: 2em;
  height: 5em;
  border: 2px solid black;
  position: relative;
  margin-left: auto;
  margin-right: auto;
}

.inner {
  width: 0%;
  height: 100%;
  background-color: red;
}

JavaScript

var totalSeconds, startDate, endDate, progressUpdater, progressUpdaterId;

progressUpdater = function() {
	var elapsedSeconds = parseInt((new Date().getTime() - startDate.getTime()) / 1000);
  var remainingSeconds = totalSeconds - elapsedSeconds;
  if (remainingSeconds < 0) {
  	remainingSeconds = 0;
  }
  var percentDone = parseInt((elapsedSeconds / totalSeconds) * 100);
  console.log('elapsedSeconds:', elapsedSeconds);
  console.log('remainingSeconds:', remainingSeconds);
  console.log('percentDone:', percentDone);
  document.getElementById('inner').style.width = percentDone + '%';
  document.getElementById("timer").value = remainingSeconds;
  
  if (remainingSeconds === 0) {
  	console.log('stopping updater');
  	clearInterval(progressUpdaterId);
  }
};

document.getElementById("start_button").addEventListener("click", function(e) {
  e.preventDefault();
  
  totalSeconds = document.getElementById("timer").value;
  startDate = new Date();
  endDate = new Date(startDate.getTime() + (totalSeconds * 1000));
  
  console.log('startDate:', startDate);
  console.log('endDate:', endDate);
  
  progressUpdaterId = setInterval(progressUpdater, 500);
});