Display time remaining (Pomodoro challenge)

Display time remaining (Pomodoro challenge)
0

#1

Hey, so I’m building my pomodoro clock, and I know I’m going to use the setTimeout function, but I’m trying to figure out how to display the actual time ticking down? I found this example here of someone providing a possible answer, but, it’s still not clear to me how he’s displaying the time remaining. Could someone break down the first examples code and let me know what’s going on here so I might use it myself? Thanks.


#2

I will give it a shot for you.

var seconds_left = 10; //The number of seconds to count down from

var interval = setInterval(function() {
    document.getElementById('timer_div').innerHTML = --seconds_left;
  // (--seconds_left) is the same thing as: (seconds_left= seconds_left-1;)
 //document.getElementById('timer_div').innerHTML means grab the "timer_div" and set the innerHtml to..

    if (seconds_left <= 0)
   //This statement just checks if the timer has run down to 0 and changes the text and stops the timer.
    {
        document.getElementById('timer_div').innerHTML = 'You are ready';
        clearInterval(interval);
    }
}, 1000)

Hope that helps, let me know if there is anything else you don’t understand :slight_smile:


#3

Interesting, so he’s just using the document… to display the variable, which he has decremented. Doesnt that sort of defeat the purpose of the setInterval?


#4

No. setInterval calls the passed function at certain time intervals. So whats happening is that he is updating the document and the variable once a second. So without setInterval the code would only run once when loaded and then would never change.


#5

Oh, so it’s like a loop, and he keeps it by being infinite with the seconds_left var, and his limiter for the setInterval is 1 second (1000 mil sec). The code loops every 1 second, and takes away 1 sec from the var which he displays. That is super neat, thanks for the explanations