It’s not a problem in fact, but I would like to know if it is possible to optimise the code below.
It’s a simple code to show the star rating mark which is in the db.
I searched and tried with @foreach, but can’t figure it out.
Code:
<span class="review-stars" style="color: #1e88e5;"> <!-- ////////////// STAR RATE CHECKER ////////////// --> @if($review->rate <= 0) <i class="fa fa-star-o" aria-hidden="true"></i> <i class="fa fa-star-o" aria-hidden="true"></i> <i class="fa fa-star-o" aria-hidden="true"></i> <i class="fa fa-star-o" aria-hidden="true"></i> <i class="fa fa-star-o" aria-hidden="true"></i> @elseif($review->rate === 1) <i class="fa fa-star" aria-hidden="true"></i> <i class="fa fa-star-o" aria-hidden="true"></i> <i class="fa fa-star-o" aria-hidden="true"></i> <i class="fa fa-star-o" aria-hidden="true"></i> <i class="fa fa-star-o" aria-hidden="true"></i> @elseif($review->rate === 2) <i class="fa fa-star" aria-hidden="true"></i> <i class="fa fa-star" aria-hidden="true"></i> <i class="fa fa-star-o" aria-hidden="true"></i> <i class="fa fa-star-o" aria-hidden="true"></i> <i class="fa fa-star-o" aria-hidden="true"></i> @elseif($review->rate === 3) <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-o" aria-hidden="true"></i> <i class="fa fa-star-o" aria-hidden="true"></i> @elseif($review->rate === 4) <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-o" aria-hidden="true"></i> @elseif($review->rate >= 5) <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> @endif <!-- ///////////////////////////////////////////// --> </span>
Advertisement
Answer
Don’t Repeat Yourself. Loop 5 times and write a condition to check if the star should be empty.
Code: (Demo: https://3v4l.org/Tj31J )
$review = (object)['rate' => 3]; for ($i = 0; $i < 5; ++$i) { echo '<i class="fa fa-star' , ($review->rate <= $i ? '-o' : '') , '" aria-hidden="true"></i>'; }
Output:
<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-o" aria-hidden="true"></i> <i class="fa fa-star-o" aria-hidden="true"></i>
I don’t code in Laravel, correct me if this syntax is flawed:
@for ($i = 0; $i < 5; ++$i) <i class="fa fa-star{{ $review->rate <= $i ? '-o' : '' }}" aria-hidden="true"></i> @endfor
If you want to incorporate half-empty (aka half-full) stars, just add another condition. The same design logic applies, add one more condition to check if the star should be halved. Here is a full battery of valid ratings tested:
Code (See the Demo for verbose output: https://3v4l.org/r4c6R )
$reviews = [ (object)['rate' => 0], (object)['rate' => .5], (object)['rate' => 1], (object)['rate' => 1.5], (object)['rate' => 2], (object)['rate' => 2.5], (object)['rate' => 3], (object)['rate' => 3.5], (object)['rate' => 4], (object)['rate' => 4.5], (object)['rate' => 5] ]; foreach ($reviews as $review) { for ($i = 0; $i < 5; ++$i) { echo '<i class="fa fa-star' , ($review->rate == $i + .5 ? '-half' : '') , ($review->rate <= $i ? '-o' : '') , '" aria-hidden="true"></i>'; echo "n"; } echo "n"; }
If you don’t understand the inline conditional syntax, google is only a click away.