Hello campers,
I’ve finished pomodoro clock and would appreciate some constructive feedback.
Not too many variables? Too many global vars? Unnecessary lines? Bad structure…?
Here’s app: https://adamgithub92.github.io/pomodoro/
var setSessionMin = 25;
var setBreakMin = 5;
var t;
var runTime = false;
var session = true;
var audio1 = new Audio('sms-alert-2-daniel_simon.mp3');
var audio2 = new Audio('sms-alert-5-daniel_simon.mp3');
//display default values of session and break time
$("#session").html(setSessionMin);
$("#break").html(setBreakMin);
//add and subtract buttons
$("#sessionAdd").on("click", function() {
reset(60, 100);
setSessionMin += 1;
$("#session").html(setSessionMin);
if (setSessionMin<10) {
$(".time").html("0" + setSessionMin + ":00");
} else $(".time").html(setSessionMin + ":00");
});
$("#sessionSub").on("click", function() {
reset(60, 100);
if (setSessionMin>1) {
setSessionMin -= 1;
$("#session").html(setSessionMin);
if (setSessionMin<10) {
$(".time").html("0" + setSessionMin + ":00");
} else $(".time").html(setSessionMin + ":00");
}
});
$("#breakAdd").on("click", function() {
setBreakMin += 1;
$("#break").html(setBreakMin);
});
$("#breakSub").on("click", function() {
if (setBreakMin>1) {
setBreakMin -= 1;
$("#break").html(setBreakMin);
}
});
$(".time").html(setSessionMin + ":00");
//timer function
function timer(sec){
runTime = true;
var curMin = setSessionMin - 1;
var totalSec = setSessionMin * 60;
var width = 100;
//timer loop
t = window.setInterval(function() {
//color the progress bar
width -= 100/totalSec;
$(".myBar").css("width", width + "%");
//decrement values properly
sec-=1;
if (sec < 0) {
sec = 59;
curMin-=1;
}
//start of next break
if (session === true) {
if (curMin<0) {
curMin=setBreakMin - 1;
session = false;
audio1.play();
$(".heading").html("BREAK");
$(".heading").hide().fadeIn(2000);
$(".myBar").css("background", "#31b0d5");
totalSec = 60 * setBreakMin;
width = 100 - 100/totalSec;
$(".myBar").css("width", width + "%");
}
}
//start of next session
else if (curMin<0) {
curMin=setSessionMin - 1;
session = true;
audio2.play();
$(".heading").html("SESSION");
$(".heading").hide().fadeIn(2000);
$(".myBar").css("background", "#4caf50");
totalSec = 60 * setSessionMin;
width = 100 - 100/totalSec;
$(".myBar").css("width", width + "%");
}
//proper time format display
if (curMin<10 & sec<10) {
$(".time").html("0" + curMin + ":0" + sec);
}
else if (sec<10) {
$(".time").html(curMin + ":0" + sec);
}
else if (curMin<10) {
$(".time").html("0" + curMin + ":" + sec);
}
else {
$(".time").html(curMin + ":" + sec);
}
},1000);
}
//pause and restart clock after clicking on time
function startPause() {
if (runTime === true) {
clearInterval(t);
runTime = false;
} else {
timer(60);
}
}
//reset clock after incrementing session time
function reset(sec, width) {
clearInterval(t);
runTime = false;
session = true;
$(".myBar").css("width", width + "%");
$(".myBar").css("background-color", "#4caf50");
$(".heading").html("SESSION");
}
function setSite() {
$(".heading").addClass("animated bounceInLeft");
$(".flex-container").addClass("animated rotateInDownRight");
$(".progressBar").hide().fadeIn(1000);
}