script.js

$(function() {
  /* navbar */
  onResize();

  $(window).on("resize", onResize);
  $("#navbar").children().on("click", navbarClicked)

  /* hamburger menu click*/
  $("#btn-hmbg").on("click", slideMenu);

  /* character check on a card */
  $(".news-info p").checkLenght();
});

/* Form validation */
document.addEventListener("submit", (e) => {
  document.querySelectorAll(".form-error").forEach(el => el.remove());  

  let validated = true;
  validated *= validate(
    0,
    document.querySelector('[name="email"]').value.trim(),
  );
  validated *= validate(
    1,
    document.querySelector('[name="username"]').value.trim(),
  );
  validated *= validate(
    2,
    document.querySelector('[name="birthdate"]').value.trim(),
  );

  if (!validated) {
    e.preventDefault();
  }
});

/* Checks if the viewport is mobile and, in case, it moves the navbar outside of the header */
function onResize() {
  const isMobile = window.innerWidth <= 600;

  if (isMobile && $("#mobile-navbar").length === 0) {
    $('<div id="mobile-navbar"></div>').insertAfter($("header"));
    $("#mobile-navbar").append($("#navbar").detach());
    $("#mobile-navbar").css({
      position: "sticky",
      top: 40,
      width: "100%",
      height: "93.7vh",
      "background-image": "url('images/pantheon-background.png')",
      "background-repeat": "no-repeat",
      "background-size": "cover",
      "background-position": "center",
      overflow: "hidden",
    });
    $("#mobile-navbar").toggle(0);

    $("nav").css({});
  } else if (!isMobile && $("#mobile-navbar").length === 1) {
    let navStyles = {
      "flex-direction": "row",
      height: "auto",
    };
    let liStyles = {
      float: "left",
      padding: 0,
    };
    $("#navbar").css(navStyles);
    $(".nav-li").css(liStyles);
    $(".nav-element").css("font-size", "larger");
    $("#navbar").detach().insertAfter("#navbar-logo");
    $("#mobile-navbar").remove();
  }
}

/* Makes the navbar disappear on click on a link if in mobile mode */
function navbarClicked() {
  const isMobile = window.innerWidth <= 600;
  if (isMobile && $("#mobile-navbar").css("display") != "none") {
    slideMenu();
  }
}

/* Called when the hamburger menu button is pressed; slides the menu down with an animation */
function slideMenu() {
  $("#mobile-navbar").animate(
    {
      height: "toggle",
    },
    200,
  );

  let liStyles = {
    float: "none",
    padding: "10px 0",
  };
  let navStyles = {
    "flex-direction": "column",
    "align-content": "space-around",
    "flex-wrap": "wrap",
    height: "100%",
  };
  $(".nav-li").css(liStyles);
  $(".nav-element").css("font-size", "xx-large");
  //$("#nav-ul").css("padding", "25vh 0")
  $("nav").css(navStyles);
}

/* Checks if a text is longer than 91 characters, and in case it cuts it down to the last word before character number 91. It adds three dots, in case. */
$.fn.checkLenght = function() {
  const maxLenght = window.innerWidth <= 600 ? 60 : 91;
  for (let text of this) {
    let cleanText = text.textContent.replace(/\s+/g, " ").trim();
    if (cleanText.length > maxLenght) {
      let toLimit = cleanText.slice(0, maxLenght + 1);
      text.textContent = toLimit.substr(0, toLimit.lastIndexOf(" ")) + "...";
    }
  }
};

/* Validates the form.
 * Errors possible:
 * - email: not inserted, not email
 * - username: not inserted, not alphanumeric, not longer than 32 characters
 * - date: not inserted, not after 1900, not before 13 yo
 *
 * How errors are classified:
 * every error is a {x, y} value in which x represents the element affected and y the kind of error.
 */
function validate(id, text) {
  const empty = text === "";
  switch (id) {
    case 0: {
      const isEmail = (str) => /\S+@\S+\.\S+/.test(str);
      if (empty) {
        buildError(0, 0);
        return false;
      } else if (!isEmail(text)) {
        buildError(0, 1);
        return false;
      }
      break;
    }
    case 1: {
      const isAlpha = (str) => /^[a-zA-Z0-9]*$/.test(str);
      if (empty) {
        buildError(1, 0);
        return false;
      } else if (!isAlpha(text)) {
        buildError(1, 1);
        return false;
      } else if (text.length > 16) { 
        buildError(1, 2);
        return false;
      }
      break;
    }
    case 2: {
      const date = new Date(text);
      const today = new Date();

      if (empty) {
        buildError(2, 0);
        return false;
      } else if (date.getFullYear() < 1900) {
        buildError(2, 1);
        return false;
      } else {
        let age = today.getFullYear() - date.getFullYear();
        let monthDiff = today.getMonth() - date.getMonth();

        if (
          monthDiff < 0 ||
          (monthDiff === 0 && today.getDate() - date.getDate() < 0)
        )
          age--;
        if (age < 13) {
          buildError(2, 2);
          return false;
        }
      }
    }
  }
  return true;
}

/* If the validation returned false, this function sets up the DOM element for the error. */
function buildError(x, y) {
  let baseJSON = { id: "", class: "form-error", text: "" };
  switch (x) {
    case 0: {
      baseJSON.id = "email-error";
      if (y === 0) {
        baseJSON.text = "This field can't be empty";
      } else {
        baseJSON.text = "Email must be a valid email address";
      }
      break;
    }
    case 1: {
      baseJSON.id = "username-error";
      if (y === 0) {
        baseJSON.text = "This field can't be empty";
      } else if (y === 1) {
        baseJSON.text = "Username can only be alphanumeric";
      } else if (y=== 2) {
        baseJSON.text = "Username can't be longer than 16 characters";
      }
      break;
    }
    case 2: {
      baseJSON.id = "date-error";
      if (y === 0) {
        baseJSON.text = "This field can't be empty";
      } else if (y === 1) {
        baseJSON.text = "Year has to be after 1900";
      } else if (y === 2) {
        baseJSON.text = "You must be at least 13 to join the beta testing";
      }
      break;
    }
  }
  showError(baseJSON);
}

/* Actually manipulates the DOM to show the form error. */
function showError(json) {

  let el = document.createElement("p");
  el.id = json.id;
  el.className = json.class;
  el.innerText = json.text;

  switch (json.id) {
    case "email-error": {
      document
        .getElementById("beta-form")
        .insertBefore(el, document.getElementById("username-label"));
      break;
    }
    case "username-error": {
      document
        .getElementById("beta-form")
        .insertBefore(el, document.getElementById("date-label"));
      break;
    }
    case "date-error": {
      document
        .getElementById("beta-form")
        .insertBefore(el, document.getElementById("submit-btn"));
      break;
    }
  }
}