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:

  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.

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

  2. Add the required stylesheet in the head section of html page.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <link rel="stylesheet" type="text/css" href="jquery.rateyo.min.css"

    chevron_right

    
    

  3. Create a div that will serve as a star rating container.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

  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.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

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

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

Example

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


OUTPUT



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :

1


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.