Automatically Change td Color

Using Django Templates & Frontend
1

Please guide me how to automatically change the table td color when the value change.

I have tried following conditional but end up with errors:

<table class="">
          <tr>
            <th>Name</th>
            <th>Warranty</th>
            <th>Days Left</th>
          </tr>
          {% for server in server_list %}
          <tr>
            <td>{{ server.server_name }}</td>
            <td>{{ server.server_warrantyexpirydate }}</td>
            <td style="{% if server.server_daysleft < 100 %}color: green {% endif %}">{{ server.server_daysleft }}</td>
          </tr>
          {% endfor %}
        </table>
2

It would be helpful if you posted the full traceback of the error you’re getting. (We may also need to see the view that is rendering this template, and possibly the model as well.)

3

Sorry Ken. Actually, I am getting the expected output. Just the VS Code showing following note:

“Do not use empty rulesetscss(emptyRules)
Contains CSS styling declarations to be applied to the element. Note that it is recommended for styles to be defined in a separate file or files. This attribute and the style element have mainly the purpose of allowing for quick styling, for example for testing purposes.”

Could you please guide how to change the following conditional statement to use CSS?

<td style="{% if server.server_daysleft < 120 %}color: red {% endif %}">{{ server.server_daysleft }}</td>```
4

Instead of modifying the style attribute, you could modify the class attribute, which would be a reference to a css class definition in your css file.

Or, for something like this, you could just ignore the note that VSC is giving you.

5

As per your advice I created following line in CSS and in HTML changed the style to class.

CSS file:
.warranty{color: white;background-color: red;}

HTML:
<td class="{% if server.daysleft < 100 %}warranty {% endif %}">{{ server.daysleft }}</td>

And the VS Code correction note gone. Thanks Ken!