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 Challenge with React, TailwindCSS, Typescript

Pixel 30

@Bishal-Tamang

Desktop design screenshot for the Age calculator app coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Community feedback

P

@KrishnaVishwakarma1595

Posted

Hello, @Bishal-Tamang

Great solution and nice design keep it up! I have a few points to mention

  • You can use min="<Any_MINIMUM_VALUE_AS_PER_FIELD>" in your input fields so that the user won't be able to input negative values. Even though on submit it is showing the appropriate message to the user "Must be a valid field". But I think it would be better to keep this use case in mind.

  • The design is responsive, however on the mobile screen, <=425px the main container overflows to the body so you can try to fix that.

Hope these points are valuable for you. Keep mentoring!! :)

Marked as helpful

1

Pixel 30

@Bishal-Tamang

Posted

@KrishnaVishwakarma1595 thank you so much for your feedback. I didn't notice the overflowing issue on smaller screen since I was using mobile simulator extension on Chrome. Also about your first point do u mean I have to adjust my input fields such that the user cannot enter any -ve numbers or should I add another error message saying the -ve numbers are not valid as well? Thank u again for having a look at my small project and providing your feedback.. :)

1
P

@KrishnaVishwakarma1595

Posted

@Bishal-Tamang Good to know you found it helpful. Always there to help. For the first point I meant, right now let's say you enter any value to day field. As it is a number field we can increase/decrease the numbers through the keyboard's arrow up/down keys. So, keep pressing the arrow down and after zero it goes to negative numbers. So, it would be great if you provided min attribute as I said. So the user won't be able to go to negative values even if they do with the keyboard's arrow down key and do the same with the month and year field too. Hope you'll get the points.

Min/Max attribute

0

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