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.
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:
[email protected]
). The message for this error should say "Please provide a valid email address"
- The
- Solution URL: Frontendmentor.io
- Live Site URL: fsuropaty.github.io
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
- Ionicons
I learned about :
- form validation
function formValidation() {
const emailValue = email.value.trim();
if (emailValue === "") {
errorMsg.classList.add("show-error");
email.classList.add("error-ring");
errorMsg.innerHTML = "Whoops! It looks like you forgot to add your email";
} else if (!isEmail(emailValue)) {
errorMsg.classList.add("show-error");
email.classList.add("error-ring");
} else {
errorMsg.classList.remove("show-error");
email.classList.remove("error-ring");
}
}
function isEmail(email) {
return /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(
email
);
}
- W3Schools - Pretty much your guidebook in website development
- MDN - W3Schools but from Mozilla.
- Layoutit! - A very cool grid generator
- Ionicons - A really cool open source icon set
- Website - fsuropaty
- Frontend Mentor - @fsuropaty