Not Found
Request path contains unescaped characters
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
Not Found
Not Found
Not Found

Submitted

Pomodoro App using Vite, React, SCSS, and custom React Hooks.

@chris-nowicki

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


This is my first time writing a project in TypeScript and SCSS. I definitely had to do some research on TypeScript for React including seeing how others might have used TypeScript with this project... I LEARNED SO MUCH!

With SCSS ... I am loving writing my CSS this way with nesting and mixins for the media queries.

One thing that bugs me is the Input buttons on the Time Settings. On Safari (in MacOS/iPhone) they show up different. I need to look into fixing this.

Any feedback/comments appreciated! It's how we learn, right? :)

Community feedback

@JulianKoehler

Posted

Hey, great job, this project wasn't easy. But I have found 2 bugs with which I also struggled: I am able to enter negative timers and if applied the app crashed completely and I am only able to use it again if I clear my localStorage from the console. I guess an average user would not be capable of that. And the second thing is that I can change the phase while the timer is running. I have implemented a Modal asking the user if he really wants to skip this phase and then resetting the timer and clearing the Interval. Check out my solution if you like to.

Marked as helpful

0

@chris-nowicki

Posted

@JulianKoehler Thanks for the feed back Julian. Ooh I didn't even think about putting constraints on the times for negative inputs. Great idea for changing the phase! Another feature I was thinking about adding in was the ability for a user to choose how many pomodoro rounds before going to long break and having the phases automatically switch.

1

@JulianKoehler

Posted

@chris-nowicki Very welcome! Yes I also thought about adding an automated version that just goes through a certain cycle pattern but not sure yet how to implement it without clashing with the ability of the user to change the phases as he wants.

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