Design comparison
Solution retrospective
Overall this project went pretty well, I'm happy that I got the JS working :)
Here are my questions:
Should I have used a form for the submit- and rating-buttons and set it to required, or can I get away with using a default value for the rating (like I have now), in case anyone skips clicking a rating button?
How can I get the #rating-card and #thank-you-card to appear in the same spot (in the exact middle of the page)? I tried setting main to display: block and margin: auto but then both cards were stuck to the left-hand side of the viewport.
Lastly, in my last solution I had misunderstood how to use h1, h2, h3 properly. Have I used it correctly now?
Community feedback
- @molLbachPosted 12 months ago
about your second question, try using flexboxes to adjust them in the middle of the screen, If you don't know about them yet I highly suggest checking them out, they are indispensable, the thank you card should have the exact same dimensions as the rating card so that when the display:none; property kicks in, it looks like the card stayed the same and only the content changed.
0@niko-niko-nomPosted 12 months ago@molLbach
Yes, flexboxes are great. In fact, I'm pretty sure I used them in this project! Only problem is, when I hide the main-card and make the thank-you-card appear, it appears under the hidden main-card. So I was just wondering how to make the hidden card not take up any space, essentially :)
0
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