<body>
<div class="row">
<div class="col-xl-12 text-center">
<h2>POMODORO TIMER </h2><span>by Alex</span>
<h1><div id="time">25:00</div></h1>
</div>
<div class="col-xl-12 text-center">
<button class="btn btn-primary">Start</button>
<button class="btn btn-primary" id="b">Reset</button>
</div>
</div>
<br>
<br>
<div class="col-xl-12 text-center">
<button class="btn btn-success" id="a">up</button>
<div id="s">25</div>
<button class="btn btn-danger" id="d">down</button>
</div>
<br>
<div class="col-xs-12">
<div class="col-xs-2"></div>
<div class="col-xs-8">
<div class="progress">
<div class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 100%">
<span class="sr-only">40% Complete (success)</span>
</div>
</div>
</div>
<div class="col-xs-4"></div>
</div>
</div>
<br>
<body>
var fiveMinutes = document.getElementById("s").innerHTML;
var flag = 0;
var seconds;
document.getElementById("a").onclick = function() {
document.getElementById("s").innerHTML =
parseInt(document.getElementById("s").innerHTML) + 1;
$("#time").html(time($("#s").html()));
};
document.getElementById("d").onclick = function() {
document.getElementById("s").innerHTML =
parseInt(document.getElementById("s").innerHTML) - 1;
$("#time").html(time($("#s").html()));
var t = document.getElementById("s").innerHTML;
if (t < 2) {
document.getElementById("s").innerHTML = 1;
$("#time").html(time($("#s").html()));
}
};
function startTimer(duration, display) {
clearInterval(int);
var start = Date.now(),
diff,
minutes;
duration = duration * 60;
flag = 1;
function timer() {
///////////////////////////////////
var car = duration - diff;
var v = car / duration * 100;
$("#v").html(Math.round(v));
var tim = Math.round(v) + 2;
$(".progress-bar").css("width", 100 - tim + "%");
$("#b").click(function() {
document.getElementById("a").disabled = false;
document.getElementById("d").disabled = false;
$(".progress-bar").css("width", 100 + "%");
$("#time").html(time($("#s").html()));
clearInterval(int);
flag = 0;
});
///////////////////////////////////
$("#time").click(function() {
flag = 0;
clearInterval(int);
startTimer(fiveMinutes, display);
});
diff = duration - (((Date.now() - start) / 1000) | 0);
// does the same job as parseInt truncates the float
minutes = (diff / 60) | 0;
seconds = (diff % 60) | 0;
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.textContent = minutes + ":" + seconds;
if (diff <= 0) {
clearInterval(int);
fiveMinutes = document.getElementById("s").innerHTML;
flag = 0;
}
}
// we don't want to wait a full second before the timer starts
var t = document.getElementById("s").innerHTML;
if (t != 0) {
timer();
var int = setInterval(timer, 1000);
}
}
document.getElementsByClassName("btn")[0].onclick = function() {
fiveMinutes = document.getElementById("s").innerHTML;
document.getElementById("a").disabled = true;
document.getElementById("d").disabled = true;
var display = document.querySelector("#time");
if (flag == 0) {
document.getElementById("s").innerHTML;
}
if (flag == 0) {
startTimer(fiveMinutes, display);
}
};
function time(main_counter) {
main_counter = main_counter * 60;
var seconds = main_counter % 60;
var minutes = Math.floor(main_counter / 60);
if (seconds < 10) {
seconds = "0" + seconds;
}
if (minutes < 10) {
minutes = "0" + minutes;
}
return minutes + ":" + seconds;
}
