Interactive Rating Component

Hello @devhnry. Congratulations on completing this challenge!!!🎉

I have few tips you might be interested in to improve your solution.

• The star icon is a decorative image and adding aria-hidden: true will make the image be ignored by screen readers.
• To make rating section more accessible you can use semantic HTML tags like form ,fieldset, label, and input.

When I built this challenge, I used this HTML structure below for each of the five ratings.

<form>
   <fieldset>
       <label class="rating-btn">
         <input type="radio" class="visually-hidden" name="rating" value="1" />
         <span class="rating-value">1 <span class="visually-hidden">1 star</span></span>
       </label>
    </fieldset>
</form>

The visually-hidden CSS class hides content on the website but content is available for screen readers. I use this visually-hidden class by inclusively-hidden article by Scott O'hara.

It is bad practice to write content in uppercase in the HTML file and when you can use the CSS property text-transform: uppercase;

<button class="btn" type="submit">SUBMIT</button>

More info📚:

Why you shouldn’t write your content in Uppercase, instead use CSS.

Here is my solution to this challenge: Interactive rating component

Hope this helps you and need anything clarified I would be glad to help just let me know✌🏼

Looks super good! The design is a bit larger and has some more spacing around some of the elements. But overall this is really good.