Just finished it after a lot of time spent getting the tests to pass (I hate promises). I have added a few CSS flourishes to differentiate it from the example. I haven’t implemented responsive design as it is not part of the requirements. I would love some feedback on the design.
One problem I had with the app is of note though: in order to get all the tests to pass I had to have the sound play when you press the play/stop button (something to do with promises that I don’t understand). I edited out line 52 of my Javascript code which set the volume to zero. If you insert that line back in, some tests fail. Does anyone know why?
Sorry I forgot to add that I edited out line 52 of my Javascript code which set the volume to zero. If you insert that line back in, some tests fail. Thanks for the other comments.
Probably because the way it does it’s tests, it doesn’t hear a sound so it thinks you didn’t play it. But, for me all the tests pass even with that line in, are you using Chrome? The tests don’t work well in other browsers, they work mainly just in Chrome.
Yeah I am using Chrome. Sorry for the mistake it is actually line 52 but I think you guessed anyway. That does seem a logical reason as to why it is not working. The test suite is very hard to understand.
@paladinvaan2018 Nice! It looks good visually.
You remove the buttons when the clock is running. Interesting… I did not think of that.
I recommend you to
make it responsive, if it could be used on a phone, it should be resposive.
set the body to background-color: #101010, instead of black. (opinion)
change the break time to color other than the same green you see while the session is running to see a bigger change when it is break time. It will give the viewer a visual notification.
Thanks for the positive remarks @brandon_wallace. I though removing the buttons for changing the lengths was an interesting way to signify to the user that they cannot be changed at the moment.
I actually quite like your suggested color change for the background so I went with it. I’m not sure about changing the color for break time in comparison to session time because the use of the green/red it specifically to signify whether the clock is playing/paused. I don’t know how to preserve that and add that color change with the exception of using the same colors but instead for a session/break color change instead of play/pause. I am open to feedback/suggestions on the matter.
Well, later as a developer you’ll probably use Promises pretty often. You might even use them in one of the FCC projects. Without promises, you can come into something called ‘callback hell’ and your code would be a mess. Here’s a video + article on several ways of executing async code, including using callbacks: Find up-to-date tutorials.
Official Promise docs: Promise - JavaScript | MDN
You can possibly change the break time color to blue or purple.
Another thing I noticed is that the pause button does not look like a pause button. I recommend replacing that with a thick equals sign. That is why I did not see the red color before.
About the promises, I am guessing you are having troubles with them. If you are having troubles with them I suggest focusing on them until you understand them well. They come in quite handy in Javascript.
The pause button was using the stop symbol. It does make more sense as a pause symbol. The problem with using color to differentiate session/break time is not color choice makes sense as the green color currently used when the clock is running signifies that it is playing. If I add another color specifically for signifying the difference between break/session it throws the whole 'green for go, red for stop mentality out the window.
Don’t have much to say, I just like it. The tests take almost half a minute 
to run, but they all passed for me.