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!
Hi Mohamed! 👋
Looking good with your work here! Keep it up!
One suggestion is to add the border initially in the buttons instead on hover so the cards will still be the same height.
You can also improve your implementation by changing the cards text length and check if the cards still align with each other and if the button always remain in the bottom.
A quick giveaway is to use flex direction of column and margin top auto! Good luck and have fun!
Hi Lilee! 👋
You're making good progress! Keep going!
It is a better practice to write mobile first CSS and use min-width media queries for tablet and desktop. This means that styles are applied first to mobile devices, where most of the visitors will come. There are other more advantages in writing mobile first CSS which you can read further here
You can checkout my take on this challenge which uses mobile first approach as your guide!
Also check your HTML and accessibility issues, can keep it in mind in your next project!
Hope this helps!
Great work byron! Checking your work I learned that button default type is "submit"! Keep it up!
I like that your javascript code is readable! My suggestion is to follow the guidelines here https://github.com/ryanmcdermott/clean-code-javascript.
I noticed that some parts of your js code have a chain of else if statements which is not ideal. You can read more here on why - https://dev.to/dglsparsons/write-better-code-and-be-a-better-programmer-by-never-using-else-statements-4dbl
Also, it is ideal to ditch jquery in today's standard as modern javascript can pretty much handle all that you need. You can check some alternatives here - https://youmightnotneedjquery.com/
If you want to make your JavaScript knowledge better I recommend this course https://learnjavascript.online/
I hope this are all helpful! happy coding!
Hi @Minard-NG, you might want to consider always including a CSS reset in your stylesheet. This will keep your styles consistent on all browsers. You don't have to worry about the user agent styles that browsers add to the page.
Great work @dinahbrito! You might want to consider checking out BEM for naming CSS classes. Also, you might want to check on larger screens.
Good work Aleksandra! I suggest fixing your accessibility issues and HTML issues. It is pretty easy to fix and it's always good to follow these standards.
You can start by improving your CSS. If you don't have access to the design files, you can use this extension (https://www.welldonecode.com/perfectpixel/) to help achieve close to design results.
