How do I create dynamic CSS in Rails depending on boolean values?

Question

I am creating a "to-do website". Users can log in and generate tasks. Every task has two checkboxes "urgent" and "important" both are boolean values which are related to the task model. Everything works great but I want to change the background color of the tasks depending on which checkbox is checked. So there should be a total of 4 possibilities/background-color styles:

• Task (important: true, urgent: true) - background-color: red;
• Task (important: true, urgent: false) - background-color: blue;
• Task (important: false, urgent: true) - background-color: green;
• Task (important: false, urgent: false) - background-color: grey;

Question:

How can I achieve 4 different background-color styles depending on the urgent and important boolean value of a task?

Answer 1

In your view:

<% if task.important and task.urgent %>
  <div class="background-color-red">
    ...
  </div>
<% elsif task.important and !task.urgent %>
  <div class="background-color-blue">
    ...
  </div>
<% elsif !task.important and task.urgent %>
  <div class="background-color-green">
    ...
  </div>
<% elsif !task.important and !task.urgent %>
  <div class="background-color-grey">
    ...
  </div>
<%end%>

Then you can define the background-color in your css file with the classs above.