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
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Pomodoro app using react and tailwind-css

P

@Omar-Elmassry

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


what do you think of my timer implementation with web workers? and how can you improve it?

Community feedback

P

@Deeperr0

Posted

Firstly good job for completing the task. All I can suggest is that you remove the outline from the input field in the settings when changing the times I see you have tried doing that but for some reason it didnt work for me, so you can use outline:none instead

<input class="w-1/2 bg-transparent text-sm font-bold outline-none focus-visible:outline-1" id="pomodoro" type="number" name="pomodoro">

Otherwise great work!
0

P

@Omar-Elmassry

Posted

Hello Yousef @Deeperr0 ,

Thank you for taking the time to review my implementation and for your feedback! I appreciate it.

Regarding the input outline: the outline is only visible in the focus-visible state due to the combination of outline-none focus-visible:outline-1. This is intentional to enhance accessibility and support for keyboard-only navigation. The app is fully operable using just the keyboard, and this feature is meant to ensure that keyboard users can easily identify focused elements.

Thanks again for your feedback!

0

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