Frontend Mentor - Intro Component With Sign Up Form solution

This is a solution to the Intro Component With Sign Up Form Challenge on Frontend Mentor.

Table of contents

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

Overview

The challenge

Frontend Mentor's Challanges

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"

My Challanges:

• Receive an error message when the form is submitted if:
  • Password is shorter than 8 characters, doesn't include at least one number or a special character. The message for this error should say "Password must be minimum 8 characters, include at least one number and one special character"
  • Display a message that says "Submitted Successfully" to indicate that the form went through.
  • Change the color of the outline if the input is formatted correctly.
  • Clear all the inputs after a successful submission.

Screenshot

Links

• Live Site URL: https://kens-visuals.github.io/intro-component-with-signup-form/
• Solution URL: https://www.frontendmentor.io/solutions/intro-comp-with-signup-form-built-with-scss-bem-and-vanilla-js-aIoqL7r_n

My process

Built with

• Semantic HTML5 markup
• SCSS custom properties
• CSS Flexbox
• CSS Grid
• Vanilla JS
• Mobile-first workflow

What I learned

I'm really proud of this project for a couple of reasons. First, I've always avoided working with HTML forms, but in the challenge I had to "face my fears". I think I did pretty good considering that this was the first time, using Vanilla JS to validate any type of form. Second, this was the first time when I used Vanilla JS without any outside source, besides RegExp of course (for the record, I know RegExp, but not that good to write an email or password validation), but I mean common it's still pretty cool, eh? 👨🏻‍💻 Anyhow, cool project, simple design, a bunch of cool stuff to learn and practice.

Continued development

What comes to continued development, I'd like to sharpen my skills of animations and how to manipulate them with Vanilla JS. I'm planning on implementing some basic animations for this project because it looks pretty raw.

Useful resources

• Email RegExp Validator
• Password RegExp Validator
• regex101 - The coolest website, to learn, to practice, and to check Regular Expression.

Author

• Frontend Mentor - @kens-visuals
• Codewars - @kens_visuals
• CodePen - @kens-visuals