Apr 8, 2022
0
Level 4
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>
Please or to participate in this conversation.