Not Found
Not Found
Not Found
Not Found
Request path contains unescaped characters
Request path contains unescaped characters
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

Responsive mobile first Age calculator

RobertoMadaβ€’ 220

@RobertoMada

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


Hello, Frontend Mentor community. This is my solution to the Age calculator app. Build with:

  • Semantic HTML5 markup
  • CSS custom properties
  • Flexbox
  • CSS Grid
  • Mobile-first workflow

I had a problem with the date validation. If my input was, for example 31-06-YYYY I got 01-07-YYYY as an output and I could not find a solution to disable this automatic conversion. If you have any solution for my problem or any feedback about my code it will be very appreciated.

Have a nice day!

Community feedback

Tushar Biswasβ€’ 4,080

@itush

Posted

Congratulations on completing the challenge! πŸŽ‰

  • As per your code the date the validation will pass even though the date is invalid.

  • To fix the issue, we should check the maximum number of days for the given month and then checks if inputDate.days is greater than this maximum value.

  • Modify your checkInputs function as follows and it should work even with leap years.

const daysInMonth = (month, year) => {
// Use a Date object to get the last day of the given month
return new Date(year, month, 0).getDate();
};

if(inputDate.days > daysInMonth(inputDate.months, inputDate.years)){
errorDays.innerHTML = "Must be a valid day";
valid = false;
}

  • FYI: I wrote an article on this particular project

  • I remember when I started out, I made countless mistakes and spent long hours searching for solutions. But hey, you don't need to go through the same struggles! πŸ™Œ To help you shorten the learning curve, I recommend going through the following articles. They contain valuable insights that can make your journey smoother:

πŸ“šπŸ” 12 important CSS topics where I discuss about css position, z-index, box-model, flexbox, grid, media queries, mobile-first workflow, best practices etc. in a simple way.

πŸ“šπŸ” 11 important HTML topics

I hope you find these resources helpful in your coding adventures! 🀞

I'm eagerly looking forward to seeing the amazing projects you'll create in the future! πŸš€πŸ’»

Keep up the fantastic work and happy hacking! πŸ’ͺ✨

Marked as helpful

1

RobertoMadaβ€’ 220

@RobertoMada

Posted

@itush thank you very much for taking time to provide a solution to my problem and for the articles. I changed my code how you suggested and it works just fine πŸ‘Œ.

1
Tushar Biswasβ€’ 4,080

@itush

Posted

@RobertoMada You are most welcome!

I'm glad to hear that the solution worked.

Always happy to help ;)

0
Tushar Biswasβ€’ 4,080

@itush

Posted

@RobertoMada

I hope you're doing well and building cool stuffs πŸš€πŸ’»

Today I was wondering, if you could spare a moment to give my GitHub pinned projects a ⭐️ star.

It would mean the world to me, and help me provide quality support to the community😁

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