Frontend Mentor - Intro component with sign up form solution

Table of contents

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

Overview

The challenge

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: [email protected]). The message for this error should say "Looks like this is not an email"

Screenshot

Links

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

My process

Built with

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

What I learned

• 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;
}

Continued development

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

Author

• Frontend Mentor - @LBuchananCates