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

I use Vanilla Js and Css

@TkDevk

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


It was fun to do and i learned a lot

PD: it couldn't show the label tag and input in red color when the value was wrong, i tried several times but i gave up lol, i failed in that one. It works, just check it out ;)

Community feedback

@TkDevk

Posted

I'm looking the screenshot and looks totally different :c, someone knows why?, i have two monitors and looks good in them.

0

@Blackpachamame

Posted

@TkDevk You have the option to generate a new screenshot in the DESIGN COMPARISON part, it should look like a red button that says GENERATE NEW SCREENSHOT.

Marked as helpful

0

@TkDevk

Posted

@Blackpachamame

Thank you so much it worked. Sorry i have a question, for the challenges it is better to use 100vh ? or 100%?, i sue 100vh but for some challenges the output it looks weird.

Thanks in advance for your response : )

0

@Blackpachamame

Posted

@TkDevk Always try to use min-height unless you need a fixed height. What happens if you set a height: 100vh is that if the content of your page exceeds the height of the viewport then you will see it cut off, however, with min-height you can scroll and see the rest of the content.

Regarding which unit to use, it is very relative and the truth is I never delved into the subject because I am very comfortable using min-height: 100vh 😅

In any case, CSS is advancing and new units are appearing that are better for specific cases. I share with you a very good YouTube channel, where they talk a lot about the subject and in a very clear way, maybe you can take a look at it: Kevin Powell /search?query=vh

0

@MelvinAguilar

Posted

@TkDevk Hello, you already received wonderful feedback on this challenge. I just wanted to mention that the screenshots are taken simulating a device with a width of 1440px and a height of 800px. Keep that in mind and try using DevTools to simulate a device of those dimensions, and you'll see that the screenshot is identical.

1

@TkDevk

Posted

@Blackpachamame Thank you 😀

1

@TkDevk

Posted

@MelvinAguilar Wonderful, thanks so much for your help

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