Cacher is the code snippet organizer for pro developers

body {
  margin: 30px;
  padding: 5px 8px;
  background: #002040;
  text-align: center;
}
p {
  display: inline-block;  
}
h1 {
  color: white;
  font-family: 'Pacifico', cursive;
  font-size: 80px;
  font-weight: lighter;
  margin: 0;
}
#output {
  width: 100px;
  height: 30px;
  background-color: #ccc;
  font-size: 24px;
  text-align: center;
}

// adjust var time for testing 
var time = 25;
var cTime = (time * 60)
var running = 0;

function startPause() {
  if (running == 0) {
    running = 1;
    increment();
    document.getElementById("startPause").innerHTML = "Pause";
  } else {
    running = 0;
    document.getElementById("startPause").innerHTML = "Resume";
  }
}

function reset() {
  running = 0;

  document.getElementById("startPause").innerHTML = "Start";
  setTimeout(function() {
    time = 25;
    cTime = (time * 60);
    document.getElementById("output").innerHTML = "25:00";
  }, 1000);
}

function increment() {
  if (cTime > 0 && running !== 0) {
    console.log(running);
    setTimeout(function() {
      cTime--;
      var mins = Math.floor(cTime / 60);
      var secs = Math.floor(cTime % 60);

      if (mins < 10) {
        mins = "0" + mins;
      }
      if (secs < 10) {
        secs = "0" + secs;
      }

      document.getElementById("output").innerHTML = mins + ":" + secs;
      increment();
    }, 1000);
  }
  console.log(running);
  if (cTime == 0) {
    var audio = new Audio('http://dptest.nfshost.com/other/bell.mp3');
    audio.play();
  }
}

<link href='https://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>

<h1>Free Pomodoro Camp</h1>
<p id="output">25:00</p>
<div id="controls">
  <button id="startPause" onclick="startPause()">Start</button>
  <button onclick="reset()">Reset</button>
</div>