Pomodoro Clock - how to refresh page

Back End Help
#1

I’m having a heck of a time getting my “reset” button to refresh the page once the clock is done counting down. My code to refresh the page is on line 57:
$(’#reset’).click(function() {
location.reload(true);
});

It reloads into a blank screen. Can someone point me in the right direction for how to get it to work? It works on other codepen posts I’ve done.

Thanks very much for the help!

#2

When you say done counting down, what is your definition of done? The pomodoro clock should keep running forever until you close the page or add a button to “reset” the clock back to some default settings.

Anyway, if you want your current reset button to reload the page, try using the following to see if it works as you want:

window.location.reload();
#3

Yeah I didn’t explain it well. My reset button is hidden and appears when both clocks hit zero. I want the reset button to refresh the browser.

Unfortunately this didn’t work. Maybe I’m doing it wrong:

$(’#reset’).click(function() {
window.location.reload();
});

#4

I dug a little more and found because of the way Codepen is implemented with iframes, you must use the following to refresh the page.

window.location.href = window.location.href;

Actually, your pomodoro clock should have a way to reset before it gets to the “end” in case you want to change your clock settings. Also, you should not be refreshing the page to start over. Instead, use JavaScript to create an initial “state” for your application. This initial state could include specific default values for session and break times and all timers would be cleared. Refreshing the page is a band-aid and does not harness the dynamic power of JavaScript DOM manipulation. Refreshing the page takes much more time and the user has to wait while it loads. Doing everything with the existing page is much faster and slow internet connections do not affect your applications functionality.

#5

Thanks for the feedback!