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 with Vanilla CSS and JavaScript

Paks 1,350

@LifeofPaks

Desktop design screenshot for the Age calculator app coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Community feedback

@joshua-gibson

Posted

Hi there, styling looks great! I think there is work to do on your calculation though. putting in today's date one year ago returns 1 year, 0 months, and 4 days. Entering 2 years ago yesterday returns 2 years, 0 months, -1 day. So a bit of work to do there. I'd also have a look in the design section for the mobile-design.jpg file, I don't think that's looking as intended. Apart from that its really nice!

Marked as helpful

0

Paks 1,350

@LifeofPaks

Posted

Thanks for the feedback. Really appreciate @joshua-gibson

0
Paks 1,350

@LifeofPaks

Posted

Check and see i worked on it again @joshua-gibson

1

@joshua-gibson

Posted

Hey, good work, you definitely fixed those issues. Mobile styling looks good, and the calculation is much more accurate.

I had a play and found a couple of additional issues - the 30th of February is an allowed date on your calculator, which it shouldnt be. Additionally when errors are generated such as when a date is put in the future an error message is created correctly, but the button is still functional, allowing an incorrect calculation to be generated.

Javascript can be too permissive when it comes to creating dates, so when you try to create a date of the 30th of feb for example, it just adds any extra days to the beginning of the next month, so you get the 2nd of March. Therefore a good way to capture all these instances is to create a function that takes year,month, and day as variables, creates a new date object from them, then extracts year / month / date from the new date object and compares them to the original. If they are equal, the date that was entered was valid.

Marked as helpful

0
Paks 1,350

@LifeofPaks

Posted

Thanks for the feedback. I'm still very new to JS so i can only do so much. I'm working hard to grasp more of JS thanks a lot. You're appreciated @joshua-gibson

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