25 + 5 Clock Project

I have finished the 25 +5 clock project.

It was a difficult project to work on. I have used react-spring for animation it is working good locally. But I am not implementing it on codepen.

Please feel free to criticize my project and let me know how to improve my coding practice/project.

Codepen Link
Github Repo
Live Demo

The styling is very nice. This is one of the more creative ones I’ve seen. Code is organized. I think you have a good grasp on things. I’m going to throw out a few things to challenge you :slight_smile:

  • First, instead of giving us a stripped down version on codepen I think you should either use github pages or put it on one of the many free hosting servers so everyone can easily see the real finished product. All of the comments below pertain to your project on github.
  • While technically you are using buttons for all of the interactive features you have disabled the focus indicator (outline: none) on all of them and thus you can’t really use this with a keyboard. Add those back in. There are methods that allow them to only be seen if someone is using a keyboard and thus they won’t ruin your design for mouse users. Google ‘:focus-visible’ or ‘what-input’.
  • Speaking of buttons, they all need actual text associated with them for people who use screen readers. The easiest way to do this is to add the text inside the <button> and visually hide it. Google ‘visually-hidden’ if you don’t know how to do this.
  • In wide view, as I increase the text size the interface starts to fall apart just a little. Primarily the buttons at the top start to drift and the content in the display boxes starts to get cut-off. I think the way to fix these issues is to use responsive units instead of px for positioning and height/width. By the way, I’m talking about ‘text only’ zoom, not page zoom. If you don’t know how to do text only zoom then google ‘text only zoom [your browser]’. Firefox is probably the best/easiest browser to test this in.
  • In narrow view even the smallest amount of text increase makes the interface start to fall apart. Granted, in a narrow view sometimes you’ll have to accept that increased text sizes will cause problems because there just isn’t enough room. But one solution would be to change the shape of the clock to a rectangle in narrow view so it could grow vertically. And if you use em units for your break point then you could also have this type of responsiveness at wider view ports where the user has their text size turned up a lot.
  • With your skill level I was actually a little disappointed that you weren’t using a web worker for the timer :slight_smile: It’s a slight bit of a challenge getting create-react-app set up to use them, but I was able to do it for my drum machine. For apps that need exact timing (such as a sequencer on a drum machine, or a stop watch) you don’t want to leave the timing up to the whims of setInterval running in the main thread.

Great job.

Thank you very much for your comment and suggestions. I will definitely work on that suggestions. :+1: