Submitted about 2 years ago

Interactive rating component (HTML, CSS, JS)

Steven• 50

@StevenTheAnalyst

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

I wasn't sure how to make it so that the user could choose only one rating to submit. I tried using a radio input but that added a smaller circle to select and the number had a set distance that was off-center. Also, I wasn't sure how to show the rating that the user had clicked on the 'thank you' page. I tried using an event listener to save their choice as a variable to call later but I couldn't figure out how to do it so I left it as a static message always showing 4 out 5.

Community feedback

Melad• 220

@melad99

Posted about 2 years ago

*FirstTo center the container in the middle of the page I used this for CSS in my solution and it works perfectly:

.class-name{

position:absolute;

top:50%;

left:50%;

transform:translate(-50%, -50%);

}

*For adding the same number I give each element and id and in the javascript when it clicked it shows the number with ID on the thank you page I think that will work with you.

I hope that's will help you and that you did a great job and try with this challenge ...good luck with other challenges.

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