Help needed with pomodoro clock

[Nicknyr]

I’m working on the pomodoro clock and things are coming along alright but I’ve hit a wall. I can get a simple timer going but I’m not getting the results I need. When I console.log my timer variable I can see a timer starting from 0 and updating every second in the developer console but I can’t get the minutes to decrement every 60 seconds or the time to display on the site. Here’s my code:

var workTime = 25.00;
var breakTime = 5.00;
var breaking = false;
var working = true;


$(document).ready(function(){

function getTimeRemaining(endtime){
    var minutes = endtime;
    var seconds = endtime * 60;
    var secondsCounter = 0;

    return {
      'minutes': minutes,
      'seconds': seconds
    };

}

// Initialize the clock
function initializeClock(id, endtime){
  var clock = $('#timeRemaining');
  clock.text(workTime);

  var minutesDiv = $('.minutes');
  var secondsDiv = $('.seconds');

  // Should display the updated time every second
  function updateClock(){

    var t = getTimeRemaining(endtime);

    // These should display the time in the clock, but aren't working
    clock.text = ('0' + t.minutes).slice(-2);
    clock.text = ('0' + t.seconds).slice(-2);

    // Logs out the seconds timer for debugging purposes
    console.log(t.seconds);

    if (t.seconds <= 0) {
      clearInterval(timeInterval);
    }
  }
  updateClock();
  var timeInterval = setInterval(updateClock, 1000);

}

  initializeClock('#timeRemaining', workTime);

if(workTime === 0){
  breaking = true;

  initializeClock('#timeRemaining', breakTime);
}


// Add/subtract time to break
$('#subtractBreakMinute').click(function(){
  if(breakTime > 0) {
    breakTime -= 1;
    $('#breakDisplay').text(breakTime);
  }
})

$('#addBreakMinute').click(function(){
  if(breakTime < 59) {
    breakTime += 1;
    $('#breakDisplay').text(breakTime);
  }
})

// Add/subtract time to workTime
$('#subtractSessionMinute').click(function(){
  if(workTime > 0) {
    workTime -= 1;
    $('#sessionDisplay').text(workTime);
  }
})

$('#addSessionMinute').click(function(){
  if(workTime < 59) {
    workTime += 1;
    $('#sessionDisplay').text(workTime);
  }
})


});

What’s wrong with the overall structure of my program? I don’t want the answer but just some pointers in the right direction. I think my updateClock function isn’t properly calling the getTimeRemainig function or isn’t receiving the right data/objects.

[Nicknyr]

Here’s the result I get in the console when I console.log the seconds variable in the updateClock function. In this example it’s been running for 259 seconds. The 1500 is the starting amount of seconds (25 minutes) and I can’t get it to decrement the way it should.

[garroadran]

Well, for general organizational tips, I would suggest structuring your program so that you don’t have a bunch of function declarations nested one within the other. That can get pretty tricky to debug, and you’re more likely to get into trouble with variable scope.

This would require some pretty significant changes to what you’ve got, but I would consider restructuring it to something more like

$(document).ready(function() {
  // if you want your clock to start as soon as the page loads
  // otherwise, you could set up a mouse click or something to run the initializeClock function
  initializeClock(id, endtime);
}

function initializeClock(id, endtime){
  // do your initial setup, display anything you need to display

  // now start updating the clock every 1 s, and if the time hits zero, stop the timer
  var timeInterval = setInterval(function()
  {
     if(updateClock(id) === 0) { 
       clearInterval(timeInterval); 
       // and now start your clock on break time
     }
  }, 1000);
}

function updateClock(id){
  /////////////////////////////////////////
  // subtract time from the currentTime!!
  /////////////////////////////////////////
  // display on clock
  return timeRemaining;
}

With this kind of organization, I think you might find it a little easier to separate out the various things that your program is doing, and deal with one small task at a time. Incidentally, I threw in a not-so-subtle hint as to what I think you might be missing from your original code… see if you can spot it

[Nicknyr]

Thanks for the pointers. I definitely am guilty of letting my code get a little messy and that in itself becomes an issue and overcomplicates things.

[garroadran]

Let us know if you make any progress and if you need any additional hints!

[Nicknyr]

I’m having an issue wrapping my mind around how my functions are interacting with one another. I think my big issue is passing data/an object from one function to another. I could use another hint.

I made a codepen for this project to make this easier.

Bdgdqp