Skip to content
Submitted 9 months ago

Age calculator app Solution

Alok Suman•2,380
@Alokray007
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

🛸 Hello Front-End Mentor Community! I'm Alok and this is my solution 😊

🛠️ Built with:

HTML 🧾 Tailwind 👾 React 🤖 BEM Notation 🅱️ Mobile first workflow approach 📲 This project was a good challenge in many aspects. Each input needed date validation and I didn't know how to do some of them, so I had to learn them while doing it. Although Javascript has been a bit more challenging on these last few projects.

An excellent challenge to practice many different skills at once! 😊

Thanks to the Front-End Mentor team that create challenges that make us learn a lot from doing them. 💟

If you have any suggestions on how I can improve this project, feel free to leave me a comment!

Feedback welcome 😊

Community feedback

  • Petrit Nuredini•2,860
    @petritnurediniPosted 9 months ago

    This project needs a lot of fixes.

    • Missed background colour
    • Missed inputs label color
    • Input validation ( you can write text if you want )
    • No components used for React ( you should use more components and not only App.jsx file)
    • This project is not responsive for mobile devices!. (Checked for iPhone 12 Pro and newer)

    Overall you should recheck this project, but you are in the right way!

    0
  • Daniel 🛸•44,310
    @danielmrz-devPosted 9 months ago

    @Alokray007

    My guy just copied my solution text and didn't even bother to change a single word except for the name and React 😅

    0
  • Grace•31,270
    @grace-snowPosted 9 months ago

    This needs some markup changes to be accessible

    1. Use a fieldset and visually-hidden legend to wrap the 3 inputs
    2. The fields should be programmatically linked to the error wrappers. Give the paragraphs wrapping the errors a unique ID and an aria-live attribute. Then give the input an aria-desciribedby its error wrappers ID.
    3. Give the page a visually-hidden h1 and the result section a visually hidden h2.
    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