🎯 Today you will learn how to make a rating using HTML5, CSS3 and JavaScript.

💡 It's easy to understand if you follow me.

📌 The stars icons are from Font Awesome. Just copy and paste the CDN on your HTML head.

1. Add the HTML

   <div class="rating">
         <i class="rating__star far fa-star"></i>
         <i class="rating__star far fa-star"></i>
         <i class="rating__star far fa-star"></i>
         <i class="rating__star far fa-star"></i>
         <i class="rating__star far fa-star"></i>
   </div>

This is the skeleton of our app. It has the rating father that has 5 non-completed stars. Let's make it completable.

2. Add the script

   const ratingStars = [...document.getElementsByClassName("rating__star")];

First off, we put every single star in the array ratingStars

  function executeRating(stars) {
   const starClassActive = "rating__star fas fa-star";
   const starClassInactive = "rating__star far fa-star";
   const starsLength = stars.length;
   let i;
   }

Then we declare the function executeRating that will receive the array of stars as argument. Declare as well starClassActive and starClassUnactive that keep the classes that differ the star fulfilled from the not fulfilled. Also, soon there is a loop that will use starsLength and i, declared outside the loop in itself. Being outside means that the loop are not going to check every time the length of stars.

 stars.map((star) => {
      star.onclick = () => {
         i = stars.indexOf(star);

         if (star.className===starClassInactive) {        
            for (i; i >= 0; --i) stars[i].className = starClassActive;
         } else {
            for (i; i < starsLength; ++i) stars[i].className = starClassInactive;
         }
      };
   });

Then it comes the magic.

• We map the array of stars and check for clicks on each one. If occur an click on the star we call an anonymous functions to fulfill stars.
• i receives the index of the star clicked.
• The first if statement will check if the star clicked has the class that means it is unfulfilled.
• If so, a loop is executed. We have the i of the star clicked and the loop will fulfill all the stars before it.
• The else statement stands for check if the star clicked is fulfilled, cause if so all the stars above the clicked star will receive an class for inactive (unfulfilled).

If we click on the fourth star i receives 4 and these 4 stars will receive, in turn, the class of active (fulfilled). Then we decide to click on the second star, that is, decrease the rating, and the else is used unfulfilling the stars from 2 until 5, the max rating.

Finally, of course, you invoke the function to really make it works. The whole script is the following:

const ratingStars = [...document.getElementsByClassName("rating__star")];

function executeRating(stars) {
  const starClassActive = "rating__star fas fa-star";
  const starClassInactive = "rating__star far fa-star";
  const starsLength = stars.length;
  let i;
  stars.map((star) => {
    star.onclick = () => {
      i = stars.indexOf(star);

      if (star.className===starClassInactive) {
        for (i; i >= 0; --i) stars[i].className = starClassActive;
      } else {
        for (i; i < starsLength; ++i) stars[i].className = starClassInactive;
      }
    };
  });
}
executeRating(ratingStars);

3. Add some style

.rating {
   width: 180px;
}

.rating__star {
   cursor: pointer;
   color: #dabd18b2;
}

A pitch of CSS makes the stars yellow as it has to be.

Windup

🔗 You can check the result of the code above on code pen by clicking: link

Also, there is another pen that I made with the same rating but adding the label, the amount of stars fulfilled:

✔️ And that's it. I hope you liked or learn something. Farewell 👍