Ad

Pomodoro Clock Break Buttons Not Working

- 1 answer

I'm building a Pomodoro Clock to improve my JavaScript, but I have a few issues. For starters, the increment/decrement buttons for the break do not update the time in the display. Secondly, the Session time doesn't restart after the first break period. Can anyone, please, advise me of where I went wrong?

The HTML:

<html>
<head>
  <title>David Hall - Pomodoro Clock Zipline</title>
  <link target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="https://fonts.googleapis.com/css?family=Orbitron" rel="stylesheet" type="text/css" />
  <link rel="stylesheet" target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <link target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="main.css" rel="stylesheet" type="text/css" />
</head>
<body>
  <div class="container">
    <h1 class="center">Pomodoro Clock</h1>
    <div class="row">
      <div class="center">
      <div class="col-sm-6">Break Length</div>
      <div class="col-sm-6">Work Length</div>
      <div class="col-sm-6" id="center">
        <div class="btn-group">
          <button type="button" class="btn btn-success" id="decreaseBreak"><span class="glyphicon glyphicon-menu-left"></span>
            <button type="button" class="btn btn-success"><span id="breakTime">5</span>
              <button type="button" class="btn btn-success btn" id="increaseBreak"><span class="glyphicon glyphicon-menu-right"></span></div>
      </div>
      <div class="col-sm-6">
        <div class="btn-group">
          <button type="button" class="btn btn-success" id="decreaseWork"><span class="glyphicon glyphicon-menu-left"></span>
                <button type="button" class="btn btn-success"><span id="workTime">25:00</span>
              <button type="button" class="btn btn-success btn" id="increaseWork">     <span class="glyphicon glyphicon-menu-right"></span></div>
    </div>
    <br />
    <br />
    <br />
    <br />
    <div class="center">
      <div class="boxed">
        <br />
        <span id="boxText">SESSION</span>
        <br />
        <br />
        <br />
        <span id="display"></span>
        <br />
        <span id="timerStatus"></span>
      </div>
      <br />
      <button type="button" class="btn btn-success btn-sm" id="start">Start</button>
      <button type="button" class="btn btn-success btn-sm" id="pause">Pause</button>
      <button type="button" class="btn btn-success btn-sm" id="reset">Reset</button>
    </div>
  </div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'>    </script>
  <script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script>
  <script src="script.js"></script>
</body>

</html>

And the JavaScript:

var myInterval;
var workTime = document.getElementById("workTime").innerHTML = 25;
var breakTime = document.getElementById("breakTime").innerHTML = 5;
var remainSec = workTime * 60;

document.getElementById("display").innerHTML = workTime;

function startWork() {
  document.getElementById("start").disabled = true;
  timer(callback);
}

function pauseTime() {
  clearInterval(myInterval);
  document.getElementById("start").disabled = false;
}

function displayTime(remainingTime) {
  if (remainingTime % 60 >= 10) {
    document.getElementById('display').innerHTML = Math.floor(remainingTime / 60) + ':' + Math.floor(remainingTime % 60);
  } else {
    document.getElementById('display').innerHTML = Math.floor(remainingTime / 60) + ':' + "0" + Math.floor(remainingTime % 60);
  }
}

function timer(pomodoro) {
  var remainingTime = remainSec;
  myInterval = setTimeout(function() {
    displayTime(remainingTime);
    if (remainingTime >= 0) {
      remainSec--;
      timer(pomodoro);
    } else {
      clearInterval();
      pomodoro();
    }
  }, 1000);
}

var callback = function() {
  console.log('callback');
  document.getElementById('timerStatus').innerHTML = "Take a break!";
  remainSec = breakTime * 60;
  timer(callbackRest)
};

var callbackRest = function() {
  clearInterval(myInterval);
  console.log('callbackRest');
  document.getElementById('timerStatus').innerHTML = "Begin";
  remainSec = workTime * 60;
  document.getElementById("start").disabled = false;
};

function resetTime() {
  clearInterval(myInterval);
  remainSec = workTime * 60;
  startWork();
}

function decreaseWork() {
  if (workTime >= 1) {
    document.getElementById('workTime').innerHTML = --workTime;
    remainSec = workTime * 60;
  }
}

function decreaseBreak() {
  if (breakTime >= 1) {
    document.getElementById('breakTime').innerHTML = --breakTime;
  }
}

function increaseWork() {
  document.getElementById('workTime').innerHTML = ++workTime;
  remainSec = workTime * 60;
}

