How to Create Star Rating using HTML CSS and JavaScript

In this article, We will see How to Create 5 Star Rating using HTML CSS and JavaScript.

Output:

If You want this 5 star rating then, you can follow these steps:

HTML

<div class="rating-stars">
  <svg class="rating-star" width="36" height="36" viewBox="0 0 56 53" fill="gray" xmlns="http://www.w3.org/2000/svg">
    <path
      d="M30.8532 3.54509C29.9551 0.781158 26.0449 0.781146 25.1468 3.54508L20.538 17.7295C20.4042 18.1415 20.0202 18.4205 19.587 18.4205H4.67262C1.76645 18.4205 0.558112 22.1393 2.90926 23.8475L14.9752 32.614C15.3257 32.8686 15.4724 33.32 15.3385 33.732L10.7297 47.9164C9.83166 50.6803 12.9951 52.9787 15.3462 51.2705L27.4122 42.5041C27.7627 42.2494 28.2373 42.2494 28.5878 42.5041L40.6538 51.2705C43.0049 52.9787 46.1683 50.6803 45.2703 47.9164L40.6615 33.732C40.5276 33.32 40.6743 32.8686 41.0248 32.614L53.0907 23.8475C55.4419 22.1393 54.2336 18.4205 51.3274 18.4205H36.413C35.9798 18.4205 35.5958 18.1415 35.462 17.7295L30.8532 3.54509Z" />
  </svg>
  <svg class="rating-star" width="36" height="36" viewBox="0 0 56 53" fill="gray" xmlns="http://www.w3.org/2000/svg">
    <path
      d="M30.8532 3.54509C29.9551 0.781158 26.0449 0.781146 25.1468 3.54508L20.538 17.7295C20.4042 18.1415 20.0202 18.4205 19.587 18.4205H4.67262C1.76645 18.4205 0.558112 22.1393 2.90926 23.8475L14.9752 32.614C15.3257 32.8686 15.4724 33.32 15.3385 33.732L10.7297 47.9164C9.83166 50.6803 12.9951 52.9787 15.3462 51.2705L27.4122 42.5041C27.7627 42.2494 28.2373 42.2494 28.5878 42.5041L40.6538 51.2705C43.0049 52.9787 46.1683 50.6803 45.2703 47.9164L40.6615 33.732C40.5276 33.32 40.6743 32.8686 41.0248 32.614L53.0907 23.8475C55.4419 22.1393 54.2336 18.4205 51.3274 18.4205H36.413C35.9798 18.4205 35.5958 18.1415 35.462 17.7295L30.8532 3.54509Z" />
  </svg>
  <svg class="rating-star" width="36" height="36" viewBox="0 0 56 53" fill="gray" xmlns="http://www.w3.org/2000/svg">
    <path
      d="M30.8532 3.54509C29.9551 0.781158 26.0449 0.781146 25.1468 3.54508L20.538 17.7295C20.4042 18.1415 20.0202 18.4205 19.587 18.4205H4.67262C1.76645 18.4205 0.558112 22.1393 2.90926 23.8475L14.9752 32.614C15.3257 32.8686 15.4724 33.32 15.3385 33.732L10.7297 47.9164C9.83166 50.6803 12.9951 52.9787 15.3462 51.2705L27.4122 42.5041C27.7627 42.2494 28.2373 42.2494 28.5878 42.5041L40.6538 51.2705C43.0049 52.9787 46.1683 50.6803 45.2703 47.9164L40.6615 33.732C40.5276 33.32 40.6743 32.8686 41.0248 32.614L53.0907 23.8475C55.4419 22.1393 54.2336 18.4205 51.3274 18.4205H36.413C35.9798 18.4205 35.5958 18.1415 35.462 17.7295L30.8532 3.54509Z" />
  </svg>
  <svg class="rating-star" width="36" height="36" viewBox="0 0 56 53" fill="gray" xmlns="http://www.w3.org/2000/svg">
    <path
      d="M30.8532 3.54509C29.9551 0.781158 26.0449 0.781146 25.1468 3.54508L20.538 17.7295C20.4042 18.1415 20.0202 18.4205 19.587 18.4205H4.67262C1.76645 18.4205 0.558112 22.1393 2.90926 23.8475L14.9752 32.614C15.3257 32.8686 15.4724 33.32 15.3385 33.732L10.7297 47.9164C9.83166 50.6803 12.9951 52.9787 15.3462 51.2705L27.4122 42.5041C27.7627 42.2494 28.2373 42.2494 28.5878 42.5041L40.6538 51.2705C43.0049 52.9787 46.1683 50.6803 45.2703 47.9164L40.6615 33.732C40.5276 33.32 40.6743 32.8686 41.0248 32.614L53.0907 23.8475C55.4419 22.1393 54.2336 18.4205 51.3274 18.4205H36.413C35.9798 18.4205 35.5958 18.1415 35.462 17.7295L30.8532 3.54509Z" />
  </svg>
  <svg class="rating-star" width="36" height="36" viewBox="0 0 56 53" fill="gray" xmlns="http://www.w3.org/2000/svg">
    <path
      d="M30.8532 3.54509C29.9551 0.781158 26.0449 0.781146 25.1468 3.54508L20.538 17.7295C20.4042 18.1415 20.0202 18.4205 19.587 18.4205H4.67262C1.76645 18.4205 0.558112 22.1393 2.90926 23.8475L14.9752 32.614C15.3257 32.8686 15.4724 33.32 15.3385 33.732L10.7297 47.9164C9.83166 50.6803 12.9951 52.9787 15.3462 51.2705L27.4122 42.5041C27.7627 42.2494 28.2373 42.2494 28.5878 42.5041L40.6538 51.2705C43.0049 52.9787 46.1683 50.6803 45.2703 47.9164L40.6615 33.732C40.5276 33.32 40.6743 32.8686 41.0248 32.614L53.0907 23.8475C55.4419 22.1393 54.2336 18.4205 51.3274 18.4205H36.413C35.9798 18.4205 35.5958 18.1415 35.462 17.7295L30.8532 3.54509Z" />
  </svg>

