script.js

//input fields
const day = document.getElementById('day');
const month = document.getElementById('month');
const year = document.getElementById('year'); 
//inpt titles
const daytitle = document.querySelector('.day');
const monthtitle = document.querySelector('.month');
const yeartitle = document.querySelector('.year');
//error msgs
const dayErr = document.querySelector('.day-err');
const monthErr = document.querySelector('.month-err');
const yearErr = document.querySelector('.year-err');
//submit button
const submitBtn = document.querySelector('.submit-button');
//output fields
const ageYears = document.querySelector('.output-years');
const ageMonths = document.querySelector('.output-months');
const agedays = document.querySelector('.output-days');
//current date
const currentDate = new Date();
const currentYear = currentDate.getFullYear();
const currentMonth = currentDate.getMonth()+1;
const currentDay = currentDate.getDate();

day.addEventListener("input", () => {
   if (isEmpty(month.value) && isEmpty(year.value)) {
      validateDay();
   }
   else if (!(isEmpty(month.value)) && isEmpty(year.value)) {
      validateDay();
      validateMonth();
   }
   else if (isEmpty(month.value) && !(isEmpty(year.value))) {
      validateDay();
      validateYear();
   }
   else {
      validateDay();
      validateMonth();
      validateYear();
   }
});
month.addEventListener("input", () => {
   if (isEmpty(day.value) && isEmpty(year.value)) {
      validateMonth();
   }
   else if (!(isEmpty(day.value)) && isEmpty(year.value)) {
      validateMonth();
      validateDay();
   }
   else if (isEmpty(day.value) && !(isEmpty(year.value))) {
      validateMonth();
      validateYear();
   }
   else {
      validateDay();
      validateMonth();
      validateYear();
   }
});
year.addEventListener("input", () => {
   if (isEmpty(month.value) && isEmpty(day.value)) {
      validateYear();
   }
   else if (!(isEmpty(month.value)) && isEmpty(day.value)) {
      validateYear();
      validateMonth();
   }
   else if (isEmpty(month.value) && !(isEmpty(day.value))) {
      validateYear();
      validateDay();
   }
   else {
      validateDay();
      validateMonth();
      validateYear();
   }
});

function isEmpty(fieldValue) {
   return fieldValue == "";
}

submitBtn.addEventListener("click", () => {
   if (validateDay() === true && validateMonth() === true && validateYear() === true) {
      calculateAge(day.value, month.value, year.value);
      animateOutputAge(ageYears, years, 250/years);
      animateOutputAge(ageMonths, months, 250/months);
      animateOutputAge(agedays, days, 250/days);
   }
   else {
      alert("Enter a valid date!");
   }
})

function animateOutputAge(elementYears, element, delay) {
   let counts = setInterval(update, delay);
   let upto = -1;
   function update() {
      elementYears.innerHTML = ++upto;
      if (upto === element) {
         clearInterval(counts);
      }
   }
}

let years;
let months;
let days;

const shortmonths = ['4','6','9','11'];
const longmonths = ['1','3','5','7','8','10','12'];

function calculateAge(dayValue, monthValue, yearValue) {
   years = currentYear - yearValue;
   if (monthValue <= currentMonth) {
      months = currentMonth - monthValue;
   }
   else {
      years--;
      months = (currentMonth+12) - monthValue;
   }
   if (dayValue <= currentDay) {
      days = currentDay - dayValue;
   }
   else {
      if ([4,6,9,11].includes(currentMonth-1)) {
         months--;
         days = (currentDay+30) - dayValue;
      }
      else if ([1,3,5,7,8,10,12].includes(currentMonth-1)) {
         months--;
         days = (currentDay+31) - dayValue;
      }
      else if (currentMonth-1 === 2 && (currentYear % 4 === 0) && (currentYear % 100 === 0)) {
         months--;
         days = (currentDay+29) - dayValue;
      }
      else {
         months--;
         days = (currentDay+28) - dayValue;
      }
   }
}

function errStyling(nametitle, name) {
   nametitle.style.color = "#ff5757";
   name.classList.remove('correct-feild');
   name.classList.add('err-feild');
}
function correctStyling(nametitle, name) {
   nametitle.style.color = "#716f6f";
   name.classList.add('correct-feild');
   name.classList.remove('err-feild');
}

function errMsg(fieldErr, fieldtitle, field, msg) {
   fieldErr.textContent = msg;
   errStyling(fieldtitle, field);
}

function validateDay() {
   if (day.value === "") {
      errMsg(dayErr, daytitle, day, "This field is required");
   }
   else if (isNaN(day.value)) {
      errMsg(dayErr, daytitle, day, "Must be a number");
   }
   else if (day.value < 1 || day.value > 31) {
      errMsg(dayErr, daytitle, day, "Must be a valid day");
   }
   else if (shortmonths.includes(month.value) && day.value > 30) {
      errMsg(dayErr, daytitle, day, "Must be a valid date");
   }
   else if (longmonths.includes(month.value) && day.value > 31) {
      errMsg(dayErr, daytitle, day, "Must be a valid date");
   }
   else if (month.value === '2' && (year.value % 4 === 0) && (year.value % 100 === 0) && day.value > 29) {
         errMsg(dayErr, daytitle, day, "Must be a valid date");
   }
   else if (month.value === '2' && ((year.value % 4 != 0) || (year.value % 100 != 0)) && day.value > 28) {
         errMsg(dayErr, daytitle, day, "Must be a valid date");
   }
   else if (year.value == currentYear && month.value == currentMonth && day.value > currentDay) {
      errMsg(dayErr, daytitle, day, "Must be in the past");
   }
   else if (year.value == currentYear && month.value == currentMonth && day.value == currentDay) {
      alert("That's today!")
   }
   else {
      dayErr.textContent = "";
      correctStyling(daytitle, day);
      return true;
   }
}

function validateMonth() {
   if (month.value === "") {
      errMsg(monthErr, monthtitle, month, "This field is required");
   }
   else if (isNaN(month.value)) {
      errMsg(monthErr, monthtitle, month, "Must be a number");
   }
   else if (month.value < 1 || month.value > 12) {
      errMsg(monthErr, monthtitle, month, "Must be a valid month");
   }
   else if (year.value == currentYear && month.value > currentMonth) {
      errMsg(monthErr, monthtitle, month, "Must be in the past");
   }
   else {
      monthErr.textContent = "";
      correctStyling(monthtitle, month);
      return true;
   }
}

function validateYear() {
   if (year.value === "") {
      errMsg(yearErr, yeartitle, year, "This field is required");
   }
   else if (isNaN(year.value)) {
      errMsg(yearErr, yeartitle, year, "Must be a number");
   }
   else if (year.value < 1) {
      errMsg(yearErr, yeartitle, year, "Must be a valid year");
   }
   else if (year.value > currentYear) {
      errMsg(yearErr, yeartitle, year, "Must be in the past");
   }
   else {
      yearErr.textContent = "";
      correctStyling(yeartitle, year);
      return true;
   }
}