function increaseBreak() {
  document.getElementById('breakTime').innerHTML = ++breakTime;
}
document.getElementById('start').addEventListener('click', startWork);
document.getElementById('pause').addEventListener('click', pauseTime);
document.getElementById('reset').addEventListener('click', resetTime);
document.getElementById('decreaseWork').addEventListener('click', decreaseWork);
document.getElementById('decreaseBreak').addEventListener('click',  decreaseBreak);
document.getElementById('increaseWork').addEventListener('click', increaseWork);
document.getElementById('increaseBreak').addEventListener('click', increaseBreak);

Any feedback is much appreciated!

Ad

Answer

I just added a few things.

First two flags were added to know if isPomodoroTime status and if isBreakTime status, maybe you ask why two? because I needed a initial state which is when both were false, with those flags I can incremente and display time without confusing, for that there is a new function callled changeTimeAndDisplay that is being called from all increase and decrease methods. I also put a startWork in the callback where suppose to be called when break time finish.

here is a demo - codepen.io

var myInterval;
var workTime = document.getElementById("workTime").innerHTML = 25;
var breakTime = document.getElementById("breakTime").innerHTML = 5;
var remainSec = workTime * 60;
var isPomodoroTime = false; //new
var isBreakTime = false; //new

//new function
function changeTimeAndDisplay(newTime){
  remainSec = newTime * 60;
  displayTime(remainSec);
}

document.getElementById("display").innerHTML = workTime;

function startWork() {
  isPomodoroTime = true; //new
  document.getElementById("start").disabled = true;
  timer(callback);
}

function pauseTime() {
  clearInterval(myInterval);
  document.getElementById("start").disabled = false;
}

function displayTime(remainingTime) {
  if (remainingTime % 60 >= 10) {
    document.getElementById('display').innerHTML = Math.floor(remainingTime / 60) + ':' + Math.floor(remainingTime % 60);
  } else {
    document.getElementById('display').innerHTML = Math.floor(remainingTime / 60) + ':' + "0" + Math.floor(remainingTime % 60);
  }
}

function timer(pomodoro) {
  var remainingTime = remainSec;
  myInterval = setTimeout(function() {
    displayTime(remainingTime);
    if (remainingTime >= 0) {
      remainSec--;
      timer(pomodoro);
    } else {
      clearInterval(myInterval); //new
      pomodoro();
    }
  }, 1000);
}

var callback = function() {
  isPomodoroTime = false; //new
  isBreakTime = true; //new
  console.log('callback');
  document.getElementById('timerStatus').innerHTML = "Take a break!";
  remainSec = breakTime * 60;
  timer(callbackRest)
};

var callbackRest = function() {
   isPomodoroTime = true; //new
  isBreakTime = false; //new 
  clearInterval(myInterval);
  console.log('callbackRest');
  document.getElementById('timerStatus').innerHTML = "Begin";
  remainSec = workTime * 60;
  document.getElementById("start").disabled = false;
  startWork(); //new
};

function resetTime() {
  clearInterval(myInterval);
  remainSec = workTime * 60;
  startWork();
}

function decreaseWork() {
  if (workTime >= 1) {
    document.getElementById('workTime').innerHTML = --workTime;
    if(isPomodoroTime || !isPomodoroTime && !isBreakTime){ //new if block
      changeTimeAndDisplay(workTime);
    }
  }
}

function decreaseBreak() {
  if (breakTime >= 1) {
    document.getElementById('breakTime').innerHTML = --breakTime;
    if(!isPomodoroTime && isBreakTime){ //new if block
      changeTimeAndDisplay(breakTime);
    }
  }
}

function increaseWork() {
  document.getElementById('workTime').innerHTML = ++workTime;
    if(isPomodoroTime || !isPomodoroTime && !isBreakTime){ //new if block
      changeTimeAndDisplay(workTime);
    }
}

function increaseBreak() {
  document.getElementById('breakTime').innerHTML = ++breakTime;
  if(!isPomodoroTime && isBreakTime){ //new if block
      changeTimeAndDisplay(breakTime);
    }
}
document.getElementById('start').addEventListener('click', startWork);
document.getElementById('pause').addEventListener('click', pauseTime);
document.getElementById('reset').addEventListener('click', resetTime);
document.getElementById('decreaseWork').addEventListener('click', decreaseWork);
document.getElementById('decreaseBreak').addEventListener('click',  decreaseBreak);
document.getElementById('increaseWork').addEventListener('click', increaseWork);
document.getElementById('increaseBreak').addEventListener('click', increaseBreak);

As advice you could simplify more your code for example make a function for document.getElementById(id).addEventListener(evnName,func);

function addAction(evnName,id,selector){
   document.getElementById(id).addEventListener(evnName,func);
}

or

function addValue(id,value){
    document.getElementById(id).innerHTML = value;
}

And replace all document.getElementById

regards.

Ad
source: stackoverflow.com
Ad