Design comparison
SolutionDesign
Solution retrospective
This project was a little challenging for me and I enjoyed it a lot.
However, I have 3 main doubts regarding it.
- How will I write required in red when the user clicks on Next Step without filling required fields?
- I could not make the plan type change (monthly or yearly) with the central toggle button.
- I could not style the buttons properly because I inserted them in the content div, they were creating problems in the mobile version. And if I was putting them outside the content div, then I had no idea how to style them in the laptop version.
Community feedback
- @gustavosoratiPosted almost 2 years ago
Hello, you can change color when click next step checking the valeus of input on useState, example: name: string = " ''
// verify has value name.trim().length === 0{ boolean to pass conditionaly to css } and then in css style={{ condition ? true : false }}
#2 - you can use state and prop drilling or context in this case
#3 - You can try use Styled-components it's more easy to make css when you have conditions.
But your project is good, congratulations!
Marked as helpful1
Please log in to post a comment
Log in with GitHub
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