Stuck on 25 + 5 Clock test #24 & 25

JavaScript
1

I’ve been working on this clock for most of the week (can’t believe it’s been so tough)!

A link to the full code is available in the codepen I’ve been working on here:

I’ve gotten the project to pass all test but two, but on a surface level look it appears as though the timer is functioning correctly. The error is:

Timer has reached zero but didn't switch back to Session time.

Yet if I run my clock it ticks down, switches to a break, and then switches back to the session length. I’m not sure what the issue is here. I’m curious why “Session” is capitalized.

I’m wondering if I have some sort of issue with these two variables:

sessionTime 
breakTime

They get called in the timer() function a handful of ways, and I think maybe that’s part of the problem with the test? But I’m a little lost.

Full code included in a block here –

//below is code for session and break length modification
let breakTime = 5;
let sessionTime = 25;

let min = sessionTime;
let sec = "00";

document.getElementById("break-length").innerText = breakTime;
document.getElementById("session-length").innerText = sessionTime;

//////////////////////////////////////

//functions for incremenet/decerement buttons

function breakDecrement() {
  if(breakTime > 1){
    breakTime--;
    document.getElementById("break-length").innerText = breakTime;
  }
}

function breakIncrement() {
  if(breakTime < 60){
    breakTime++;
    document.getElementById("break-length").innerText = breakTime;
  }
}

function sessionDecrement() {
  if(sessionTime > 1){
    sessionTime--;
    document.getElementById("session-length").innerText = sessionTime;
    document.getElementById('time-left').textContent = sessionTime + ":" + sec;
  }
}

function sessionIncrement() {
  if(sessionTime < 60){
    sessionTime++;
    document.getElementById("session-length").innerText = sessionTime;
    document.getElementById('time-left').textContent = sessionTime + ":" + sec;
  }
}

//////////////////////////////////////////////////////

let intervalID;
let onABreak = false;
//function for starting a timer
function timer() {
    if(onABreak == false){
    //ticks down timer
      if(sec > 0){
        sec--;
      } else if (sec == 0 && sessionTime == 0) {
      //when this starts working we'll figure out how to flip this to a break clock
        document.getElementById('time-left').textContent = "Break Time!";
        document.getElementById('beep').play();
        onABreak = true;
        sessionTime = document.getElementById("break-length").innerText;
        console.log("onABreak =" + onABreak);
      } else if (sec == 0) {
        sessionTime--;
        sec = 59;
      }
    } else if(onABreak == true){
      
      //ticks down timer
      if(sec > 0){
        sec--;
      } else if (sec == 0 && sessionTime == 0) {
        document.getElementById('time-left').textContent = "Session Time!";
        document.getElementById('beep').play();
        onABreak = false;
        sessionTime = document.getElementById("session-length").innerText;
        console.log("onABreak = " + onABreak)
      } else if (sec == 0) {
        sessionTime--;
        sec = 59;
      }
    } 
  
    //mm:ss format (started running into an error with the interval returning extra 0s)
    sessionTime = sessionTime < 10  ? sessionTime.toString().padStart(2, '0') : sessionTime;
    sec = sec < 10 ? sec.toString().padStart(2, '0') : sec;
    
    //updates display
    document.getElementById('time-left').textContent = sessionTime + ":" + sec; 
}
////////////////////////////////////

////////////////////////////////////

// starts and stops timer, and updates button. contains primary interval call
function start(){
  if(document.getElementById('start_stop').textContent == 'Start') {
      intervalID = setInterval(timer, [1000]); 
      document.getElementById('start_stop').textContent =  "Stop";
   } else if (document.getElementById('start_stop').textContent == 'Stop') {
      document.getElementById('start_stop').textContent = "Start";
      clearInterval(intervalID);
      intervalID = null;
   }
}


///////////////////////////////////////////

//resets timer to default
function reset(){
  clearInterval(intervalID);
  intervalID = null;
  
  breakTime = 5;
  sessionTime = 25;
  
  document.getElementById('beep').pause();
  document.getElementById('beep').currentTime = 0;
  
  sec = "00";
  min = sessionTime;
  
  document.getElementById('start_stop').textContent = "Start";
  document.getElementById("break-length").innerText = breakTime;
  document.getElementById("session-length").innerText = sessionTime;
  document.getElementById('time-left').textContent = min + ":" + sec;
}

///////////////////////////////////////////
2

User Story #7: I can see an element with a corresponding id="timer-label" , that contains a string indicating a session is initialized (e.g. “Session”).

The #timer-label content is supposed to switch between the string “Session” and “Break” depending on which one is currently running.

3

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.