Skip to content
Related Articles

Related Articles

Improve Article

JQuery | How to implement Star-Rating system using RateYo

  • Last Updated : 18 Jan, 2019

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:

  1. 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 -->
      
    <!-- Latest compiled and minified JavaScript -->
  2. Add the required stylesheet in the head section of html page.




    <link rel="stylesheet" type="text/css" href="jquery.rateyo.min.css"
  3. Create a div that will serve as a star rating container.




    <div id="rateYo"></div>
  4. 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>
  5. 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




My Personal Notes arrow_drop_up
Recommended Articles
Page :