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 (React, flexbox)

P

@GioKhabu

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


I have created this app with React. It was a nice challenge with its logic and error-handling variety.

Community feedback

Marcos Travagliniā€¢ 4,860

@Blackpachamame

Posted

Greetings! you have done a great job šŸ˜Ž

šŸ“Œ Some suggestions

  • The width: 100vw property is unnecessary, it also generates a horizontal scroll
  • Do not use vw or vh for the width or height of your main. Better use rem, em or px
  • Use min-height and max-width, this will help the content stretch or shrink if you need to. Unlike height and width which can cause your content to be cut off on certain screens
  • You have applied flex-shrink: 1 in your .App. Why? does not apply here
  • The texts above the input should actually be label. To these you must add the for attribute with the same name as the id of the input to which they refer.

Marked as helpful

1

P

@GioKhabu

Posted

@Blackpachamame Many thanks Marcos for such useful hints, I have already made some of the changes.

1

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