Responsive Multi-Step-Form
Solution retrospective
Took me a while to complete, I did all the design first and then worked on the calculations for the total afterwards in hindsight I should have done it the other way round.
I used tailwind as it makes writing CSS much quicker but as a result my code looks pretty messy.
I still need to work on the total calculations because currently if the user changes add ons the total doesn't go back down.
Please log in to post a comment
Log in with GitHubCommunity feedback
- P@AhmadYousif89
Hi there, just to add to @Ruben's comment, I noticed that if you reached to step 3 (addons) then went back to step 1 then went back again to step 3 you will see that both step 2 and 3 gets selected and rendered to the screen (I guess the nav buttons for the steps have the same id or so). similar thing happens with step 4 but in this case to doesn't trigger the step on first click but rather on the second attempt! and you might need to take a look at the generated report for the accessibility and html validation errors
Marked as helpful - @RubenSmn
Hi Luca, great work on this multi step form! I was impressed by the animation on the check icon! I did find some things that could be improved.
UI/UX improvements:
- changing the plan to yearly does not auto adjust the height of the cards
- switch button does not have a pointer as a cursor
- the Go Back and Next Step buttons do not have a hover effect
State/JS improvements:
- there is no plan pre-selected
- when selecting a yearly plan the add-on prices don't update
- when you select a plan and deselect it on the Finish screen there is no plan only the
(Monthly)text. But the total price still has the previously selected plan price.
I hope you find this helpful, happy hacking!
Marked as helpful
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