Create A Simple Star Rating System Using JavaScript

Star Rating System is a small JavaScript library to create a customizable star rating control and gradually improve it from a regular checkbox with numeric values.

Star Rating System only for ranking products, services, or articles on your webpage.

Features:

Partial classification support.
Assigned minimum / maximum / initial rating values.
Read-only mode.
Custom classification codes. Not just the stars.

How to make use of it:

1. Load the primary JavaScript within the doc and we’re ready to go.

<script src="./index.js"></script>

2. Create a container during which you need to insert the scoring system.

<div class="starRatingContainer">
  <div class="className"></div>
</div>
<div class="ratingHolder"></div>

3. Set up the star rating system.

var settings =[{

    // initial rating value
    "rating":"4.3", 

    // max rating value
    "maxRating":"5", 

    // min rating value
    "minRating":"0.5", 

    // readonly mode?
    "readOnly":"no", 

    // custom rating symbols here
    "starImage":"./star.png", 
    "emptyStarImage":"./starbackground.png", 

    // symbol size
    "starSize":"16", 

    // step size for fractional rating
    "step":"0.5"

}];

4. Render the star rating system on the web page.

rateSystem("ratingSystem", mySettings, function(rating, ratingTargetElement){
  ratingTargetElement.parentElement.parentElement.getElementsByClassName("ratingHolder")[0].innerHTML = rating;
});

Tiny Star Rating System In Vanilla JavaScript, 5 star rating javascript, Star Rating System Plugin/Github