Product Rating - JavaScript

Ratings and reviews are an essential part of your online presence. They can drive traffic, boost sales and increase the trust visitors have in your website. That's why most of the popular eCommerce stores use ratings and reviews for their products.

If you don't feel like creating your own custom rating plugin, or would rather just save time and energy by using an already existing one, then you've use this.

A Product Rating in JavaScript is a script that allows users to rate a product on a scale (such as 1-5 stars) and display the average rating of a product. The script typically retrieves the rating information from a data source (such as an API or a JSON file) and uses JavaScript to dynamically update the rating display based on user interactions. This script can be used in e-commerce websites, online shops, and other web applications where a product rating system is required.

The script generally includes the following elements:

Variables to store the rating information and the current rating
Event handlers (e.g. on star click) to update the current rating and call the rating function
A function to calculate the average rating and update the rating display on the page
Elements (e.g. stars) for the user to rate the product
The ability to prevent the user from rating the same product multiple times
The ability to show the number of ratings and average rating

In addition, the script should be able to handle dynamic data changes, such as new ratings being added, without breaking the rating functionality. It can also have the ability to allow users to submit reviews along with the ratings. In summary, a Product Rating in JavaScript provides an interactive and informative way for users to rate products, and it can be easily integrated into e-commerce websites, online shops, and other web applications where a product rating system is required.

Source Code

Example - 1

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <div class="container">
    <button class="star">&#9734;</button>
    <button class="star">&#9734;</button>
    <button class="star">&#9734;</button>
    <button class="star">&#9734;</button>
    <button class="star">&#9734;</button>
    <p class="current-rating">0 of 5</p>
</div>
  <script src="js/script.js"></script>
</body>
</html>

css/style.css

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body{
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
}
.container{
  background-color: aliceblue;
}
.star{
  border:none;
  background-color: unset;
  color:goldenrod;
  font-size: 3rem;
}

p{
  text-align: center;
}

This script is for a product rating system.

The script starts by fetching all the necessary elements from the HTML page, such as the stars used for rating and the element that will display the current rating.

The script then adds event listeners to each star, so that when a star is clicked, the script updates the current rating by extracting the index of the clicked star and adding 1 to it (since the index starts at 0) and it also updates the current rating element to show the selected rating out of the total rating.

The script also loops through each star again and checks the current rating with the index of the loop, if the current rating is greater than or equal to the index of the loop +1, the script adds a full star character to that star, if not, it adds an empty star character.

Overall, this script allows users to rate a product on a scale of 1 to 5 and display the current rating. It also updates the star display to reflect the current rating. This script can be used in e-commerce websites, online shops, and other web applications where a product rating system is required.

js/script.js

const stars=document.querySelectorAll('.star');
const current_rating=document.querySelector('.current-rating');

stars.forEach((star,index)=>{
  star.addEventListener('click',()=>{

    let current_star=index+1;
    current_rating.innerText=`${current_star} of 5`;

    stars.forEach((star,i)=>{
        if(current_star>=i+1){
          star.innerHTML='&#9733;';
        }else{
          star.innerHTML='&#9734;';
        }
    });

  });
});

Output

Live Preview

Example - 2

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="css/style2.css">
</head>
<body>
    <div class="rating">
      <input type="radio" name="rating"  id="star10" value="5">
      <label for="star10" class="full"></label>

      <input type="radio" name="rating"  id="star9" value="4.5">
      <label for="star9" class="half"></label>

      <input type="radio" name="rating"  id="star8" value="4">
      <label for="star8" class="full"></label>

      <input type="radio" name="rating"  id="star7" value="3.5">
      <label for="star7" class="half"></label>

      <input type="radio" name="rating"  id="star6" value="3">
      <label for="star6" class="full"></label>

      <input type="radio" name="rating"  id="star5" value="2.5">
      <label for="star5" class="half"></label>

      <input type="radio" name="rating"  id="star4" value="2">
      <label for="star4" class="full"></label>

      <input type="radio" name="rating"  id="star3" value="1.5">
      <label for="star3" class="half"></label>

      <input type="radio" name="rating"  id="star2" value="1">
      <label for="star2" class="full"></label>

      <input type="radio" name="rating"  id="star1" value="0.5">
      <label for="star1" class="half"></label>
    </div>
    <p class="rating-value">Your Feedback</p>
  <script src="js/script2.js"></script>
</body>
</html>

css/style2.css

@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css);
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body{
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.rating>input{
  display: none;
}

.rating>label::before{
  content: '\f005';
  font-family: FontAwesome;
  margin: 5px;
  font-size: 1.5rem;
  display: inline-block;
  cursor: pointer;
}

.rating>.half::before{
  content: '\f089';
  position: absolute;
}

.rating>label{
  color:#ddd;
  float: right;
  transform: 0.2s;
}

.rating > input:checked ~ label,
.rating:not(:checked) > label:hover,
.rating:not(:checked) > label:hover ~ label
{
  color:gold;
}

This script is for a product rating system.

The script starts by fetching all the necessary elements from the HTML page, such as the radio buttons used for rating and the element that will display the current rating.

The script then adds event listeners to each radio button, so that when a radio button is clicked, the script updates the current rating by extracting the value of the clicked radio button and it also updates the current rating element to show the selected rating out of the total rating.

Overall, this script allows users to rate a product on a scale and display the current rating. It also updates the radio button display to reflect the current rating. This script can be used in e-commerce websites, online shops, and other web applications where a product rating system is required.

This script is very similar to the previous one, the main difference is that in the previous script the stars were used as a rating button, whereas in this script radio buttons are used.

js/script2.js

const radioElement=document.querySelectorAll('input');

const rating=document.querySelector('.rating-value');

radioElement.forEach((radio)=>{
  radio.addEventListener('click',()=>{
      let value=radio.value;
      rating.innerText=`${value} of 5`;
  });
});

Output

Live Preview