Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Age Calculator App Main with ReactJs and Vite

Ricky 460

@rickyxyz

Desktop design screenshot for the Age calculator app coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


Implementing a modular form validation without additional react library was challenging. Implementing the animation was also challenging.

I need to learn more form validation and animation techniques.

Community feedback

@Hermodesign

Posted

Try to solve the issue of leap years on the calendar, and the recommendation is to fix the font. I like your solution.

1

Ricky 460

@rickyxyz

Posted

@Hermodesign

Thank you for your comment.

About the leap year, the calculation method I used a simplified method where a year has 365.25 days and a month have 30.44 days, then divide the time difference by those values to get the year, month, and days difference. While, I'm pretty sure the result is not 100% accurate, I think it's good enough estimate for now. I'll look into 100% accurate calculation in the future (if you have some helpful resource regarding this calculation please share).

About the font, could you give me the detail on what needs fixing? Like, is it the size, padding, or weight? I'm not quite sure which part to fix.

0

@Hermodesign

Posted

@rickyxyz You can reduce the font size in the fields, and also reduce the space between dashes. Also, I noticed that the height of the main frame should be higher.

0

Please log in to post a comment

Log in with GitHub
Discord logo

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