Design comparison
Solution retrospective
I'm proud of the fact that I completed the form validation myself using a mix of the Constraint Validation API and my own custom JavaScript code. It seems I couldn't implement all of the validation requirements using the native API's. e.g. using the attributes of input type number.
Even though I was successful it was cumbersome to implement. I'd like next time to consult the options of form validation libraries that might make this process easier.
What challenges did you encounter, and how did you overcome them?There were a couple. first was the form validation. then the animation of the numbers for that I used the React Animated Numbers library. but since the font used for the challenge has different widths for the number glyphs. there was excessive spacing between some numbers. so I wrote some unconventional code to add some negative margins to the small numbers.
What specific areas of your project would you like help with?As always I'd like to know if my code is understandable, readable and follows best practices.
Thank you for viewing my solution!
Community feedback
- @Mahmoud-ElagamyPosted 6 months ago
There is an error in validation, when i entered today as my birthday(10/6/2000), an error messages appears saying "Must be a valid year."
1@ilyesabPosted 6 months ago@Mahmoud-ElAgamy Thank you for noticing that. yeah I updated my validation because of the html report. and that resulted in me mixing the min and max. I just fixed it you can try now and it should work. just make sure to do a hard refresh.
1
Please log in to post a comment
Log in with GitHubJoin 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