How to simplify this css star rating?

Question

I am trying to simply this star rating that is in a cshtml page of my project. I would like to not have to have all this code in my View. It takes a view model's value of a score and decides how many checked stars to display. Does anyone know how to make this better?

 @if (Model.Score>= 100)
                {
                <span class="fa fa-star checked"></span>
                <span class="fa fa-star checked"></span>
                <span class="fa fa-star checked"></span>
                <span class="fa fa-star checked"></span>
                <span class="fa fa-star checked"></span>
                }
                else if(Model.Score>= 80)
                {
                    <span class="fa fa-star checked"></span>
                    <span class="fa fa-star checked"></span>
                    <span class="fa fa-star checked"></span>
                    <span class="fa fa-star checked"></span>
                    <span class="fa fa-star"></span>
                }
                else if(Model.Score>=60)
                {
                    <span class="fa fa-star checked"></span>
                    <span class="fa fa-star checked"></span>
                    <span class="fa fa-star checked"></span>
                    <span class="fa fa-star"></span>
                    <span class="fa fa-star"></span>
                }
                else if(Model.Score>=40)
                {
                    <span class="fa fa-star checked"></span>
                    <span class="fa fa-star checked"></span>
                    <span class="fa fa-star"></span>
                    <span class="fa fa-star"></span>
                    <span class="fa fa-star"></span>
                }
                 else if(Model.Score>=20)
                {
                    <span class="fa fa-star checked"></span>
                    <span class="fa fa-star"></span>
                    <span class="fa fa-star"></span>
                    <span class="fa fa-star"></span>
                    <span class="fa fa-star"></span>
                }
                 else if(Model.Score<20 && Model.Score>=0)
                {
                    <span class="fa fa-star"></span>
                    <span class="fa fa-star"></span>
                    <span class="fa fa-star"></span>
                    <span class="fa fa-star"></span>
                    <span class="fa fa-star"></span>
                }

Answer 1

you could do a loop using calculated number of starts checked n and unchecked ( 5 - n )

@{n = Math.Floor(Math.Min(1, Model.Score/100) * 5)}

@for(var i = 0; i <= n; i++)
    {<span class="fa fa-star checked"></span>}

@for(var i = 0; i <= 5 - n); i++)
    {<span class="fa fa-star" span>}

or better yet figure out the checked class in the same loop

@for(var i = 0; i <= 5; i++)
    {<span class="fa fa-star @(@Model.Score <= i * 5 ? 'checked' : '')"></span>}

Answer 2

You can create score/20 checked stars and the remaining will be unchecked stars.

 const score = 60; const checkedStars = Math.floor(score / 20); const uncheckedStars = 5 - checkedStars; for (let i = 0; i < checkedStars; i++) { document.body.innerHTML += `<i class="fa fa-star checked"></i>` } for (let i = 0; i < uncheckedStars; i++) { document.body.innerHTML += `<i class="far fa-star "></i>` }

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" />