Responsive with css grid, vanilla JS, BEM methodology, CSS Sass
Design comparison
Solution retrospective
"This is the solution to the 'age calculator' challenge, it's practically finished, although I have the following issue.
"Depending on the months, an error is generated if the day is not valid, but when entering the day first and then specifying the month, the validation is not performed, which results in February 31st being considered a valid day."
Community feedback
- @JJacobPRPosted about 1 year ago
Hola amigo,
I think that I found the problem with your code :) Let's take a look at this snippet
switch(e.target.id) { case 'day': validateField('day', 'label-day','error-text-day' , e.target, maxDays, 2); break; case 'month': validateField('month', 'label-month','error-text-month', e.target, 12, 2); break; case 'year': validateField('year', 'label-year','error-text-year', e.target, 2024, 4); break; }
Here you are checking field based on event.target.id. But only one field each time, only on day, month or year. So when you put day 31, it checks on your default case:
} else { maxDays = 31; }
But when you put in the month, since you use switch case, it doesn't recheck the day, only the month. The same goes for year. The easiest solution would be to check all fields each time. It is a small app so it won't be a problem.
Another thing, I would consider changing, is the way you check day amount per month. Remember the February has 28 or 29 days. I know it is a bit more of a challenge but that's what these are for.
Hope that I helped and good luck!
Marked as helpful0
Please log in to post a comment
Log in with GitHubJoin 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