Pomodoro Clock

Pomodoro Clock JS Codes

var currentTimer = "sess";
var hrs = 0;
var mins = 0;
var secs = 0;
var hours = document.getElementById("hours");
var minutes = document.getElementById("minutes");
var seconds = document.getElementById("seconds");
var running = false;
var counter;
var heightCounter;
var totalSecs;
var decreasePercent;
var bgHeight = 100;
var audio = new Audio('https://www.acoustica.com/sounds/user_requests/alarm1.wav');
var count = 0;

document.body.onkeyup = function(e){
    if(e.keyCode == 32){
        timerSwitch();
    }
}

function setTimer(time) {
  console.log("time is", time);
  if(time >= 60) {
    hrs = Math.floor(time/60);
    mins = time % 60;
    hours.innerHTML = hrs + ":";
  } else {
    mins = time;
  }
  secs = 0;
  minutes.innerHTML = ("0" + mins).slice(-2);
  seconds.innerHTML = "";
  console.log("set hours:", hrs);
  console.log("set mins:", mins);
  console.log("set secs:", secs);
}

function addTime(elem) {
  if(running === false) {
    var time = document.getElementById(elem).innerHTML;
    time++;
    document.getElementById(elem).innerHTML = time;
    if(elem === 'session-time') {
      setTimer(time); 
    }
  }
}

function subtractTime(elem) {
  var time = document.getElementById(elem).innerHTML;
  if(time > 1) {
    if(running === false) {
      time--;
      document.getElementById(elem).innerHTML = time;
      if(elem === 'session-time') {
        setTimer(time); 
      }
    }
  }
}

function setBackground() {
  totalMiliSecs = mins*60;
  decreasePercent = ((1/totalMiliSecs)*100)/4;
  bgHeight = 100;
  console.log("decease:", decreasePercent);
  if(currentTimer === "sess") {
    document.getElementById('body1').style.backgroundColor = '#CC5C14';
    document.getElementById('color-back').style.backgroundColor = '#3AB22B';
  } else {
    document.getElementById('body1').style.backgroundColor = '#3AB22B';
    document.getElementById('color-back').style.backgroundColor = '#CC5C14'; 
  }
}

function countDown() {
  console.log(hrs);
  console.log(mins);
  console.log(secs);
  console.log("paercent", bgHeight);
  if(hrs <= 0 && mins <= 0 && secs <= 0) {
    audio.play();
    if(currentTimer === "sess") {
      setTimer(document.getElementById("break-time").innerHTML);
      currentTimer = "break";
      console.log("mins is:", mins);
    } else {
      setTimer(document.getElementById("session-time").innerHTML);
      currentTimer = "sess";
      console.log("mins is:", mins);
    }
    setBackground();
  }
  running = true;
  if(secs === 0) {
    mins--;
    secs = 60;
  }
  if(hrs > 0) {
    if(mins === 0){
      hrs--;
      mins = 60;
    } 
    hours.innerHTML = hrs + ":";
    minutes.innerHTML = ("0" + mins).slice(-2) + ":";
  } else {
    minutes.innerHTML = mins + ":";
  }
  seconds.innerHTML = ("0" + secs).slice(-2);
  bgHeight -= decreasePercent;
  document.getElementById('color-back').style.height = bgHeight + "%";
  if(count >= 4) {
    secs--;
    count = 0;
  }
  count++;
  console.log(count);
  counter = setTimeout('countDown()', 250);
}

function timerSwitch() {
  if(running === false) {
    running = true;
    console.log("run");
    setBackground();
    countDown();
  } else {
    clearInterval(counter);
    console.log("stop");
    running = false;
  }
}
  
setTimer(document.getElementById("session-time").innerHTML);