Refocus timer

by Brock Callahan

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<div id="timer">
  <i class="fa fa-clock-o" id="clock"></i>
  <span id="min">15</span>:<span id="extraZero"></span><span id="sec">00</span>
</div>

JavaScript

var running = false;
var timer;

document.getElementById('clock').onclick = function () {
  
  
  // variables to track the minutes and seconds
  var min = 15;
  var sec = 59;
  
  // write the initial values
  document.getElementById('min').innerText = min;
  document.getElementById('sec').innerText = sec;
  
  // remove the extra zero value if present
  document.getElementById('extraZero').innerText = '';
  
  // start the timer if it is not already running
  if (!running) {
    
    	timer = setInterval(function () {
      running = true;
      
      if (min < 0) {
        clearInterval(timer);
        running = false;
        min = 15;
        sec = 00;
        document.getElementById('min').innerText = min;
        document.getElementById('extraZero').innerText = 0;
        document.getElementById('sec').innerText = sec;
        return;
      }
      
      if (sec < 1) {
        sec = 60;
        --min;
        if (min != -1) {
        	document.getElementById('min').innerHTML = min;  
        }
        document.getElementById('extraZero').innerHTML = "";
      } else if (sec < 11) {
        document.getElementById('extraZero').innerHTML = 0;
      } 

      --sec;
      if (min != -1) {
       		document.getElementById('sec').innerHTML = sec; 
      }

    }, 1000); // end setInterval

  } else {
    min = 15;
    sec = 00;
    document.getElementById('min').innerText = min;
    document.getElementById('extraZero').innerHTML = 0;
    document.getElementById('sec').innerText = sec;
    clearInterval(timer);
    running = false;
  }

} // close onclick function