I got the idea to build this from one of Amazon’s Front-End interview experiences and also had to replicate something similar in my internship project. Let's cut the chase and start…
You would see lots of tutorials using icons or span or buttons for creating star components but we will be using radio buttons because it was easy to control the state.
So starArr is an array that consists of all the radio buttons and its done using the spread operator (…), apart from this to access the radio button we will add an event listener to our buttons, and then goes the logic. In place of findIndex() feel free to use indexOf() function.
Now we have given functionality to our application so let's do some styling.
We would be manipulating the original styling of a radio button. To do so we have to set webkit-appearance to none this removes the original appearance of the radio button and then by using the content attribute we set our desired icon.
Let's Conclude. Keep Coding….