Laravel star ratings with font awesome

Question

I am retrieving an average rating on my batsmen and currently displaying it as the number itself out of 5. I want to replace the number of the average rating with font awesome stars, so if its 4.63/5 then show 4.63 font awesome stars out of 5 rather than the number i'm currently showing. What is the best way to go about this?

Answer 1

I use this jquery library to add a star rating system when needed.

1. The Source: I include the jquery and style in a partial view that I only add to pages with the star system.

   <script src="{{ asset('/vendor/Simple-jQuery-Star-Rating-System-For-Bootstrap-3/js/star-rating.js') }}" type="text/javascript"></script> <link href="{{ asset('vendor/Simple-jQuery-Star-Rating-System-For-Bootstrap-3/css/star-rating.css')}}" media="all" rel="stylesheet" type="text/css" />

2. Form Item: Then I add it to my page using the

   <div class="form-group"> <label for="text" class="col-sm-2 control-label">Rating:</label> <input name='rate' id="input-2c" class="rating" min="0" max="5" step="0.5" data-size="sm" data-symbol="&#xf005;" data-glyphicon="false" data-rating-class="rating-fa"> </div>

To set a default value, or to show the existing value, you just need to add the value="" attribute to the input. The plugin does the rest.

Answer 2

For example, only with percent:

<div class="star-rating" title="75%">
    <div class="back-stars">
        <i class="fa fa-star" aria-hidden="true"></i>
        <i class="fa fa-star" aria-hidden="true"></i>
        <i class="fa fa-star" aria-hidden="true"></i>
        <i class="fa fa-star" aria-hidden="true"></i>
        <i class="fa fa-star" aria-hidden="true"></i>

        <div class="front-stars" style="width: 75%">
            <i class="fa fa-star" aria-hidden="true"></i>
            <i class="fa fa-star" aria-hidden="true"></i>
            <i class="fa fa-star" aria-hidden="true"></i>
            <i class="fa fa-star" aria-hidden="true"></i>
            <i class="fa fa-star" aria-hidden="true"></i>
        </div>
    </div>
</div>  

Style for star rating

/*---------- star rating ----------*/
.star-rating {
    display: flex;
    align-items: center;
    font-size: 3em;
    justify-content: center;
    margin-top: 50px;
}
.back-stars {
    display: flex;
    color: #bb5252;
    position: relative;
    text-shadow: 4px 4px 10px #843a3a;
}
.front-stars {
    display: flex;
    color: #FFBC0B;
    overflow: hidden;
    position: absolute;
    text-shadow: 2px 2px 5px #d29b09;
    top: 0;
}

var frontStars = document.getElementsByClassName("front-stars")[0];
var percentage = 100 / 5 * 4.63;
frontStars.style.width = percentage + "%";

var rating = document.getElementsByClassName("star-rating")[0];
rating.title = +(4.63.toFixed(2)) + " out of " + 5;

*{margin, padding:0}
/*---------- star rating ----------*/
.star-rating {
    display: flex;
    align-items: center;
    font-size: 3em;
    justify-content: center;
    margin-top: 50px;
}
.back-stars {
    display: flex;
    color: #bb5252;
    position: relative;
    text-shadow: 4px 4px 10px #843a3a;
}
.front-stars {
    display: flex;
    color: #FFBC0B;
    overflow: hidden;
    position: absolute;
    text-shadow: 2px 2px 5px #d29b09;
    top: 0;
}

<script src="https://use.fontawesome.com/f4e64b7c17.js"></script>

<div class="star-rating">
    <div class="back-stars">
        <i class="fa fa-star" aria-hidden="true"></i>
        <i class="fa fa-star" aria-hidden="true"></i>
        <i class="fa fa-star" aria-hidden="true"></i>
        <i class="fa fa-star" aria-hidden="true"></i>
        <i class="fa fa-star" aria-hidden="true"></i>
        
        <div class="front-stars">
            <i class="fa fa-star" aria-hidden="true"></i>
            <i class="fa fa-star" aria-hidden="true"></i>
            <i class="fa fa-star" aria-hidden="true"></i>
            <i class="fa fa-star" aria-hidden="true"></i>
            <i class="fa fa-star" aria-hidden="true"></i>
        </div>
    </div>
</div>