Submitted 12 months ago

Interactive-Ratings-Component

Ayush Kanyal• 120

@ayushkanyal

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

Happy to complete my firs Javascript Challenge.

All reviews are welcome.

How did you match the colors for the dialogue boxes with the ones in the design?

I used CSS color mix property.

How can I improve the logic and design?

I have given ID values of "1","2"..."5" to the options and clicks fetch the elemet.target.id values to the updateScore function. For some reason my javascript function kept returning "undefined" for my event.target.value selector, despite mentioning the values. What could be the reason?

Community feedback

BBualdo• 540

@BBualdo

Posted 12 months ago

Hello, the design looks very nice, good job!

I think the logic of your app is not perfect, because it should let you pick one of 5 ratings and then show the result. At this moment you can pick all ratings and additionally - you can't "unclick" clicked rating. Just write a function that checks if any rating is currently selected and if it is - remove selection and add to currently clicked one. Another approach (which I preffered) was removing selection from all rating elements and adding one to clicked. Good luck!

Marked as helpful

Ayush Kanyal• 120

@ayushkanyal

Posted 12 months ago

@BBualdo Hey!

Thank you so much for taking the time to review my solution. I've made changes to my solution, thanks to the tip you provided and even made sure the form is submitted only when a rating is selected. Do check it out and let me know if you think I could have done it in a better way.

Thanks for the tip, regardless.

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