Age calculator app Solution
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 😊
Please log in to post a comment
Log in with GitHubCommunity feedback
- @petritnuredini
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!
- P@danielmrz-dev
@Alokray007
My guy just copied my solution text and didn't even bother to change a single word except for the name and React 😅
- @grace-snow
This needs some markup changes to be accessible
- Use a fieldset and visually-hidden legend to wrap the 3 inputs
- 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.
- Give the page a visually-hidden h1 and the result section a visually hidden h2.
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