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 (animated counter)

@jazteng2

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


calculation may be wrong. No validation added.

Updated:

  • fixed the setinterval (clearInterval wasn't working)
  • center element and changed background

Community feedback

Lemnsa 110

@Lemnsa

Posted

Hello there @jazteng2, Good job there 👍

Let's start with Placing the Age calculator Card at the center of the page. To achieve that with CSS: 1.Set the body min-height to 100vh. 2.Justify-content: center to center it in the x-axis or horizontally, and vertically by align-items: center.

Let's also change the background to match the design. TIP: I use PHOTOSHOP color-picker tool, to pick the hexadecimal code of the color from the design.

From, there you can paste it in your background-color: tag.

I wish it should be of help to you :). Happy coding 🦾

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