Frontend Mentor – Age calculator app solution
This is a solution to the Age calculator app challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Table of contents
Overview
The challenge
Users should be able to:
- View an age in years, months, and days after submitting a valid date through the form
- Receive validation errors if:
- Any field is empty when the form is submitted
- The day number is not between 1-31
- The month number is not between 1-12
- The year is in the future
- The date is invalid e.g. 31/04/1991 (there are 30 days in April)
- View the optimal layout for the interface depending on their device’s screen size
- See hover and focus states for all interactive elements on the page
- Bonus: See the age numbers animate to their final number when the form is submitted
Links
- Solution URL: Add solution URL here
- Live Site URL: Add live site URL here
My process
My first React App ever
Built with
- Semantic HTML5 markup
- CSS custom properties
- React – JS library
What I learned
My purpose was to get my hands dirty with React, not very difficult with a small and simple application like this one.
Form binding and validation was a bit more complex than I thought, Angular double binding is really handy.
I struggled a bit with spacing (font and padding sizes) maybe my code doesn’t 100% match with mock-ups, and also age calculation was a bit tricky initially.
Continued development
I didn’t came up with a custom solution for the counter animation yet, my next goal is to find an implementation from-scratch without external packages.
Useful resources
- React documentation – Simply the doc
Author
- Linkedin – Simone Marco Fumagalli
- Frontend Mentor – @simonem-f