Submitted 10 months ago

Interactive Rating Component

Nicole• 20

@niko-niko-nom

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Interactive rating component

HTML
CSS
JS

1newbie

View challenge

Design comparison

SolutionDesign

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

molLbach• 30

@molLbach

Posted 10 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.

Nicole• 20

@niko-niko-nom

Posted 10 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 :)

Please log in to post a comment

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