Skip to content
Submitted over 1 year ago

Fully Functional and Accurate - Mobile and Desktop Design.

vcgmuse•70
@vcgmuse
A solution to the Age calculator app challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Take a look, try to break it. Please let me know if you do or if you notice something that would make it better.

Code

Please log in to post a comment

Log in

Community feedback

  • Narciso Lobo•20
    @narcisolobo

    Excellent job, my friend! Would love to see the card centered vertically as well as horizontally -- the solution provided by Daniel above will work well.

    Would also love to see a hover state on the button, as Mudassar suggests.

    To make the solution more accessible, please use a label instead of a paragraph for the form elements. The label should have a for attribute that matches the id attribute of the input it's paired with.

    Also, your alt attribute is empty for the button. I suggest filling that in with "Calculate Age" or something to that effect. That will also help with accessibility.

    Marked as helpful
  • P
    Daniel 🛸•44,810
    @danielmrz-dev

    Hello @vcgmuse!

    Your project looks great!

    I see that you already got help here, but there's something that is yet to cover:

    I noticed that you used margin to place the card in the middle of the page. That's not the best way and depending on the screen size, your card won't be centered. So here's a very efficient way to center the card:

    • You can apply this to the body (in order to work properly, you can't use position or margins):
    body {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

    I hope it helps!

    Other than that, you did an excellent job!

    Marked as helpful
  • Mudassar Majeed•160
    @mudasarmajeed5

    Yes, your solution is perfect, the logic building is perfect, but I would suggest giving specific width and height of the card for PC and laptop users because on my browser it's taking full width and the card looks a bit un-natural. You can Improve it further i.e. setting width and height to 600px and 400px, further you can add cursor:pointer; when we hover over the SVG, and you can set the opacity of the SVG to 70%, when we hover it should be set to 100% using CSS with a smooth transition to give it a feel of a button.

    Marked as helpful

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