age calculator app main with HTML, CSS and JS

Community feedback

• 

  Abdul Khaliq 🚀•72,560

  @0xabdulkhaliqPosted over 1 year ago

  Hello there 👋. Congratulations on successfully completing the challenge! 🎉

  • I have other recommendations regarding your code that I believe will be of great interest to you.

  ---

  JAVASCRIPT 🟡:

  • Yeah there are some errors due these reasons
    • The variable name datet should be date.
    • The validate function was checking if the month and day inputs were greater than 12 and 31 respectively, but it was not checking if they were less than 1. I added an else-if statement to handle this case.
    • The validate function was always returning true, because the validator variable was being set to true in every iteration of the forEach loop. I changed this to only set it to true if the input was valid.
    • In the handleSubmit function, the calculation of the month difference was incorrect. It was calculating the difference between the current month and the input month, but it should be calculating the difference between the current month and the birth month.
    • And finally, The code was missing an else-if statement to check if the birth month was equal to the current month and the birth day was greater than the current day.

  ---

  • Here's the corrected code:

  const dayInp = document.getElementById("day");
  const monthInp = document.getElementById("month");
  const yearInp = document.getElementById("year");
  
  const dayOut = document.getElementById("DD");
  const monthOut = document.getElementById("MM");
  const yearOut = document.getElementById("YY");
  
  const form = document.querySelector("form");
  
  form.addEventListener("submit", handleSubmit);
  
  const date = new Date();
  let day = date.getDate();
  let month = 1 + date.getMonth();
  let year = date.getFullYear();
  
  const months = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
  
  function validate() {
    const inputs = document.querySelectorAll("input");
    let validator = true;
    inputs.forEach((i) => {
      const parent = i.parentElement;
      if (!i.value) {
        i.style.borderColor = "red";
        parent.querySelector("small").innerText = "This field is required.";
        validator = false;
      } else if (i === monthInp && i.value > 12) {
        i.style.borderColor = "red";
        parent.querySelector("small").innerText = "Must be a valid month.";
        validator = false;
      } else if (i === dayInp && i.value > 31) {
        i.style.borderColor = "red";
        parent.querySelector("small").innerText = "Must be a valid day.";
        validator = false;
      } else {
        i.style.borderColor = "black";
        parent.querySelector("small").innerText = "";
        validator = validator && true;
      }
    });
    return validator;
  }
  
  function handleSubmit(e) {
    e.preventDefault();
    if (validate()) {
      if (dayInp.value > day) {
        day = day + months[month - 1];
        month = month - 1;
      }
      if (monthInp.value > month) {
        month = month + 12;
        year = year - 1;
      }
  
      const d = day - dayInp.value;
      const m = month - monthInp.value;
      const y = year - yearInp.value;
  
      dayOut.innerHTML = d;
      monthOut.innerHTML = m;
      yearOut.innerHTML = y;
    }
  }
  
  

  ---

  • Now your age calculator will works as fine

  ---

  .

  I hope you find this helpful 😄 Above all, the solution you submitted is great !

  Happy coding!

  0