Learn

Including conditionals such as if and if/else statements in our templates allows us to control how data is handled.

Let’s say we have a string variable passed to our template. When the variable contains an empty string will you want to output it or will you want to output another string? Remember the default filter doesn’t work in this situation so an if statement is needed.

Using if statements in a template happens inside a statement delimiter block: {% %}.

{% if condition %}
  <p>This text will output if condition is True</p> 
{% endif %}

Notice the {% endif %} delimiter is necessary to close the if statement.

The condition can include a variable that is tested using standard comparison operators, <, >, <=, >=, ==, !=.

{% if template_variable == "Hello" %}
  <p>{{template_variable}}, World!</p> 
{% endif %}

While inside statement delimiters {% %} we can access variables without using the usual expression delimiter {{ }}.

Variables can also be tested on their own. A variable defined as None or False or equates to 0 or contains an empty sequence such as "" or [] will test as False.

The {% else %} and {% elif %} delimiters can be included to create multi-branch if statements.

Given the assignment template_number = 20.

{% if template_number < 20 %}
  <p>{{ template_number }} is less than 20.</p> 
{% elif template_number > 20 %}
   <p>{{ template_number }} is greater than 20.</p> 
{% else %}
   <p>{{ template_number }} is equal to 20.</p> 
{% endif %}

OUTPUT
20 is equal to 20.

As expected the {% else %} branch is the one that is followed.

Instructions

Let’s note the few changes made to our app:

The recipe list has expanded to 2 recipes.
The new recipe has a description of None which doesn’t engage the default filter.
The list of ingredients is set up for 3 ingredients, but the new recipe only has 2.

With these points in mind run the code to explore the app and move on when you are ready.

In recipe.html we have 2 paragraphs for our description. We want one paragraph to output template_description and the other to output a default statement.

Start by surrounding BOTH paragraphs with an if statement that tests the variable on its own.

Remember testing a variable on its own will be False if it is an empty string or is NoneType.

When you run the code you will see that the recipe with a description displays both paragraphs while the recipe with no description displays nothing.

Now separate the two paragraphs with an else statement.

This will now display only one message per recipe: template_description or a default message.

Now let’s use an if statement to fix the blank 3rd bullet in the list when displaying the new recipe.

In the Ingredients section surround the 3rd ingredient <li> line with an if statement. For the condition, test that the length of template_ingredients is equal, ==, to 3.

After completing this think about how limiting this task is. What if we have an ingredients list greater than 3? What if there’s only one ingredient? Run the code and move to the next exercise to find the answer.

Sign up to start coding

By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.

Or sign up using:

Already have an account?