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?

Yang · Accepted Answer · 2015-12-29 18:16:42Z

2

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.

answered Dec 29, 2015 at 18:16

Yang

1,9231 gold badge11 silver badges15 bronze badges

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

Collectives™ on Stack Overflow

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

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