Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

esorone's avatar

Refactor rating solution

Hey Guys,

I just added a rating system on a local project. And based on a certain percentage I would like to color the stars (max 5) I build a solution and it works as intended, but i cannot imagine that my solution cannot be build in a smarter way. Any tips how to improve? The increments are 20%, so if the average rating is >20% but less than 40%, color the next star..

Basically I created a blade component with lots of @if @elseif.

Any advice is appreciated.

<div>
    @if($percentage <= 20)
        <fieldset class="rating">
            <input class="star star-5 bg-yellow-500" value="5" id="star-5" type="radio" name="star"/>
            <label class="star star-5" for="star-5"></label>
            <input class="star star-4" value="4" id="star-4" type="radio" name="star"/>
            <label class="star star-4" for="star-4"></label>
            <input class="star star-3" value="3" id="star-3" type="radio" name="star"/>
            <label class="star star-3" for="star-3"></label>
            <input class="star star-2" value="2" id="star-2" type="radio" name="star"/>
            <label class="star star-2" for="star-2"></label>
            <input class="star star-1" value="1" id="star-1" type="radio" name="star"/>
            <label class="star star-1" for="star-1"></label>
            <input type="hidden" name="flow_id" id="flow_id" value="">
        </fieldset>
    @elseif($percentage >20 && $percentage <=40)
        <fieldset class="rating">
            <input class="star-5 bg-yellow-500" value="5" id="star-5" type="radio" name="star"/>
            <label class="star-5" for="star-5"></label>
            <input class="star-4" value="4" id="star-4" type="radio" name="star"/>
            <label class="star-4" for="star-4"></label>
            <input class="star-3" value="3" id="star-3" type="radio" name="star"/>
            <label class="star-3" for="star-3"></label>
            <input class="star star-2" value="2" id="star-2" type="radio" name="star"/>
            <label class="star star-2" for="star-2"></label>
            <input class="star star-1" value="1" id="star-1" type="radio" name="star"/>
            <label class="star star-1" for="star-1"></label>
            <input type="hidden" name="flow_id" id="flow_id" value="">
        </fieldset>
    @elseif($percentage >40 && $percentage <=60)
        <fieldset class="rating">
            <input class="star-5 bg-yellow-500" value="5" id="star-5" type="radio" name="star"/>
            <label class="star-5" for="star-5"></label>
            <input class="star-4" value="4" id="star-4" type="radio" name="star"/>
            <label class="star-4" for="star-4"></label>
            <input class="star star-3" value="3" id="star-3" type="radio" name="star"/>
            <label class="star star-3" for="star-3"></label>
            <input class="star star-2" value="2" id="star-2" type="radio" name="star"/>
            <label class="star star-2" for="star-2"></label>
            <input class="star star-1" value="1" id="star-1" type="radio" name="star"/>
            <label class="star star-1" for="star-1"></label>
            <input type="hidden" name="flow_id" id="flow_id" value="">
        </fieldset>
    @elseif($percentage >60 && $percentage <=80)
        <fieldset class="rating">
            <input class="star-5 bg-yellow-500" value="5" id="star-5" type="radio" name="star"/>
            <label class="star-5" for="star-5"></label>
            <input class="star star-4" value="4" id="star-4" type="radio" name="star"/>
            <label class="star star-4" for="star-4"></label>
            <input class="star star-3" value="3" id="star-3" type="radio" name="star"/>
            <label class="star star-3"  for="star-3"></label>
            <input class="star star-2" value="2" id="star-2" type="radio" name="star"/>
            <label class="star star-2"  for="star-2"></label>
            <input class="star star-1" value="1" id="star-1" type="radio" name="star"/>
            <label class="star star-1"  for="star-1"></label>
            <input type="hidden" name="flow_id" id="flow_id" value="">
        </fieldset>
    @elseif($percentage >80 && $percentage <100)
        <fieldset class="rating">
            <input class="star star-5 bg-yellow-500" value="5" id="star-5" type="radio" name="star"/>
            <label class="star star-5"  for="star-5"></label>
            <input class="star star-4" value="4" id="star-4" type="radio" name="star"/>
            <label class="star star-4"  for="star-4"></label>
            <input class="star star-3" value="3" id="star-3" type="radio" name="star"/>
            <label class="star star-3"  for="star-3"></label>
            <input class="star star-2" value="2" id="star-2" type="radio" name="star"/>
            <label class="star star-2"  for="star-2"></label>
            <input class="star star-1" value="1" id="star-1" type="radio" name="star"/>
            <label class="star star-1"  for="star-1"></label>
            <input type="hidden" name="flow_id" id="flow_id" value="">
        </fieldset>
    @else

    @endif

</div>
0 likes
0 replies

Please or to participate in this conversation.