Age Calculator with Responsive Design and Validation

Community feedback

• 

  Bernardo Poggioni•5,360

  @R3ygoskiPosted 7 months ago

  Hello Rohan, your project looks great and extremely similar to the proposed design, congratulations.

  I would like to point out that there seems to be an issue with the logic of your project, as when I entered the date "14/07/2001", it worked perfectly, but when I changed the "07" to "04", it caused the month to stop appearing. And this also happened when I changed the day to "30".

  I haven't looked at the code yet, but it seems like this is a conditional error, where values similar to the current date are not being applied.

  Edit: I also noticed that in your AgeForm component, you are passing some props with repeated names to the inputs. A suggestion would be to pass only the name="year", for example, instead of also id and label, as they are the same. Then in the Input component, you would use only the name for those parts that are using id and label.

  Edit2: I also noticed that you are using a RegExp that enforces the year to always have 4 digits, but this wasn't necessary. For example, if I enter "0900", it will still work. Perhaps it would be more interesting to remove this requirement from the RegExp. Additionally, if someone wants to calculate the age of a historical figure in the present day, this limitation would be quite restrictive. But it's just a suggestion.

  Apart from that, everything seems to be working very well. My sincere congratulations, your project looks great.

  Marked as helpful

  1

  ---

  

  Rohan Verma•170

  @rohanvronPosted 7 months ago

  @R3ygoski

  Hi Bernardo,

  Thank you so much for the detailed feedback on my age calculator project! I'm thrilled to hear that it looks great and closely resembles the design.

  You're absolutely right about the issue with changing the month causing some issues. I'll definitely investigate and fix the logic behind that.

  I appreciate the suggestion about simplifying the input props in the AgeForm component. That will definitely improve readability.

  Regarding the year validation, removing the 4-digit requirement is a great point. It would allow for more flexibility in calculating historical figures' ages. I'll adjust the regular expression accordingly.

  I'm still new to coding, so your insights are incredibly valuable. Thanks again for taking the time to test my project and provide such constructive feedback. I'll work on these issues.

  Edit: I implemented all your suggestions: logic fix, simplified props, and flexible year validation. Thanks again!

  1
• 

  Abdul Khaliq 🚀•72,560

  @0xabdulkhaliqPosted 7 months ago

  Hello there 👋. Congratulations on successfully completing the challenge! 🎉

  • I have a suggestion regarding your code that I believe will be of great interest to you.

  ---

  MAKING ACCESSIBLE BUTTON :

  • Your solution's button markup is not accessible for the following reasons:

  ---

  • Lack of accessible name: The <button> element does not have any text content or an aria-label attribute that describes its purpose or function. The alt attribute on the <img> element inside the button is not an adequate replacement for an accessible name.

  ---

  • Incorrect use of <img> inside <button>: While it is possible to have an <img> element inside a <button>, the <button> should also have a text label or an aria-label attribute to provide an accessible name for the button.

  ---

  • To make the button accessible, you should either add a text label between the opening and closing <button> tags or add an aria-label attribute to the <button> element that describes its purpose or function.

  ---

  • Here's an example:

  <button aria-label="Click to calculate your age" type="submit" class="btn">
     <img alt="" class="h-6 lg:h-11" src="...">
  </button>
  

  ---

  .

  I hope you find this helpful 😄 Above all, the solution you submitted is great !

  Happy coding!

  0

  ---

  

  Rohan Verma•170

  @rohanvronPosted 7 months ago

  @0xabdulkhalid

  Hi Abdul,

  Thanks so much for pointing out the accessibility issue with the button! I'll definitely add an aria-label to improve usability for everyone.

  Edit: Added aria-label to button for improved accessibility.

  0

  

  Abdul Khaliq 🚀•72,560

  @0xabdulkhaliqPosted 7 months ago

  @rohanvron Glad you found it helpful ! 🤠

  0