index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Age Calculator</title>
  </head>
  <body style="background-color: pink;">
<h1 style="color: blue; text-align:center; font-family: Arial, Helvetica, sans-serif;">Free Age Calculator</h1>

<p style="color: blue; font-style: italic; font-family: Arial, Helvetica, sans-serif;">Want to guess your age or how old your loved one is ? 
    This free and simple calculator will help you find out how old you are</p>


    <!-- <form action="">
        <label for="fday">Day</label>
        <input type="number" id="fday" name="fday">
        <label for="fmonth">Month</label>
        <input type="number" id="fmonth" name="fmonth">
        <label for="fyear">Year</label>
        <input type="number" id="fyear" name="fyear">
        <button type="button">Submit
        </button>
    </form> -->

    <input style="align-items: center;"
      type="date"
      name="AgeCalculator"
      id="AgeCalculator"
      placeholder="Fill in your birthday"
    />

    <button id="button" style="align-items: center;">Submit</button>

    <div id="resultat"></div>

    <script>
      let birthday = document.getElementById("AgeCalculator");
      let buttonsubmit = document.getElementById("button");
      let results = document.getElementById("resultat");

      buttonsubmit.addEventListener("click", AgeCalculator);

      function AgeCalculator() {
        if (birthday.value === "") {
          alert("please fill in your birthday");
        } else {
          let Today = new Date();
          let birthdate = new Date(birthday.value);

          if (Today < birthdate) {
            alert("not born yet");
          } else {
            let Age = Math.floor((Today - birthdate) / 31536000000);
            results.innerHTML = "You are" + Age;
          }
        }
      }
    </script>
  </body>
</html>