Adding Links

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