JSFiddle - React, Tailwind, and code Playground
by Nikhil krishnan
HTML
<div class="star-rating-outer">
<p class="votetext">Thank you for your Vote</p>
<div class="star"> <span class="rate1 active-static"></span>
<span class="rate2 active-static"></span>
<span class="rate3 active-static"></span>
<span class="rate4 active-static"></span>
<span class="rate5 active-static qtr"></span>
</div>
<h5><span class="outputCnt">4.55</span>/5 (96.<span class="output">8</span>2%) 39762<span class="output">3</span></h5>
<h6>Vote</h6>
</div>
CSS
.star-rating-outer {
width:200px;
margin:0 auto;
text-align:center;
padding: 50px 0;
position: relative;
}
.star-rating-outer .star {
position: relative;
}
.star-rating-outer .votetext {
display: none;
color: green;
font-size: 12px;
position: absolute;
width: 100%;
margin-left: 0;
top:5px;
}
.star-rating-outer .star.tHide:after {
width: 100%;
height:25px;
position: absolute;
left: 0;
top: 0;
background: transparent;
display: block;
content:"";
}
.star-rating-outer .star span {
display: inline-block;
background: url("../images/star1.png") no-repeat left top #ccc;
width:22px;
cursor: pointer;
height:21px;
position: relative;
}
.star-rating-outer .star span.active-static:after, .star-rating-outer .star span:hover:after, .star-rating-outer .star .star-active:after, .star-rating-outer .star span.star-active:hover:after, .star-rating-outer .star span.active:after {
display: inline-block;
background: url("../images/star2.png") no-repeat left top red;
width:22px;
height:21px;
position: absolute;
content:" ";
left: 0;
top:0;
}
.star-rating-outer .star .active-static.qtr:after {
width:11px;
}
.star-rating-outer h6 {
font-size:14px;
color:#333;
font-weight:bold;
}
.star-rating-outer h5 {
font-size:14px;
color:#333;
font-weight:bold;
}
JavaScript
// Star Rating
$(function() {
// Rating
$('.star span').click(function() {
$('.star-rating-outer .votetext').fadeIn();
});
$('.star .rate1').click(function() {
$(this).addClass('star-active');
$('.output').html(function(i, val) { return val*1+1 });
$('.outputCnt').html(function(i, val) { return val*1+1 });
$('.star').addClass('tHide');
});
$('.star .rate2').click(function() {
$('.star .rate1').addClass('star-active');
$(this).addClass('star-active');
$('.output').html(function(i, val) { return val*1+1 });
$('.outputCnt').html(function(i, val) { return val*1+2 });
$('.star').addClass('tHide');
});
$('.star .rate3').click(function() {
$('.star .rate1').addClass('star-active');
$('.star .rate2').addClass('star-active');
$(this).addClass('star-active');
$('.output').html(function(i, val) { return val*1+1 });
$('.outputCnt').html(function(i, val) { return val*1+3 });
$('.star').addClass('tHide');
});
$('.star .rate4').click(function() {
$('.star .rate1').addClass('star-active');
$('.star .rate2').addClass('star-active');
$('.star .rate3').addClass('star-active');
$(this).addClass('star-active');
$('.output').html(function(i, val) { return val*1+1 });
$('.outputCnt').html(function(i, val) { return val*1+4 });
$('.star').addClass('tHide');
});
$('.star .rate5').click(function() {
$('.star .rate1').addClass('star-active');
$('.star .rate2').addClass('star-active');
$('.star .rate3').addClass('star-active');
$('.star .rate4').addClass('star-active');
$(this).addClass('star-active');
$('.output').html(function(i, val) { return val*1+1 });
$('.outputCnt').html(function(i, val) { return val*1+5 });
$('.star').addClass('tHide');
});
$(".star .rate2").hover( function(){
$('.star .rate1').addClass('active');
}, function(){
$('.star .rate1').removeClass('active');
});
$(".star .rate3").hover( function(){
$('.star...