Still struggling with the Pomodoro Clock

JavaScript
#1

Tell us what’s happening:
I am continuing to bang my head on the pomodoro clock project, and I need some perspective on my code. The code works well for counting down the session, the bell ringing at the end. The break timer is a bit more fussy. It counts down fine, but the bell doesn’t ring when it hits zero, and then it begins to spit out garbage numbers. The reset button works, but I can’t get the pause button to do its thing.

Any feedback would be greatly appreciated

Your code so far
I have been pushing my code to GitHub. Here is the link to the GitHub Page, and here is the link to the GitHub repo. I have also copied my code to Codepen, but it doesn’t play the sounds like it does on GitHub Pages.
Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.77 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/front-end-libraries/front-end-libraries-projects/build-a-pomodoro-clock

#2

Yes, if you’re banging your head, you’re learning.

One problem: Why isn’t your break stopping?

On line 78 of main.js, you say

const startBreak = setInterval(breakTime, 1000)`

But const has block level scope so when you get to line 98:

          clearInterval(startBreak)

That is in a completely different function so that function has no idea what startBreak is. You either need to pass that variable around the functions, or declare it globally. I chose the latter and if I put let startBreak; at the top of your code and get rid of the const on line 78, that works.

If I have more time I’ll look at the other issues.

#3

Aha! Thanks @kevinSmith, you solved the riddle of the wonky break time.

#4

It’s possible I’m wrong, but I think that in lines 47-48 of your js it is redundant to call $("#start_stop").on(“click”, function() {
pause()
}) because you’re already inside of a .on(“click”, function(){ which starts at line 34. You do it again at 53 before you call resume().

Everything that should happen on click should be inside just one .on(“click”, function{. Right now it looks like you’re telling the server to wait for a second click.

#5

I got you @Ahimsaka. I’ll try re-writing the code accordingly.

#6

I think if you just put

pause()

in the location where the redundant on(‘click’ calls are, it might fix it. Most of this code is really neat and sensible. You must have spent a lot of time with the jQuery docs because I never would have been able to write this from the FCC lessons. I used React myself, because that’s what the sample project used haha.

#7

I’ll try that @Ahimsaka. I’m working on it just now.

I did a separate Udemy course on jQuery, so I do feel a bit more comfortable with it. React is still largely a mystery for me, though I did use it to create one of my other projects.

#8

React is mysterious at first. And then Redux adds another layer of mystery. But they are very powerful and seem to have a very bright future.

#9

I looked at your code real fast you use several intervals, it’s gonna bring mayhem. You should define one window object interval :

codeSpoiler

window.pomodoroInterval = setInterval(() => {tick()}, 1000)

so you can call window.clearInterval anywhere to stop/pause/clear the interval.

That will simplify the pause logic greatly and hopefully make the whole app a lot more comfortable to build.

Once the interval is set, the rest is just display logic.

#10

Thanks @oristar2018. I’ll implement your suggestion just now.

#11

@pulamusic I think that jQuery was a better choice than React for this project. React didn’t make much sense to me when I got to this one either, but I did it anyway because the sample project made it easy to figure out. Afterward I asked a friend who works as a programmer and he told me that none of the projects in this unit appear to be practical use cases for React.

From what he said, React would be more appropriate if you wanted to be able to reuse the same pomodoro clock as a component in multiple pages/applications, and make it so that the clocks at every location are synced. Building this project in react wasn’t too hard but I think was a lot of unnecessary code.

#12

I can’t imagine why React would be a bad choice for this app. I’m not sure what React would have to do with syncing the clocks - that sounds more like a job for sockets. Is your friend a React developer?

#14

You certainly don’t need React for an app this simple, but then you don’t need jQuery either. The reusable component aspect of React doesn’t make it any easier to put the code in another app, I don’t think - you could cut and paste in any library’s code, especially if it’s broken up, using something like webpack. The main thing about reusable components is that you can reuse and custumize them throughout the app. We can’t really see it here, but on larger apps, it can be amazing.

As to syncing, I’m not sure how React or Redux would help with that. That sounds like a job for sockets through a server.

#16

But the redux in one app would be completely unconnected with the redux in a different app. Even if they are running the same app, they are running in different browsers on different computers using different memory. They have nothing to do with each other. Redux only helps them manage state on their app. They still need to talk to each other. Sockets through a server are the natural answer. That could tell the apps when to start or stop. Now within each app, they could use Redux to handle or dispatch those socket events, but that is not a necessary part of the communication, which is all about the server and the sockets. I guess techically you could use Redux on the server, but that would be a little odd and does not enable any special comminication because the clients are also running Redux. Redux does not have any built in functionality to allow the different clients to communicate. There is probably a library for it … that uses a server and sockets. I think you’re getting your tools confused.

As to the timing issue, it’s not going to be perfect down to the microsecond, but if you want everone’s timers synced, then you can get pretty close, probably close than they can tell the differenc. As to events out of order, you can improve that with time codes and/or some type of throttling. But it still is the internet and there are limits to hoe fast information can move. The internet can’t handle that kind of timing precision across multiple arbitrary distances across the globe - it wasn’t built for that.

#18

Got it. Thank you for the explanation!

I’m going to remove my half of this tangent from the thread now in case the OP still needs help & to keep the thread relevant to the topic for future Pomodoro Clock strugglers who find it.

#19

I wouldn’t have removed it. If this had gone on much longer I might have split it into its own thread. But I’m not a fan of removing. But no biggie.

#20

I’m the original poster, and I don’t mind the convo. Feel free to leave all your comments as they are.