Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Giving users links lets them navigate through your app. We'll add some in this video.
In the last video, I challenged you
to only show the hint with the card
0:00
when the question was presented.
0:04
Now, I'll show you my solution.
0:07
First, I removed the hint property from
where the template data variable was
0:09
declared.
0:14
Then, I added an if statement.
0:17
Setting the hint property to equal hint
0:20
when this side is holding
the question string.
0:25
Hopefully that wasn't too tough.
0:31
I wanted to warm you up for
the next challenge.
0:34
For this challenge,
you are going to make it easy for
0:36
a user to flip the card
from one side to the other.
0:40
Here's an example of what you'll build.
0:44
I'm on the question side of a card,
as you can see in the query string.
0:47
Here's a link that says answer,
0:55
when I click it you see the back
of the card and the URL matches.
0:58
Now there's a question link.
1:06
Clicking that,
brings me back to the front of the card.
1:09
You already know enough to add
these links to card template, but
1:14
it'd still be a bit of a challenge.
1:18
Take some time to think of what
information you'll need to construct these
1:20
links, and how to get that
information into the template.
1:23
One thing to keep in mind.
1:27
You can use JavaScript template
literals in Pug templates.
1:29
So, for example, if I have
a variable named animal that I want
1:34
to interpolate into a headline,
these two forms output the same HTML.
1:39
In the lower line I've created
a string using a template literal and
1:45
set the h1's contents to the string.
1:50
Template literals become
more useful in attributes
1:53
where Pug doesn't have support for
interpolation.
1:57
On the top line our variable is
being concatenated with the string
2:01
to produce the title attribute.
2:04
On the bottom a template literal is used.
2:07
I find template literals to be
more readable that concatenation.
2:10
But it's up to you and what you prefer.
2:14
Good luck and
I'll see you in the next video.
2:18
And I'll show you how I
implemented this feature.
2:20
You need to sign up for Treehouse in order to download course files.
Sign up