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 using Tailwind CSS and MomentJS

@wicaksana94

Desktop design screenshot for the Age calculator app coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


Any feedback are welcome.

Community feedback

@oroszlanolo

Posted

Hi, congratulations on completing your challenge!

I have some suggestions for you: First of all, I recommend structuring your code to different files. Now the index.html contains everything, but ideally, you would want to have a separate css and a js file. I can see, that the layout could be improved still. I have some suggestions for you:

  • Add a max-width to your instead of using different margins at different screen sizes. You could simply set a margin of like 2rem, and add a max-width of like 800px. This is a simple solution, and will work even on some ultrawide monitors.
  • I can see, that you are using font-weights, but they seem to differ from the design (your result text is way too thin) I think you should look into that.
  • Use bigger btn on big screen sizes. I like how you have set up a grid for the main layout

I hope some of this was helpful. Have a nice day! :)

Marked as helpful

2

@wicaksana94

Posted

Hello Bálint Balázsi,

Thank you for your feedback. By the way I don't have ultrawide monitors, but your simple solution was helpful I'll update later :)

Have a nice day too :)

0
Andrew 130

@FeelsGo-od

Posted

Hi Arya!

The calculator works like it should. But you can practice your css skills more by installing "pixel perfect" plugin on google chrome and making your layout look based on the design, so it will look like just the version on photoshop(or figma...).

Tell me what do you think about my solution as well man. Thank you for posting yours!

Marked as helpful

1

@wicaksana94

Posted

Hi Andrew,

The pixel perfect plugin is new for me, I think it will help me better to design the layouts. Thank you, Andrew!

1

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