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.
This video doesn't have any notes.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
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 upYou need to sign up for Treehouse in order to set up Workspace
Sign up