5 Star Rating in JavaScript

Submitted by alpha_luna on Friday, June 17, 2016 - 16:40.

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. Creating 5 stars to rate as you can see in the image below. Result

Here's the source code in the image above.

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

Code for the CSS

    #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

812 views