Skip to content
  • Learning paths
  • Challenges
  • Solutions
  • Articles
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted almost 3 years ago

Pomodoro Timer created with the Vanilla JS framework

sass/scss
Kevin Mason•280
@mrfinesse47
A solution to the Pomodoro app challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

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?

Code
Select a file

Please log in to post a comment

Log in with GitHub

Community feedback

  • Matt Studdert•13,611
    @mattstuddert
    Posted almost 3 years ago

    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
  • Vincent Yan•210
    @envincebal
    Posted almost 3 years ago

    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!

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
Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Frontend Mentor for Teams

Frontend Mentor for Teams helps companies and schools onboard and train developers through project-based learning. Our industry-standard projects give developers hands-on experience tackling real coding problems, helping them master their craft.

If you work in a company or are a student in a coding school, feel free to share Frontend Mentor for Teams with your manager or instructor, as they may use it to help with your coding education.

Learn more

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub