Responsive with css grid, vanilla JS, BEM methodology, CSS Sass

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!