Zipline: Build a Pomodoro Clock
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>