Interactive Rating Component using Bootstrap CSS

Hey,

Your solution looks good and it responds appropriately to the screen size which is great!

For your question about how to deselect a button when another is clicked, instead of using the <button> element for the ratings from 1-5, you can use multiple input[type="radio"] elements and give them the same name attribute. This basically allows only one item to be checked at a time.

I hope that helps answer your question :)

A good solution to your problem is already provided. There is another solution to this issue, if you want to use <button>.

• In your CSS create styles for a class "selected-btn"
• Set the styles of this class to the ones you selected in your js code (background-color and color). And remove them from js code.
• Now whenever a btn is clicked, first loop through all the buttons and remove 'selected-btn' class from them.
• After this add the 'selected-btn' class to the clicked button.

Hope this helps. Feel free to ask any questions.