Not Found
Not Found
Not Found
Not Found
Not Found
Request path contains unescaped characters
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Pomodoro Timer created with the Vanilla JS framework

#sass/scss
Kevin Mason• 280

@mrfinesse47

Desktop design screenshot for the Pomodoro app coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
4advanced
View challenge

Design comparison


SolutionDesign

Solution retrospective


I found that having a non-monospaced font for a timer where the text is changing constantly is very difficult to keep steady in place. If I had to ever make a timer again i'd use a mono-spaced font. Any ways how do you guys like it?

Community feedback

P
Matt Studdert• 13,611

@mattstuddert

Posted

Excellent work on this project, Kevin! It looks great and works well!

My main piece of feedback would be to avoid adding event listeners to non-interactive elements. For example, you're using li elements to switch timers and an img element to open the settings modal.

Whenever you expect a user to interact with an element, you should use an interactive element (e.g. a' or button`). This will allow people who can't/don't use a mouse or trackpad to use your app.

As the timer switchers and the settings trigger don't navigate to new pages, I'd recommend using button elements to trigger the actions.

It's always a good habit to try navigating anything you build while only using your keyboard to see if you can still use the app. If not, it needs refactoring to make it more accessible.

I hope this helps. Keep up the great work!

Marked as helpful

1

Kevin Mason• 280

@mrfinesse47

Posted

@mattstuddert Thanks for that, I will keep it in mind for the next project, and test projects with the keyboard + accessibility developer tools from now on.

1
Vincent Yan• 210

@envincebal

Posted

Very well done! Everything works as it should and the app looks great on all screen sizes. The changes in the settings all work seamlessly. My only suggestion may be a personal preference. But I'd consider making the clock not count down immediately until you click on the clock. To me is just a usability thing. Other than that, great work!

1

Kevin Mason• 280

@mrfinesse47

Posted

@envincebal yes, the first thing I noticed checking out other solutions was a "start" button, i do not know why i didnt think of that lol. It wasnt in the design docs but it is pretty much common sense looking at it now.

1
Vincent Yan• 210

@envincebal

Posted

@mrfinesse47 Yeah no worries! We're all here to help each other get better. You're doing great!

1
Kevin Mason• 280

@mrfinesse47

Posted

@envincebal ok i got a start button working.

1
Vincent Yan• 210

@envincebal

Posted

@mrfinesse47 Awesome! Great work, it works perfectly.

1

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord