Review my Pomodoro code please

Review my Pomodoro code please
0

#1

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);

}