Suggestion on adding animations and proper way to deal with currencies.
I would love to add animations to the challenge, I'll update it further later on.
I am proud that I used React Hook Form Library
What challenges did you encounter, and how did you overcome them?How to add typescript with react hook form hooks was a bit challenging.
What specific areas of your project would you like help with?None for this project
This solution looks good! I like the attention to detail, responsiveness and using React hook form! I noticed some areas for improvements tho, please see below
Overall looks good! Keep going!
I'm proud of the cart feature which I used Redux to create, this was a pattern I was keen to reimburse myself in, especially the array functionality to clear and update the cart. On the whole the responsiveness is pretty good, some of the tablet resolutions could be better, I have started to look at designing first in mobile then working my way up to the larger resolutions. I will be using Tailwind going forward and for more challenging projects, I want to start using Typescript.
What challenges did you encounter, and how did you overcome them?Some of the resolutions, particularly Tablet had some issues within them but I find using the chrome tools to change the css on the fly then adding this to the code was especially useful. Some of the cart and redux functionality was a challenge at the start, remembering to return the items, once they had been through the array function was especially tough as I would get errors as the cart had been emptied, but I didn't understand why.
What specific areas of your project would you like help with?None at the moment. I'm happy with the overall outcome.
Hi Stuart!
You're solution looks good overall! There are just a couple of things I noticed.
I did something that I should not be proud of, however, it worked.
Hi Egolam! Your challenge results look good! I noticed that you use inline styles along with tailwindcss which is not a good practice. You can extend/override tailwindcss config to add your project's colors, spacing, font sizes, font families, and more!
Hi Geochi,
You can follow this video by Google Chrome Developers about JavaScript accurate timer. I used this in my solution also.
Another suggestion is to actually use an existing pomodoro app to compare how it works, like the pomofocus app
Hope this helps, all the best!
Hi David, your solution looks and works very well!
I like how the code is clean and easy to understand! Great job!
Please see my suggestions below
Doing so will give more accessibility features to your app for example users can tab through those fields and will still be able to increment and decrement just by using their keyboard.
Use radion buttons for the Font and Color fields, also for accessibility. e.g. right now you can't select those through tabbing. See my solution as a reference.
Use the form tag on the settings modal for accessibility e.g. users are not able to submit their changes by pressing the enter key on their keyboard.
Modal accessibility also can be improved e.g. pressing escape key when the modal active should close the modal
Hope this helps, all the best!
Hi Dominic! You've done a good job with this challenge! Looks very good!
To answer some of your questions, please see below
import { ReactComponent as YourSvg } from './your-svg.svg';Hope this helps you! All the best!