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

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
• Receive an error message when the form is submitted if:
  • Any input field is empty. The message for this error should say "[Field Name] cannot be empty"
  • 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 "Looks like this is not an email"

• Live Site URL: https://frabjous-sopapillas-3a5936.netlify.app/

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• Mobile-first workflow
• email verification

• good practice with email verification using Javascript

• if email address formatted incorrectly, error messages appear

• if email address formatted correctly, error messages disappear

• used onkeydown function in html then connected it through javascript

<input type="email" required="required" id="email" placeholder="Email Address" onkeydown="validation()"/> <small class="error-message" id="email-error-msg">Looks like this is not an email</small><br />

• styling error classes and ensuring they work/display the correct way requires more attention to detail, which is why i'm proud of how I named and styled these

.error-icon { background-image: url(./images/icon-error.svg); background-repeat: no-repeat; background-position-x: 95%; background-position-y: center; } .error-message { visibility: hidden; color: red; text-align: right; font-style: italic; } /* error class for javascript*/ .error-border { border: solid 1px red; } .invalid { border: solid 1px red; }

• still need more practice with variations of form validation and regex so I dont have to look up the process every single time

• Frontend Mentor - @LBuchananCates