JSFiddle - React, Tailwind, and code Playground

by IPWright83

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<div class="input-group mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text" id="basic-addon1">Team Size</span>
  </div>
  <input id="teamSize" type="number" class="form-control" step="1">
  <button id="start" type="button" class="btn btn-primary">Start</button>
</div>
<div class="jumbotron">
  <h1 id="report" class="display-4">0</h1>
  <p class="lead">This is how much man time that has been lost.</p>
</div>

JavaScript

function start() {
   var teamSize = parseInt(document.getElementById("teamSize").value);
   var report = document.getElementById("report");
   var totalTime = 0;
   
   var tick = function() {
      totalTime += teamSize;
      
      var time = new Date(null);
      time.setSeconds(totalTime);
      report.textContent = time.toISOString().substr(11, 8);
   };
   
   setInterval(tick, 1000);
}

document.getElementById("start")
        .addEventListener("click", start);