Rating in CSS and JavaScript

      No Comments on Rating in CSS and JavaScript

Rating in CSS and JavaScript:


See the Pen Rating by scanfcode (@scanfcode) on CodePen.


Rating in CSS and JavaScript:

HTML:

<div class="rating-container">
    <div class="star">  <span class="glyphicon glyphicon-star"></span></div>
    <div class="star">  <span class="glyphicon glyphicon-star"></span></div>
    <div class="star">  <span class="glyphicon glyphicon-star"></span></div>
    <div class="star">  <span class="glyphicon glyphicon-star"></span></div>
    <div class="star">  <span class="glyphicon glyphicon-star"></span></div>
</div>

CSS:

.rating-container
{
  padding:1%;
  height:45px;
}
.star
{
  display:inline;float:left;width:40px;height:30px;
}
.glyphicon-star
{
 font-size:28px;
}
.active
{
  color:orange;
}

JavaScript:

<script>
$('.rating-container .star').click(function () {
    $('.rating-container .star').removeClass('active');
    $(this).prevAll('.star').addBack().addClass('active');
});
</script>

Leave a Reply

Your email address will not be published. Required fields are marked *