Frontend Mentor - Intro component with sign up form

This is a solution to the Intro component with sign up form challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

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

Note: Delete this note and update the table of contents based on what sections you keep.

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: name@host.tld). The message for this error should say "Looks like this is not an email"

Screenshot

Links

• Solution URL: Github repository
• Live Site URL: hejkeikei.github.io

My process

• Write with semantic markup.
• Get JavaScript working
• Plan the layout.
• Go through validators.
• Set all root figures and font.
• Write CSS for general tags.
• Write classes' and ids' style.
• Responsive design
• Get all CSS done, check on both desktop and mobile.

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• JavaScript

What I learned

• Validating email using Regular Expression

if (/[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$/.test(email.value)) {
  // Hide error message
} else if (email.value != "") {
  // Show error message
}

• Show error message My method was to append messages right after every input field:

var msg = document.createElement("p");
msg.innerHTML = i.getAttribute("placeholder") + " cannot be empty";
msg.classList.add("errMsg");
i.parentNode.insertBefore(msg, i.nextSibling);

However, I find the method above will cause extra elements after the second attempt that user submit the form. The final method is to have the element ready in HTML:

<input type="text" />
<p class="errMsg"></p>

Then select the elements right after input field to fill the content in the pre-existing elements:

inputfield.nextElementSibling.innerHTML =
  fields[i].getAttribute("placeholder") + " cannot be empty";

Continued development

• Make the page after submitting the form.
• try to replace some js with CSS ::invalid pseudo element.

Useful resources

• Email validation - This helped test the email format.
• Icon in input field - I wasn't sure about which way should I do with icons, this is the approach I liked the most!
• Regular Expression - This is a great website that could fiddle with regex and preview the result.

Author

• Codepen - TingHueiChen
• Frontend Mentor - @hejkeikei
• Twitter - @hej_keikei

Acknowledgments

The Regular Expression of email validation came from [w3resource] (https://www.w3resource.com/)