Frontend Mentor - Intro component with sign up form solution

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

Screenshot

Desktop

Mobile

Links

• Solution URL: https://www.frontendmentor.io/solutions/responsive-signup-form-built-with-react-lvKCi18HDZ
• Live Site URL: https://incredible-pegasus-1b4484.netlify.app/

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Mobile-first workflow
• React - JS library

What I learned

I worked on this challenge to practice my React skills, but I spent a significant amount of time learning how to customize the form validation to meet the challenge specifications. Below is an excerpt of the validator function from the Form component:

    function validator(data, event) {
        let errors = {}
        const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-z0-9.-]+\.[a-zA-Z]{2,}$/

        if(data.firstName === '') {
            errors.firstName = 'First name cannot be empty'
            event.target.firstName.focus()
        }

        if(data.lastName === '') {
            errors.lastName = 'Last name cannot be empty'
            event.target.lastName.focus()
        }

        if(data.email === '') {
            errors.email = 'Email cannot be empty'
            event.target.email.focus()
        } else if (!emailPattern.test(data.email)) {
            errors.email = "Looks like that's not an email"
            event.target.email.focus()
        }

        if(data.password === '') {
            errors.password = 'Password cannot be empty'
            event.target.password.focus()
        }

        return errors
    }

In addition, to writing this above function I also had to learn how to integrate this with React. This meant creating a new variable to store in state for the error messages and using the validator function to help set the state when the form was not completed correctly. Here's an snippet of code for how I set up the state for this:

const [errorMessage, setErrorMessage] = React.useState({})

function handleSubmit(event) {
        event.preventDefault()
        setErrorMessage(validator(formData, event))
    }

Useful resources

• Form feedback with JavaScript - This helped me with the JavaScript I needed to provide feedback when the form is incomplete.
• Form Validation in React JS - This video tutorial was immensely helpful to me in setting up the form validation function validator.

Author

• Email
• LinkedIn
• Portfolio
• Blog

Acknowledgements

Special thanks to Chamu in the Frontend Mentor Discord community for giving me feedback on how to fix the form width issue I was having with this project. Much appreacited!