Design comparison
Solution retrospective
Just happy everything worked out as planned in the end. I actually started this project with a very simple POC to test my plan/logic before I started working with the actual designs.
What challenges did you encounter, and how did you overcome them?I knew the "plan" section/page was going to be a tough cookie. 5 sets of 3 choices need to be handled, I choose to handle all this input in 1 continues updating state. On top of that the option components are custom styled radio buttons. We probably all know what a pain custom input styling can be...
I did take some "creative liberty" within the plan page. The summary shows as a direct result of the form submit, and get's updated directly if the user chooses to re-consider any options. I didn't really see the need to make this a separate modal like in the original design. Also user can continue to checkout from the summary directly.
For questions I had left, I found chatGPT to be pretty helpfull on squashing some bugs and making my logic a bit more compact.
Community feedback
- @adityaphasuPosted 8 months ago
Hey Ed! Nice work! ✨
There's one suggestion and just a minor one which is that maybe try to use 1200px as the
max-width
instead of 1300px because most laptop screens start from there and currently on my laptop, there's lots of space due to that especially the plans page which looks a bit odd and appears to be left aligned. It is the categories disappearing which just shifts the form and the options to the left. I tried to simulate the screen sizes in dev tools and it does look cool at 1200px as well if you start the large screen layout at that sizeMarked as helpful0@EdwinSchPosted 8 months ago@adityaphasu Thanks for the input! Yeah it's always hard to find the best breakpoint choices.. I will definitely look into your suggestion :)
0
Please log in to post a comment
Log in with GitHubJoin 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