How to make a star rating with JS ⭐ ⭐ ⭐ ⭐ ⭐
Tags: javascript, css, html
Published: 2021-02-27 15:09:43

🎯    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](https://fontawesome.com/account/cdn). Just copy and paste the CDN  on your HTML head. 


# 1. Add the HTML 

```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

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

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


```javascript
  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*.

```javascript
 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:

```javascript
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
```css

.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](https://codepen.io/Leoschmittk/pen/RwoQYBO)

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

{% codepen https://codepen.io/Leoschmittk/pen/OJbQBgb %}


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