Looking to hire developers?
Hello everyone,
I would like to share my experience of creating a multi-step form this challenge was hard if done properly i made some improvemnts in this challenge of not hard-coding the steps, I took a more robust approach to ensure scalability in the future. By utilizing components in react, I made it possible to easily scale the form without having to rewrite the entire code were reduced or increased.
In addition, I made a deliberate choice to avoid using the position:absolute property for the navigation. Instead, I used a grid layout. This decision was made to prevent any obstruction of the form if it ever exceeds the size of the viewport.
I am open to feedback and suggestions from the community to further improve the project. Your input is highly appreciated.
Thank you!
@aryanda1
Posted
Why clicking the change button in the summary page, doesnt lands me to the second page where i can change the plan rather than toggling between monthly and yearly?
@legion40216
Posted
@aryanda1 i just made it that way XD i will add another button to take people to that page soon...
@Abdugafor
Posted
Hi there )
You have made a great job. But there no navigation if I click on steps on navigation-bar. I also did this challange but with Angular. I did like , If user click on steps , get step number and set it on "currentStep" (in your situation) and display this step-content. I hope it can help to solve this problem.
@legion40216
Posted
@Abdugafor thanks for informing me on that i got the functionality running again take a look, is this what you were taking about? I never used angular but this functionality isnt that hard to do if you map the number of step component with its length you can get the index of it and pass it down to the sidebar step buttons onClick funtionality and change the currentStep with it...
@Abdugafor
Posted
@legion40216 I also did the same. I looked at your app again , it works perfectly! And I notice that in number field I can write words and there wouldn't be any error. Better to fix it with changing input type="number". And in the summary step when user click change I think it should go back to plan step ( to chose another plan). Good luck)
Marked as helpful
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
