Frontend Mentor - Multi-step form solution

This is a solution to the Multi-step 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

Overview

The challenge

Users should be able to:

• Complete each step of the sequence
• Go back to a previous step to update their selections
• See a summary of their selections on the final step and confirm their order
• View the optimal layout for the interface depending on their device's screen size
• See hover and focus states for all interactive elements on the page
• Receive form validation messages if:
  • A field has been missed
  • The email address is not formatted correctly
  • A step is submitted, but no selection has been made

Screenshot

Links

• Solution URL: Solution URL
• Live Site URL: Live site

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• React - JS library
• Yup - for validation

What I learned

During the project, I implemented a component named Step for each stage. The Step component applies the 'active-step' CSS class when the step is currently active.

	const Step = ({number, name, isActive}) => {
	return (
		<li className={`${isActive ? 'active-step' : ''} step-wrapper`}>
			<span className='step-number'>{number}</span>
			<div className="step-info">
				<p className="step-number">STEP {number}</p>
				<p className="step-name">{name}</p>
			</div>
		</li>
	)
}

<ul className="steps" style={bgStyle}>
	<Step number={1} name={'your info'} isActive={activeStep === 1}/>
	<Step number={2} name={'select plan'} isActive={activeStep === 2}/>
	<Step number={3} name={'add-ons'} isActive={activeStep === 3}/>
	<Step number={4} name={'summary'} isActive={activeStep === 4}/>
</ul>

This structure allows for clear visualization of each step in the process, with the active step dynamically highlighted based on the current state.

Continued development

Moving forward, my focus will remain on enhancing my proficiency in state management techniques and ensuring seamless state handling throughout my projects.

Useful resources

• React Docs - This helped me for building react components. I really liked using this docs.
• Yup docs - This is an amazing article for understand Yup.

Author

• Website - Amjad Shadid
• Frontend Mentor - @amjadsh97
• Twitter - @Amjadshadid
• Linkedin - @Amjad Shadid