Birthday Age Gate Modal Overlay

birthday-age-gate-overlay.html

<script src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.2.1/js.cookie.js"></script>

<script>
  //Modified from Finsweets age gate redirect hack: https://www.finsweet.com/hacks/21/

  // if no validAge cookie then show the age gate
  if (!Cookies.get("validAge")) {
    $(".age-gate-modal-wrapper").show();
  }

  // when form is submitted check if the birthday is above 18 years old
  $("#verify-form").on("submit", function (e) {
    // get year, month & day values
    const year = $("#verify-year").val();
    const month = $("#verify-month").val();
    const day = $("#verify-day").val();

    // make date string
    const date = year + "/" + month + "/" + day;

    // if user's age >= 18
    if (getAge(date) >= 18) {
      // prevent form from submitting
      e.preventDefault();

      // give the user a validAge cookie
      Cookies.set("validAge", true, {
        expires: 365,
      });
      // hide the age gate popup
      $(".age-gate-modal-wrapper").hide();
    }
  });

  // getAge function
  function getAge(dateString) {
    const today = new Date();
    const birthDate = new Date(dateString);
    let age = today.getFullYear() - birthDate.getFullYear();
    const month = today.getMonth() - birthDate.getMonth();
    if (month < 0 || (month === 0 && today.getDate() < birthDate.getDate())) {
      age--;
    }
    return age;
  }
</script>