Generate HTML elements automatically with python Flask

Issue

So I am using python flask along with some HTML and CSS to create a dynamic website to display reviews about universities. However I am facing a slight issue in that I have flask gives HTML reviews and reviews contain attributes such as username, date, the review comments, and overall rating (out of 5). However for the overall rating I want to display them on the website as starts, so I have 5 stars and have 2 different icons for the starts 1 that is filled and 1 that is hollow, so e.g if a review was rated 3/5 I have 3 filled stars and 2 hollow stars. Currently, I have to "hard code" e.g rating through if statements and it looks messy and doesn't really work well if I have to add other ratings.

HTML code

<section id="reviews">
        <div class="review-box-container">
            <!-- Get all the data from postgres database-->
            {% for review in reviews.items %}
            <div class="review-box">
                <div class="box-top">

                    <div class="profile">
                        <div class="profile-img">
                            <img src="{{ url_for('static', filename='images/Lincoln-Logo.png') }}" width="50" height="50" alt="profile">
                        </div> 
                        <div class="name-user">
                            <strong>{{ review.user_name }}</strong>
                            <span> {{ review.date.strftime('%Y-%m-%d') }}</span>
                        </div>
                    </div>
                    
                    <!--Hard coded the overall rating star display (How can I do this better?)-->
                    <div class="review-content">
                        {% if review.overall_rating == 1 %}
                        <i class="fas fa-star"></i>
                        <i class="far fa-star"></i>
                        <i class="far fa-star"></i>
                        <i class="far fa-star"></i>
                        <i class="far fa-star"></i> <!-- Holo star -->
                        {% endif %}
                        {% if review.overall_rating == 2 %}
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="far fa-star"></i>
                        <i class="far fa-star"></i>
                        <i class="far fa-star"></i>
                        {% endif %}
                        {% if review.overall_rating == 3 %}
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="far fa-star"></i>
                        <i class="far fa-star"></i>
                        {% endif %}
                        {% if review.overall_rating == 4 %}
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="far fa-star"></i>
                        {% endif %}
                        {% if review.overall_rating == 5 %}
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        {% endif %}
                    </div>
                </div>

                <div class="review-comment">
                    <p>{{ review.comments}}</p>
                </div>
            </div>
            {% endfor %}
        </div>
    </section>

So I am wondering If there is a way to get rid of the if statements for each value from 1 - 5 and do it in a less hardcoded fashion, so it makes it easier when adding other ratings.

Solution

you can make two loops in total without if loops, first for loop to print the full stars X times (where X is the rating), and 2nd the half star loop for 5 - X times.

in my example the overall_rating is the variable with value 0 to 5:

jinja template:

<pre>
{% for ii in range(1, overall_rating + 1) %}
<i class="fas fa-star"></i>
{% endfor %}
{% for ii in range(1, 5 - overall_rating + 1) %}
<i class="far fa-star"></i> <!-- Holo star -->
{% endfor %}

Edited to adjust the template more to your case

Answered By - ilias-sp