Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Tailwind + TS + React.js + Redux Toolkit | Multi Step Form

Better5afe 850

@better5afe

Desktop design screenshot for the Multi-step form coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
4advanced
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hi Everyone!

To sum everything up, users are able to:

  • Complete each step of the form sequence.
  • Go back to a previous step to update their selections.
  • Selections and current steps are saved in local storage.
  • Stored data is removed upon completing all steps.
  • 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) A field has been missed.
  • b) The email address is not formatted correctly.
  • c) A step is submitted, but no plan selection has been made.

I'll be grateful for any advice or suggestion whan could improved.

Thanks & Happy Coding 🎃

Community feedback

P
alexander 1,300

@alex931d

Posted

very nice solution great work ! 🎃

1

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord