“Pomodoro Clock” count down

1

Hi, I have a problem with Pomodoro Clock Count down. I did my structure and styling. In javascript, when click on “start” button Count Down should begin(line number (88-106). Can someone help me with this code. I tried to grab the innerText of clock element and tried to use setInterval function.

2

I see a few problems.

But first, some console.log statements confirm that your start() and timeUpdate() are starting and updating once a second.

But I think there are some problems in your timeUpdate().

function timeUpdate() {
    var timer = 0;
    timer++
    minute.innerText - timer/60;

    // second.innerText = (minute.innerText - timer) % 60;
    // console.log(minute.innerText);
    // console.log(second.innerText);    
}

First of all, timer is a local variable. It gets created and destroyed every time the function gets called. Every time the function is called, it gets created, set to 0, then destroyed when the function is left. To do it this way, it would need to be global.

You should have a semicolon at the end of timer++. (Probably not a big deal, but just to keep things clean…)

Your statement minute.innerText - timer/60; doesn’t do anything. Did you mean to use and equals sign?

I think you need to check your math on the seconds calculation.

3

I am sorry that I removed the code I wrote before.

function timeUpdate() {
var timer = 0;
timer++;

minute.innerText = Math.floor((minute.innerText- timer)/60); (this part was not working)
// second.innerText = (minute.innerText - timer) % 60;
// console.log(minute.innerText);
// console.log(second.innerText);

}

I got confused here …

4

Well, you still have the problem of your timer variable being local and being reset to zero every iteration.

I also question how you’re approaching the math here. Your minute.innerText starts at 25 but then on the first iteration becomes 0. Then on the second iteration it becomes -1. I think the minute.innerText shouldn’t be holding the data. I would suggest setting timer to a the total time in seconds and then count down to 0. Then the remaining minutes and seconds can be gotten from that.

5

Hi,
Thanks for your feedback. I made a few changes. But, still now able to fix it.

6

Again, you need to rethink the math. If you aren’t going to use my suggestion of using timer as a countdown, then I think you need to store the total time in a variable somewhere.

But I think the countdown timer is easier. When you hit start, assign timer = minutes*60; (using the appropriate selector to get minutes)

I would try something like this:

function start() {
    timer = sessionLength.innerText*60;
    setInterval(timeUpdate,1000);
}

function timeUpdate() {
    timer--;
    minute.innerText = Math.floor(timer/60);
    second.innerText = timer%60;   
}

It’s not complete (you’ll have to format for single digits) but it gets you on the right track.

Before you were making the mistake of treating your second.innerText and minute.innerText as if there were staying the same and you were changing them at the same time. That and you had some math problems.

This is simpler, clearer and easier to read. Since the timer is meant to count down, why not have the timer count down instead of having it count up and do complex math?

7

Hi,
I did work on the Math & functionality. I still have a problem with switching from break time to session time. After session time …it moves to the break time. But, I am not able to go back to session time from break time(line number 68-87).

can you please, look into this.

8

With just a quick look at this, I wonder where you distinguish between whether it is the session or break time ending? I think I had a boolean variable, something like isSession. I think the logic could go something like:

if (minute.innerText === "00" && second.innerText === "00"){
  // anything that is common to either timer ending
  if (isSession) {
    // do your conversion to break
  } else {
    // do your conversion to session
  }
  isSession = !isSession;  // flip the boolean
}

Hope that helps.

9

Hi,
thanks for your feedback. I just worked on the functionality. Please provide your suggestions and also I still have a problem with “pause” button. When I click pause button, and again clicking on start button …the clock is starting over.

10

Well, you need to find a way to store the remaining time when you pause and then start at that time when you restart.

11

Does this app look good? otherwise.

Thanks for your help and timely responses.

12

Yeah, it seems to work fine. It’s just the pause thing.

The only other thing I’d say is that I’d fix the width of the time display. It adjusts slightly for some of the times.