JQuery | How to implement Star-Rating system using RateYo

rateYo:- rateYo is a jQuery plugin to create a star-rating widget that allows to fill the background color of the un-rated part of an SVG(scalable vector graphics) based star on mouse hover. It is Fully customizable and scalable to fit any design needs.

Steps to implement Star-Rating system using RateYo:

Installation:

1.  # NPM
     $ npm install rateYo
2. #Bower
     $ bower install rateYo

you can also use the Google-hosted/ Microsoft-hosted content delivery network (CDN) to include a version of jQuery.

<!-- Latest compiled and minified CSS -->

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/rateYo/2.3.2/jquery.rateyo.min.css"> 

<!-- Latest compiled and minified JavaScript -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/rateYo/2.3.2/jquery.rateyo.min.js"></script>

Add the required stylesheet in the head section of html page.
<link rel="stylesheet" type="text/css" href="jquery.rateyo.min.css">
Create a div that will serve as a star rating container.
<div id="rateYo"></div>
Add the required stylesheet in the body section of html page and link the javaScript file of the rateYo plugin to perform various functions.
<script type="text/javascript" src="jquery.min.js"></script>

<script type="text/javascript" src="jquery.rateyo.min.js"></script>

Call a plugin to render a basic star rating into the rateYo div created by you.

$("#rateYo").rateYo();

Example

<!DOCTYPE html> 

<html> 

<head> 

    <title>rating</title> 

    <link rel="stylesheet" 

          type="text/css" 

          href="jquery.rateyo.min.css"> 

</head> 

<body> 

    <div style="width: 600px; margin: 30px auto"> 

        <div id="rateYo"></div> 

    </div> 

    <script type="text/javascript" 

            src="jquery.min.js"></script> 

    <script type="text/javascript" 

            src="jquery.rateyo.min.js"></script> 

    <script> 

        $("#rateYo").rateYo({ 

            rating: 1.5, 

            spacing: "10px", 

            numStars: 5, 

            minValue: 0, 

            maxValue: 5, 

            normalFill: 'black', 

            ratedFill: 'orange', 

        }) 

    </script> 

</body> 

</html>

OUTPUT

Article Tags :

JQuery

Web Technologies

Web-Programs