</div>

CSS

  .rating-star {
      fill: gray;
      cursor: pointer;
  }

  .selected {
     fill: orangered;
  }

Javascript

// Get all star elements
const stars = document.querySelectorAll('.rating-star');
stars.forEach((star, index) => {
  star.addEventListener('click', () => {
    for (let i = 0; i <= index; i++) {
      stars[i].classList.add('selected');
    }
    for (let i = index + 1; i < stars.length; i++) {
      stars[i].classList.remove('selected');
    }
  });
});

Note: If you want change "color" for rating star then, you can change it in CSS code:

.rating-star {
  fill: gray; //you can change it here.
}

.selected {
   fill: orangered; //you can change it here.
}

Note: If you want full snippet code for 5 star rating using HTML, CSS and JavaScript:

<!DOCTYPE html>
<html>

<head>
  <style>
    .rating-star {
      fill: gray;
      cursor: pointer;
    }

    .selected {
      fill: orangered;
    }
  </style>
</head>

<body>
  <center>
    <h1>5 Star Rating</h1>
    <div class="rating-stars">
      <svg class="rating-star" width="36" height="36" viewBox="0 0 56 53" fill="gray"
        xmlns="http://www.w3.org/2000/svg">
        <path
          d="M30.8532 3.54509C29.9551 0.781158 26.0449 0.781146 25.1468 3.54508L20.538 17.7295C20.4042 18.1415 20.0202 18.4205 19.587 18.4205H4.67262C1.76645 18.4205 0.558112 22.1393 2.90926 23.8475L14.9752 32.614C15.3257 32.8686 15.4724 33.32 15.3385 33.732L10.7297 47.9164C9.83166 50.6803 12.9951 52.9787 15.3462 51.2705L27.4122 42.5041C27.7627 42.2494 28.2373 42.2494 28.5878 42.5041L40.6538 51.2705C43.0049 52.9787 46.1683 50.6803 45.2703 47.9164L40.6615 33.732C40.5276 33.32 40.6743 32.8686 41.0248 32.614L53.0907 23.8475C55.4419 22.1393 54.2336 18.4205 51.3274 18.4205H36.413C35.9798 18.4205 35.5958 18.1415 35.462 17.7295L30.8532 3.54509Z" />
      </svg>
      <svg class="rating-star" width="36" height="36" viewBox="0 0 56 53" fill="gray"
        xmlns="http://www.w3.org/2000/svg">
        <path
          d="M30.8532 3.54509C29.9551 0.781158 26.0449 0.781146 25.1468 3.54508L20.538 17.7295C20.4042 18.1415 20.0202 18.4205 19.587 18.4205H4.67262C1.76645 18.4205 0.558112 22.1393 2.90926 23.8475L14.9752 32.614C15.3257 32.8686 15.4724 33.32 15.3385 33.732L10.7297 47.9164C9.83166 50.6803 12.9951 52.9787 15.3462 51.2705L27.4122 42.5041C27.7627 42.2494 28.2373 42.2494 28.5878 42.5041L40.6538 51.2705C43.0049 52.9787 46.1683 50.6803 45.2703 47.9164L40.6615 33.732C40.5276 33.32 40.6743 32.8686 41.0248 32.614L53.0907 23.8475C55.4419 22.1393 54.2336 18.4205 51.3274 18.4205H36.413C35.9798 18.4205 35.5958 18.1415 35.462 17.7295L30.8532 3.54509Z" />
      </svg>
      <svg class="rating-star" width="36" height="36" viewBox="0 0 56 53" fill="gray"
        xmlns="http://www.w3.org/2000/svg">
        <path
          d="M30.8532 3.54509C29.9551 0.781158 26.0449 0.781146 25.1468 3.54508L20.538 17.7295C20.4042 18.1415 20.0202 18.4205 19.587 18.4205H4.67262C1.76645 18.4205 0.558112 22.1393 2.90926 23.8475L14.9752 32.614C15.3257 32.8686 15.4724 33.32 15.3385 33.732L10.7297 47.9164C9.83166 50.6803 12.9951 52.9787 15.3462 51.2705L27.4122 42.5041C27.7627 42.2494 28.2373 42.2494 28.5878 42.5041L40.6538 51.2705C43.0049 52.9787 46.1683 50.6803 45.2703 47.9164L40.6615 33.732C40.5276 33.32 40.6743 32.8686 41.0248 32.614L53.0907 23.8475C55.4419 22.1393 54.2336 18.4205 51.3274 18.4205H36.413C35.9798 18.4205 35.5958 18.1415 35.462 17.7295L30.8532 3.54509Z" />
      </svg>
      <svg class="rating-star" width="36" height="36" viewBox="0 0 56 53" fill="gray"
        xmlns="http://www.w3.org/2000/svg">
        <path
          d="M30.8532 3.54509C29.9551 0.781158 26.0449 0.781146 25.1468 3.54508L20.538 17.7295C20.4042 18.1415 20.0202 18.4205 19.587 18.4205H4.67262C1.76645 18.4205 0.558112 22.1393 2.90926 23.8475L14.9752 32.614C15.3257 32.8686 15.4724 33.32 15.3385 33.732L10.7297 47.9164C9.83166 50.6803 12.9951 52.9787 15.3462 51.2705L27.4122 42.5041C27.7627 42.2494 28.2373 42.2494 28.5878 42.5041L40.6538 51.2705C43.0049 52.9787 46.1683 50.6803 45.2703 47.9164L40.6615 33.732C40.5276 33.32 40.6743 32.8686 41.0248 32.614L53.0907 23.8475C55.4419 22.1393 54.2336 18.4205 51.3274 18.4205H36.413C35.9798 18.4205 35.5958 18.1415 35.462 17.7295L30.8532 3.54509Z" />
      </svg>
      <svg class="rating-star" width="36" height="36" viewBox="0 0 56 53" fill="gray"
        xmlns="http://www.w3.org/2000/svg">
        <path
          d="M30.8532 3.54509C29.9551 0.781158 26.0449 0.781146 25.1468 3.54508L20.538 17.7295C20.4042 18.1415 20.0202 18.4205 19.587 18.4205H4.67262C1.76645 18.4205 0.558112 22.1393 2.90926 23.8475L14.9752 32.614C15.3257 32.8686 15.4724 33.32 15.3385 33.732L10.7297 47.9164C9.83166 50.6803 12.9951 52.9787 15.3462 51.2705L27.4122 42.5041C27.7627 42.2494 28.2373 42.2494 28.5878 42.5041L40.6538 51.2705C43.0049 52.9787 46.1683 50.6803 45.2703 47.9164L40.6615 33.732C40.5276 33.32 40.6743 32.8686 41.0248 32.614L53.0907 23.8475C55.4419 22.1393 54.2336 18.4205 51.3274 18.4205H36.413C35.9798 18.4205 35.5958 18.1415 35.462 17.7295L30.8532 3.54509Z" />
      </svg>

    </div>
  </center>


  <script>
    // Get all star elements
        const stars = document.querySelectorAll('.rating-star');
        stars.forEach((star, index) => {
            star.addEventListener('click', () => {
                for (let i = 0; i <= index; i++) {
                    stars[i].classList.add('selected');
                }
                for (let i = index + 1; i < stars.length; i++) {
                    stars[i].classList.remove('selected');
                }
            });
        });
  </script>

</body>

</html>

Techstackkit

How to Create Star Rating using HTML CSS and JavaScript

Output:

HTML

CSS

Javascript

Happy Coding 😎