Submitted over 1 year ago

Interactive-Ratings-Component

Ayush Kanyal•120

@ayushkanyal

A solution to the Interactive rating component challenge

Preview Code

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?

Code

Please log in to post a comment

Community feedback

BBualdo•540
@BBualdo
Posted over 1 year 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

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