Using 'star-rating.js' for Star Rating with JavaScript Library

Description:

star-rating.js is a small JavaScript library to generate a customizable, progressively enhancement star rating control from a regular select box with numeric values.

How to use it:

1. Create a select box for your star rating system.

<select class="star-rating">
    <option value="">Select a rating</option>
    <option value="5">Excellent</option>
    <option value="4">Very Good</option>
    <option value="3">Average</option>
    <option value="2">Poor</option>
    <option value="1">Terrible</option>
</select>

2. Install & download the star-rating.js.

# Yarn
$ yarn add star-rating.js

# NPM
$ npm install star-rating.js --save

3. Load necessary JavaScript and CSS files in the document.

<link href="dist/star-rating.css" rel="stylesheet" />
<script src="dist/star-rating.min.js"></script>

4. Initialize the library on the select box and done.

var starRatingControl = new StarRating( '.star-rating' );

5. Set the maximum number of stars allowed to select. Default: 10.

var starRatingControl = new StarRating('.star-rating',{
    maxStars: 5
});

6. Determine whether or not to show the label next to the star rating control. Default: true.

var starRatingControl = new StarRating('.star-rating',{
    showText: false
});

7. Determine whether or not to clear the rating by clicking on the selected stars. Default: true.

var starRatingControl = new StarRating('.star-rating',{
    showText: false
});

8. More configuration options.

var starRatingControl = new StarRating('.star-rating',{
    classname: "gl-star-rating"
    initialText: "Select a Rating"
});

9. You can also pass the options object to the data-options in your select element.

<select class="star-rating" data-options='{"clearable":false, "showText":false}'>
  ...
</select>

10. Destroy & re-init the star rating control.

starRatingControl.destroy();
starRatingControl.rebuild();

11. Override the default CSS styles in the star-rating.scss.

$star-rating-defaults: (
  base-classname : 'gl-star-rating',
  base-display   : block,
  base-height    : 26px,
  font-size      : 0.8em,
  font-weight    : 600,
  parent         : '',
  star-empty     : url(../img/star-empty.svg),
  star-full      : url(../img/star-full.svg),
  star-half      : url(../img/star-half.svg),
  star-size      : 24px,
  text-background: #1a1a1a,
  text-color     : #fff,
);

Thank you for reading! Please share if you liked it!

#javascript #css #jQuery #Star Rating