JQuery | How to implement Star-Rating system using RateYo - GeeksforGeeks

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:
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();
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>
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"> 
<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>
<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>
<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();
$("#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
Web-Programs
JQuery
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
How to prevent Body from scrolling when a modal is opened using jQuery ?
jQuery | ajax() Method
How to get the value in an input text box using jQuery ?
Difference Between JavaScript and jQuery
QR Code Generator using HTML, CSS and jQuery
Roadmap to Become a Web Developer in 2022
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?