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 app solution

@kokenydaniel

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

Mcnafaha 240

@TheMcnafaha

Posted

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!

0

@kokenydaniel

Posted

Thank you @TheMcnafaha!!!

Thanks for the comments, which I will improve!

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