Pomodoro Clock not working properly


I want help on my Pomodoro clock Project. When i decrese or increase session time its shows in sessionbar time but when i start it starts from 25.00minutes (default value).How can i fix this. Is any specific method to update variable. Here is link of codepen https://codepen.io/avi-jkiapt/full/GOmwjO/ .Thanks in advance for help.


You can compute the total seconds before you run the setInterval call that starts the countdown.


Your problem is being caused by your second variables. These are being set when the page loads and are not being updated when you increase/decrease the times.

var totalSecond= activityMin * 60;
var totalBreakSecond = breakMin *60;

Tip for seeing what i mean would be to drop a console log of these variables in you increase/decrease functions and note that they always return 1500


After calling totalSeconds before setInterval it fix the problem but there add another problem. When i pause and then start it starts from start not from where it pauses.


The problem with your clock is a little deeper than that. You are using methods like setInterval, which is influenced by the load the CPU is taking on. A more accurate way of measuring time is to measure time at the time of the start and then update (with new Date()) at certain intervals the date and calculate the time passed. Your method creates discrepancies if the time intervals are very large.

Here is an article on how to do it.


Hmm… The pause button wasn’t on my mind. You could instead compute the total seconds right where you change the length of activity and break time. For example,

breakMin += 1;
totalBreakSecond = breakMin * 60;


Thanks …I have updated that and its works. But One more problem is when session time ends it stops and break time not starts. How to start that break time.


CodePen has a couple of it’s own issues to be aware of:
CodePen sets up the HTML template for you. You can place your header such as tag details in the settings using the gear icon at the top right of the page. You can call your cdn stylesheets such as Bootstrap in the CSS settings, and you can call your jQuery scripts from the JavaScript settings.
This is why your HTML page received this error: You don’t need a DOCTYPE on CodePen. Just put here what you would normally put in the .

I’m not sure how this plays with your code, but you could change $("#ban1").addClass(“hide”); by removing the addClass and just make it $("#ban1").hide( ); . You can do the same thing with $("#ban1").show( );

You may want to consider creating one clock function regarding the minutes/seconds and display. On start it would count down the session (think something like sessionOn = true, breakOn = false). Then when the clock reaches 00:00 you can makes sessionOn = false and breakOn = true. Give a couple of seconds to play the beep and switch to the Break function.

It’s looking good and I can see how hard you are working on it. Keep up the good work.


I know about codepen issues…as i made the project in sublime text 3 so i only copied all and paste into codepen that’s why html showing error but that’s not an issue of my question. I only want that javasrcipt code run properly so that break session can be easily pause. I will use suggestion given by you for $("#ban1").hide(); …btw thanks.


I’m glad you have the CodePen issues under control.

What is avi? and what is blue?

I don’t see blue defined but you are calling it false in the start function before calling setinterval for breakStart.

You might also want to take another look as setTimeout for that call.

I hope this helps a little.


avi is boolean variable which is initally false. When user press start button it becomes true. blue is wrongly used there sorry for that . I have deleted that. Okay i will see setTimeout. Now breaktime starts when session time ends but when i pause break time and then start it not start . I have to fix that .


So glad you’re going in the right direction :slight_smile: