This is a solution to the Ping coming soon page challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author
• Acknowledgments

Note: Delete this note and update the table of contents based on what sections you keep.

Users should be able to:

• View the optimal layout for the site depending on their device's screen size
• See hover states for all interactive elements on the page
• Submit their email address using an input field
• Receive an error message when the form is submitted if:
  • The input field is empty. The message for this error should say "Whoops! It looks like you forgot to add your email"
  • The email address is not formatted correctly (i.e. a correct email address should have this structure: name@host.tld). The message for this error should say "Please provide a valid email address"

• Solution URL: Code
• Live Site URL: Live site

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• Vanilla Javascript

How to add interactivity to the html, basic DOM manipulation, how to add and remove classes using javascript and more flexbox

let validate = () => {
  if (email.value === "") {
    error.style.display = "block";
    email.classList.remove("success-input");
    email.classList.add("form-error");
    error.style.color = "var(--light-red)";
    error.innerHTML = "Whoops! It looks like you forgot to add your email";
  } else if (!pattern.test(email.value)) {
    email.classList.remove("success-input");
    email.classList.add("form-error");
    error.style.display = "block";
    error.style.color = "var(--light-red)";
    error.innerHTML = "Please provide a valid email address";
  } else if (pattern.test(email.value)) {
    email.classList.remove("form-error");
    email.classList.add("success-input");
    error.style.display = "block";
    error.style.color = "var(--green)";
    error.innerHTML = "Thank you for your support!";
  }
};

• Flexbox Malven - Useful flexbox reference as always
• MDN - MDN the best documentation

• Frontend Mentor - @nicolasfig