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

@AmitKumar-001

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


I'm eagerly waiting for your suggestions and feedback so that I can improve it more.

Community feedback

Daniel 🛸 44,230

@danielmrz-dev

Posted

Hello @AmitKumar-001!

Your project looks great!

  • I noticed that your card is not in the middle of the page. Here are two very efficient ways to place elements in the middle of the page:

You can apply this to the body:

body {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

In order to work properly, you can't use margins if you choose this method above.

Or you can apply this to the element you wanna center:

.element {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
}

And, you can change the background-color to #F0F0F0. It'll make your project look even closer to the original design.

Other than those little details, you did a great job!

Marked as helpful

1

@AmitKumar-001

Posted

Thank you @danielmrz-dev, for your suggestions and feedback. I'm learning from it. I've updated the code and resubmitted it.

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