Create a file rating component. Demo
Hint If you notice the selected stars growing larger than the other stars, it is simply an effect of adding a 3px border so that when you apply a color you can still see the stars clearly. Css:

    -webkit-text-stroke-width: 3px;
    -webkit-text-stroke-color: black;

• You need to add a free, open-source, font library called font-awesome. Add the css file from their cdn (content delivery network) or use this stylesheet you should be able to create basic star icons with <i class="far fa-star"></i> and stuffed star icons with <i class="fas fa-star"></i>

• Acceptance Criteria All stars mentioned here is an example. Please do not hardcode.

  • Hover over the 4th star. Go straight down out of the div (so that all 4 stars are still selected). Go straight up on the 2nd star, then go straight down. Only stars 1 and 2 should be selected.
  • Click on the 4th star. When you hover over the other stars (without leaving the div), the current selection should not change.
  • Click on the 4th star. Then click on the 2nd star. Only stars 1 and 2 should be selected.
  • Click on the 4th star. When you move mouse out of the stars container and move mouse back in, you should be able to resume selection as normal.

• Steps and Points

  • (10 points) Get 5 stars to show up on the HTML.
  • (20 points) Create a class function for each star, replace 5 stars in step one (html) by creating an array of stars objects.
  • (35 points) Add hover functionality to highlight the appropriate stars.
  • (35 points) Solve click functionality and text.