Pomodoro Clock - I'd love some comments

Pomodoro Clock - I'd love some comments
0

#1

I’d be really grateful for some comments about my code, styling, strategy, or anything else about this project. It’s built with React and I pushed everything into CodeSandebox.

Check it out here --> https://codesandbox.io/s/0qzywnom7v

Thanks!


#2

When the timer reads 00:00, that means the next timer should start and at the same time, the sound should play. If I set both the Session and Break times to 01:00 each, the Session does not switch to Break and the sound does not play until 00:00 turns to 01:00, and then you never display 00:59 of the Break. I expect to see:

00:02
00:01
00:00
00:59
00:58

but yours shows:

00:02
00:01
00:00
01:00
00:58


#3

Thanks for catching that! I’ll work on it.


#4

Alright, I’ve got it now. The buzzer goes at 00:00, but I still have it change the label (Session to Break) when the time changes, which makes more sense to me since the new session/break should start with its full time and not 00:00.

Also, from what the User Stories say it should go:

00:02
00:01
00:00
01:00
00:59

And it does that now.
What do you think?


#5

What you are missing is that 00:00 is 01:00 of the next timer, so by actually adding 01:00 after the 00:00, you are adding an extra second to either Session if you do not change the timer text and play the sound until 01:00 appears or you are adding an extra second to Break if you change the timer text and play the sound at 00:00

If you set the Session to 01:00 and click smart, one second later is 00:59, two seconds later is 00:58 and so on… 60 seconds later is 00:00 (where the Break starts, and one second later after the Break starts is 00:59, two seconds after the Break starts is 00:58.

Second # 01:00 Click Start Button which is start of Session
1 00:59
2 00:58
3 00:57
4 00:56
5 00:55
6 00:54
7 00:53
8 00:52
9 00:51
10 00:50
11 00:49
12 00:48
13 00:47
14 00:46
15 00:45
16 00:44
17 00:43
18 00:42
19 00:41
20 00:40
21 00:39
22 00:38
23 00:37
24 00:36
25 00:35
26 00:34
27 00:33
28 00:32
29 00:31
30 00:30
31 00:29
32 00:28
33 00:27
34 00:26
35 00:25
36 00:24
37 00:23
38 00:22
39 00:21
40 00:20
41 00:19
42 00:18
43 00:17
44 00:16
45 00:15
46 00:14
47 00:13
48 00:12
49 00:11
50 00:10
51 00:09
52 00:08
53 00:07
54 00:06
55 00:05
56 00:04
57 00:03
58 00:02
59 00:01
60 00:00 End of Session/Start of Break
1 00:59
2 00:58
3 00:57

#6

Of course you’re right, but in the user stories for this project (if I understand correctly) it says “User Story #23: When a session countdown reaches zero (NOTE: timer MUST reach 00:00), a new break countdown should begin, counting down from the value currently displayed in the id="break-length" element.”

So I have to display 1:00 again. I actually did what you said the first time and it wouldn’t pass the test saying that the minutes display 0 instead of 1.


#7

The example project does the same: https://codepen.io/freeCodeCamp/full/XpKrrW


#8

I never said the user stories or tests would allow you to make a correct Pomodoro Clock. I was just giving you feedback to let you know your Pomodoro clock was displaying oddly.

It is on my To Do list to report this as an issue on Github.


#9

Ah, ok! Yeah, I totally agree then.

There were a few things in the user stories that limited the project actually, for instance, the timer HAS to start at 1, and can’t start at 01. which makes formatting a bit funny.

Thanks again.


#10

Actually, when I read User Story #25, it does not say it must display the time displayed in id=“break-length”. It just says a new break countdown should begin, counting down from the value currently displayed in id=“break-length”. If the Break timer starts at 01:00 which is really when the Session reach 00:00, the next displayed time should be 00:59 which would be correctly counting down from 01:00. But again, it does not state the first time displayed after 00:00 should be 01:00.

  • User Story #25: When a break countdown reaches zero (NOTE: timer MUST reach 00:00), a new session countdown should begin, counting down from the value currently displayed in the id="session-length" element.

#11

Hmm, I guess it could be interpreted that way, but when it says “from the value displayed” it sounds to me like it should start at that number. Either way, when you set it up to start at 00:59 instead of 1:00, it won’t pass the test.

I agree with you that it makes more sense to do it that way, it just won’t pass the test.


#12

So I think the User Story is correct but the test is not. I will read through the test code to see what is actually being tested.