Age calculator app solution

Community feedback

• 

  Mcnafaha•240

  @TheMcnafaha

  Posted almost 2 years ago

  Great job @kokenydaniel!!!

  You should be very proud of this app. Your code is easy to follow and your HTML uses different tags to make the user-experience awesome.

  I especially liked how you named your CSS classes. Before I even read further, I already knew what to expect from .date & .dates thanks to your naming scheme.

  I only see two places where you can take this app even further, and I have organized them in order of my perceived importance:

  One, consider using a form over a div and using the event onSubmit over onClick. This could give your app better keyboard behavior because, currently, the "enter key" does not immediately process the data since you have attached it to a "onClick" on the SVG. I have to tab to the SVG and then hit enter for the data to process. It would also give more semantic meaning to the component and button.

  Two, give a min-width to your main class to avoid overflow. On very small screens, your components suffers from overflow issues. This is caused by your main class being based only on a 80% width. I have attached a set of screenshots demonstrating this issue at very small screens here.

  I am happy to provide you with a PR showing how I would implement solutions for my two recommendations in case you are curious or would find that useful.

  I can't wait to see what other apps you build in the future, so be sure to let me know!

  01