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: Github
- Live Site URL: Ping - Coming Soon
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- JavaScript
- Mobile-first workflow
<form action="#" id="form" novalidate>
<!-- Learn that default browser alert message can be disabled using novalidate -->
else if (form.reportValidity()) {
form.submit();
emailInput.value = "";
alertContainer.innerText = "";
emailInput.style.border = "2px solid black";
}
// Using reportValidity I can check using the browser email validity checker in a "if condition"
- ChatGPT - This helped me to quickly find what html attribute, css property, or javascript method I could use.
- MDN - Where I search to find explanation of everything related to html, css or javascript.
- Website - David McLean
- Frontend Mentor - @davupls
- Twitter - @davutech
To "deejayjay" Frontend Mentor discord channel who helped me find the right attribute to disable form default behavior, cheers ๐ป.