How To Make 5 Star Rating Using Javascript

Submitted by alpha_luna on Saturday, May 21, 2016 - 15:25.

5 Star Rating

This simple script will show you how to create 5 Star Rating in JavaScript. This can be useful to know the opinion of the audience or customer of the products or services. The 5 Star Rating is very common on the internet you can see this in any sites. You can insert this source code to your Ecommerce Website.

HTML Source Code

    <div id="rateMe" title="Rate Me!">
    <a onclick="rateIt(this)" id="_1" title="Poor!" onmouseover="rating(this)" onmouseout="off(this)"></a>
    <a onclick="rateIt(this)" id="_2" title="Not So Hot!" onmouseover="rating(this)" onmouseout="off(this)"></a>
    <a onclick="rateIt(this)" id="_3" title="OK!" onmouseover="rating(this)" onmouseout="off(this)"></a>
    <a onclick="rateIt(this)" id="_4" title="Efficient!" onmouseover="rating(this)" onmouseout="off(this)"></a>
    <a onclick="rateIt(this)" id="_5" title="Very Efficient!" onmouseover="rating(this)" onmouseout="off(this)"></a>
  </div>
   <span id="rateStatus"></span>
    <span id="ratingSaved"></span>

CSS Style

    #rateMe{
        clear:both;  
        margin-top:100px;
        }
    #rateMe li{
        float:left; 
        list-style:none;
        }
    #rateMe li a:hover,
    #rateMe .on{
        background:url(full-star.png) no-repeat;
        }
    #rateMe a{
        float:left;
        background:url(empty-star.png) no-repeat;
        width:50px; 
        height:50px;
        }
    #rateStatus{
        width:150px; 
        height:50px;
        font:bold 20px arial;
        color:red; 
        float:left;
        clear:both;
        margin-top:10px;
        }
    #ratingSaved{
        display:none;
        }
    .saved{
        color:red; 
        }

So what can you say about this work? Share your thoughts in the comment section below or email me at [email protected]. Practice Coding. Thank you very much.

Add new comment

215 views