Age Calculator App with React

Links

• Solution URL: Frontend Mentor
• Live Site URL: Netlify

My process

With this project, I had a beginner level knowledge of how to handle forms in React applications. I especially tried not to use a library (like formik or react-hook-form) because libraries slow down your learning curve and squeeze you into a narrow space. The new FormData(); structure I came across while trying to create this project is quite useful. Although I didn't use it in this project, it looks like I can use it in my future projects.

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• Mobile-first workflow
• React - JS library
• Vite - Frontend Tooling

What I learned

I learnt React's useEffect() hook to create the counter animation that appears on the screen after the age calculation. I also learnt in this project that all the properties of an object in an array like {...input} can be passed to a component as a prop.

Continued development

Even though I think I have successfully designed and coded this small application, I still don't know how to handle forms with React. I have already left the form validation features unfinished in the project and I will come back to it in the future when I learn more. I need to learn how to handle and validate forms with React better in the future and this is a really complex problem with no single answer.

Useful resources

• Lama Dev React Forms Tutorial - It is a nice and clean explanation of how you can handle forms with React without using a library, but it is insufficient in complex scenarios. Still, it gave me a good perspective.
• ChatGPT - I used an AI for the first time in this project and it's really incredible. It's like pair programming with a senior. I ask him questions at every point I have in mind and I can have him explain the parts I don't understand over and over again, and he handles simple tasks for me. AI is definitely something that increases productivity and we can't escape from it, mate.

Author

• Frontend Mentor - @VeliCanAydin
• LinkedIn - @Veli Can Aydın