Generate HTML elements automatically with python Flask

Question

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.

ilias-sp · Accepted Answer · 2022-02-11 20:56:30Z

2

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

edited Feb 11, 2022 at 20:56

answered Feb 11, 2022 at 20:44

ilias-sp

6,7555 gold badges33 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Generate HTML elements automatically with python Flask

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related