Chain the two pomodoro timers

Hey,

So I’m bit stuck, the idea is to have one timer replace the other one back and forth. I only manage to have the break replace the session one time and from then on the timer gets reseted only for the break.

I’;m not really sure how to chain the two together.

Any suggestions would be awesome.

here is my .js code:

function modSessionTime( val ) {
  var s   = document.getElementById('session-length').innerHTML
  var int = parseInt(s, 10) + val

  if (int < 0) {
    int = 0 
  }
  document.getElementById('session-length').innerHTML = int
  document.getElementById('time-here').innerHTML = int
  return int
}

// -------------------------------------------------------------------------
function modBreakTime( val ) {
  var t   = document.getElementById('break-length').innerHTML
  var int = parseInt(t, 10) + val
  
  if (int < 0  ) {
    int = 0
  }
  document.getElementById('break-length').innerHTML = int
  return int
}

// -------------------------------------------------------------------------
function startTimer(duration, display) {
    var timer   = duration, minutes, seconds
    var clock   = setInterval(function () {
        minutes = parseInt(timer / 60, 10);
        seconds = parseInt(timer % 60, 10);

        minutes = minutes < 10 ? "0" + minutes : minutes
        seconds = seconds < 10 ? "0" + seconds : seconds
// Assing text content as a property for display
        display.textContent = minutes + ":" + seconds
// This section moves the clock downward if the timer is above 0
        if (--timer < 0) {
            timer = duration
        }
// This section stop the interval (timer) when the clock reaches 0
// Useful for swtching between timers (only switches once!!!): 
      
       if (timer == 0) {
        clearInterval(clock)        
        var duration = (document.getElementById('break-length').innerHTML)*60
        startTimer(duration, display)
        clearInterval(clock) 
        }
      
        function stop () {
          clearInterval(clock) 
        }
      
        document.getElementById('stop').onclick = function() {
          stop()
          document.getElementById('time-here').innerHTML = document.getElementById('session-length').innerHTML
          // console.log(typeof document.getElementById('time-here').innerHTML)
        }
      
    }, 1000)
}

// -------------------------------------------------------------------------
function start () {
  var duration = (document.getElementById('time-here').innerHTML)*60
  var display  = document.querySelector('#time-here')
  startTimer(duration, display)
}

document.getElementById('start').onclick = function() {
  start()
}

// -------------------------------------------------------------------------
// Button functionality using modSessionTIme BreakSessionTime
document.getElementById('session-plus').onclick = function() {
  var val = 1
  modSessionTime(val)
}
document.getElementById('session-minus').onclick = function() {
  var val = -1
  modSessionTime(val)
}
document.getElementById('break-plus').onclick = function() {
  var val = 1
  modBreakTime(val)
}
document.getElementById('break-minus').onclick = function() {
  var val = -1
  modBreakTime(val)
}

I apologize the pomodoro is ugly at this point

Pomodoro