ttsoares / multi_step_form

https://www.frontendmentor.io/challenges/multistep-form-YVAnSdqQBJ

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
• 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:

• 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: Add solution URL here
• Live Site URL: Add live site URL here

My process

Built with

• Flowbite CSS library
• React - JS library
• Next.js - React framework
• Tailwind - For styles

What I learned

Exercised the conditional CSS classes:

  <div
    key={index}
    className={`flex md:flex-row md:justify-between md:p-2  border-2 mb-3
    ${choices[index] ? "border-black" : "border-gray-200"}
    w-full rounded-lg text-sm md:text-base h-14 md:h-16`}
  >

Continued development

Learn more about useForms and start coding in Typescript.

Useful resources

• useForms - Very good tutorial about useForms.

Author

• Website - Thomas Tschoepke Soares
• Frontend Mentor - @ttsoares

Acknowledgments

Several nice people helping students with Youtube videos...