Age Calculator Challenge with React, TailwindCSS, Typescript

Community feedback

• 

  P

  Krishna Vishwakarma•1,390

  @KrishnaVishwakarma1595Posted about 1 year ago

  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-TamangPosted about 1 year ago

  @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

  Krishna Vishwakarma•1,390

  @KrishnaVishwakarma1595Posted about 1 year ago

  @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