Star Rating Feedback Component Using Vanilla JavaScript ⭐⭐⭐⭐⭐

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…

Add HTML

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.

Add JavaScript

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.

Add CSS

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.

Final Product

Before Input

After Input

Let's Conclude. Keep Coding….