How to display a specific color depending on the values of a variable in Django? - django

Question

For example, if the application.status is "rejected", then background: gray; color: lightgrey. If "accepted" - green and lightgreen. If "in progress", then blue and light blue.
<div>
{% for application in object_list %}
<div style="background: ???; color: ???;">
<span>{{ application.status }}</span>
</div>
</div>
{% endfor %}
</div>

Answer 1

Firstly, be careful about your for loop, which currently produces invalid HTML (Currently each iteration opens 1 div but closes 2 divs). I've made the appropriate correction in my answer below.
Secondly, it is perfectly valid DTL (Django Template Language) to put {% if %}, {% elif %} and {% else %} blocks inside HTML tags, so that you can generate dynamic attributes.
In your case for styling the color by status, it would look something like this:
<div>
{% for application in object_list %}
<div
{% if application.status == "rejected" %}
style="background: gray; color: lightgrey"
{% elif application.status == "accepted" %}
style="background: green; color: lightgreen"
{% endif %}
>
<span>{{ application.status }}</span>
</div>
{% endfor %}
</div>
Depending on your IDE/Text-Editor settings, you may get some weird syntax highlighting when you do this, but it should produce great output. I use this trick all the time myself.

Answer 2

To set the background and text color of a div element based on the value of the application.status variable in Django templates, you can use conditional statements and CSS classes. Here's an example:
Define CSS classes for each status:
CSS
.rejected {
background-color: gray;
color: lightgrey;
}
.accepted {
background-color: green;
color: lightgreen;
}
.in-progress {
background-color: blue;
color: lightblue;
}
In your Django template, use conditional statements to add the appropriate CSS class to the div element based on the application.status value:
HTML
<div>
{% for application in object_list %}
<div class="{% if application.status == 'rejected' %}rejected{% elif application.status == 'accepted' %}accepted{% elif application.status == 'in progress' %}in-progress{% endif %}">
<span>{{ application.status }}</span>
</div>
{% endfor %}
</div>
This will add the appropriate CSS class to each div element based on the value of application.status, which will set the background and text color of the element as defined in the CSS class.