Skip to content
Submitted 7 months ago

Accessible and Responsive Age Calculator App Using Flexbox

Alberto Raúl José•610
@alberto-rj
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Age calculator app
  • HTML
  • CSS
  • JS
2junior

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

I got a perfect score, using Lighthouse:

  • Performance: 100
  • Accessibility: 100
  • Best Practices: 100
  • SEO: 100
What challenges did you encounter, and how did you overcome them?

Initially I didn't know how to implement the calculation of age in days, months and years, through programming. So, I tried to figure out more about it and found the tool, College Vidya Tool - Age calculator app, which helped me understand how to do this in a simple way.

What specific areas of your project would you like help with?

Even though I had a perfect score with Lighthouse, I still believe that there is always something that can be improved in my solution.

So if you have any suggestions on how I can improve it, please let me know because learning from others is always a pleasure for me.

Community feedback

  • Matthew Sperry•190
    @sperrowPosted 7 months ago

    Looks and works great. Some small ideas for improvement:

    • Use type="number" for your inputs so the user can't enter non-numerical characters
    • Handle error checking and messaging on user input rather than on submit
    • Only use let when a variable will be reassigned: https://medium.com/dailyjs/use-const-and-make-your-javascript-code-better-aac4f3786ca1
    Marked as helpful
    1
    Alberto Raúl José•610
    @alberto-rjPosted 7 months ago

    @sperrow,

    Thanks for your feedback! Don't worry, I understand you :)

    • I used <input type="text"> instead of <input type="number"> because I validated the form data using regular expression.

    • I used the keyword var instead of let in the variable declarations, because I solved this challenge with the aim of practicing ES5, not ES6.

    • But, "Handle error checking and messaging on user input rather than on submit", I really should implement this. Thank you very much, @sperrow!

    0

Please log in to post a comment

Log in with GitHub

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