Intro-Component-w-Sign-Up-Form-TLP

Frontend Mentor Project

My Challenge

My challenge was to build an introductory component and get it to look as close to the design as possible.

My 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”

Background

I chose this project to practice using Vanilla JS. I used MDN Form Validation as a resource to organize my JS code and to learn about using RegEx to validate email addresses. This resource was very helpful. Initially thought that my error messages should be placed in my JS code. However, it was more efficient to include in my HTML code and use CSS to hide the messages until needed.

Completed Design

You can see the my final design here: Intro Component with Sign-Up Form

Designer: T.Lanette Pollard

Attribution

Challenge by Frontend Mentor