Submitted about 1 year ago

React.js + TypeScript + SCSS + BEM Age Calculator

Better5afe• 850

@better5afe

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Age calculator app

HTML
CSS
JS

2junior

View challenge

Design comparison

SolutionDesign

Solution retrospective

Hi All,

Hope you are well.

This project was a nice practice for working with the Date object. Overall, it was quite easy to make.

To sum everything up:

Users are able to view their age in years, months and days after submitting a valid birth date.
Users will receive an appropriate error on form submission if: a) One or more inputs are empty. b) The day number is not between 1 and 31. c) The month number is not between 1-12. d) The year is in the future or before 1900. e) The date is invalid, e.g. 30/02/2023.
View the optimal layout for different screen sizes.
See hover and focus states for all interactive UI elements.
See animated age numbers on form submission.

This project was built with:

React.js
TypeScript
SCSS
BEM
RWD
Mobile-first workflow
Animation libraries

As always, I'll be grateful for any feedback.

Thanks & Happy Coding! 🎃👻

Community feedback

solitary_coder• 1,000

@kabir-afk

Posted about 1 year ago

Nice project brdr🥂, altho you missed an edge case where user enters a valid date of the same year ,but of future, for example on entering 29-09-2023, it shows 10 days , which I don't think should be the case . . .but otherwise , great one . . noice animations!! 🏎️🏎️

Marked as helpful

Better5afe• 850

@better5afe

Posted about 1 year ago

@kabir-afk Good catch bro, thanks! I haven't thought about this case. App's fixed, thanks once again!

Please log in to post a comment

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