Skip to content
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted over 2 years ago

Age calculator app

accessibility, sass/scss
kubas33•180
@kubas33
A solution to the Age calculator app challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

Solution retrospective


My approach to age calculator.

I added age numbers animate to their final number when the form is submitted (with little help from chatGPT :) ). Because of animation I added another container with calculated age from screen readers only, and animated one is hidden for ARIA.

I learned a lot about javascript. It took me a while trying to make calculation script. At first tried to calculate differece in dates in miliseconds ant then converting this do years, months, and days but it didnt work properly.

I also used SASS for the first time.

I used few clamp() functions to provide good responsiveness and was trying to provide good accessability.

Any tips and feedback are welcomed :D

Code
Loading...

Please log in to post a comment

Log in with GitHub

Community feedback

No feedback yet. Be the first to give feedback on kubas33's solution.

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

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner
  • Use cases

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License