Age calculator...using CSS Grid & Flexbox

Hello👋

I had the same problem with determining the last day of the month. You need to add one function:

//my version of variables
let month = parseInt(document.getElementById('month').value);
let year = parseInt(document.getElementById('year').value);

function getDateInMonth(y, m) {
     return new Date(y, m, 0).getDate()  //when you set the day argument to 0, it calculates the last day of the previous month
}

Then inserting a function into calculations:

if (currentDate >= dobDate){
    dAge = currentDate - dobDate
  }
  else {
    mAge--
    dAge =  getDateInMonth(year, month) + currentDate - dobDate
  }

I can give advice about the error class. You can style it with CSS instead of JS. Only in JS, you will need to add this class to the elements (or better, the container) at the time of the error, if everything is correct, remove it.

By the way, instead of <h2>, use <label> for labels above the fields

СSS

.error label {
  ...
}
.error input {
  ...
}
.error p {
  ...
}

I hope to help😊