In the previous exercises, you’ve mostly worked with individual expressions, however, you have the ability to combine expressions! In this exercise, you will combine the {{if}}
block and the {{each}}
block together in a single <script>
!
Let’s revisit the code from the previous exercise. In this exercise, you’ll be adding an element to the languages
array and adding a new property, modern
, to all the elements. Then you will manipulate the Handlebars script to show different texts based on the modern
property.
Instructions
In main.js, add a modern
property with a value of true
to each element of the languages
array.
Now, add another object to the array in the languages
property of context
. This object will have a name
property with a value of 'COBOL'
and a modern
property of false
.
If you take a look at the web page, you’ll see that you should learn every language. But, since ‘COBOL’ isn’t a modern language maybe it should be given less priority. Let’s change that in the next step.
Navigate to index.html, in the Handlebars <script>
, add a starting {{if}}
expression directly under the <div class="card">
. Add an argument of this.modern
to the starting {{if}}
expression.
Then, directly above the closing <div>
tag, add the closing {{if}}
expression.
Great, now you should see that ‘COBOL’ is no longer on the web page!
But remember, you can use {{else}}
to create a default behavior for when languages are not modern.
In the Handlebars <script>
element, add an {{else}}
section to the {{if}}
block.
Inside the {{else}}
section, add a paragraph element that has the text When I have time, I'll learn {{this.name}}.
Now you’ve covered both cases when the language is modern and when it isn’t!