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

#accessibility#sass/scss
kubas33• 180

@kubas33

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


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

Community feedback

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