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 [Semantic HTML, Vanilla JS]

dia ♡ 200

@diaasaur

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


Phew... that was not as simple as it looked like 😮‍💨

What made this app a lil tricky for me:

  • form validation being interdependent for some errors
  • finding out the difference between two dates in days, months and years - not as easy as it seems, you need to be mindful of leap years, day light savings etc for a more precise calculation (now I understand why there are many popular libraries for managing dates 😩)

Bonus: Added a nice little counter animation for years, months and days ✨

Let me know below if you find any errors✌🏻

It's been a long time since my last frontendmentor challenge, with this hope I stay more consistent :3

Community feedback

KiddAlexx 150

@KiddAlexx

Posted

This looks great! Love the counter animation.I did notice that there is some error in the calculation. If I put in my date of birth it says I am exactly one year older than I am (which seems to be the case for most dates). However the date of birth 07 July 1983, which should give 39 years 8 months 30 days gives 39 years 15 months and 2 days....I am sorry that I cannot see exactly where this is going wrong, I hope that its not too tough to find the error....

Marked as helpful

1

dia ♡ 200

@diaasaur

Posted

@KiddAlexx hi alexx, you are right! I messed up my logic a little bit T-T @at33v noticed it too. I made a few changes and it should be working fine rn 🤞🏻

0

Account Deleted

Congratulations on completing the challenge! Well done!

I have attached a screenshot of the issue for your reference.

Marked as helpful

1

dia ♡ 200

@diaasaur

Posted

@at33v thanks for catching it!!! used day.js to make sure no more diff errors :D

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