1
00:00:00,190 --> 00:00:01,190
How did it go?

2
00:00:01,190 --> 00:00:04,660
Hopefully you were able to at least
work out parts of the solution.

3
00:00:04,660 --> 00:00:06,120
Let me show you my solution.

4
00:00:07,310 --> 00:00:09,178
Here's the card.pug template.

5
00:00:09,178 --> 00:00:12,788
I've entered an anchor element
at the bottom of the page.

6
00:00:12,788 --> 00:00:17,961
For the href,
the parts of the URL that will

7
00:00:17,961 --> 00:00:24,450
change from card to card is the id and
the sideToShow.

8
00:00:25,580 --> 00:00:31,570
I assigned a template
literal to the href and

9
00:00:31,570 --> 00:00:34,690
added those values in for interpolation.

10
00:00:34,690 --> 00:00:37,700
The text contents of the link
should either show question or

11
00:00:37,700 --> 00:00:40,630
answer depending on where
the link is pointing.

12
00:00:42,240 --> 00:00:46,480
You could have used the same variable
that you used in the query string,

13
00:00:46,480 --> 00:00:47,830
since it's the same word.

14
00:00:49,880 --> 00:00:53,990
I wanted mine capitalized,
so I created a new variable

15
00:00:53,990 --> 00:00:58,040
named sideToShowDisplay to
hold the capitalized text.

16
00:00:59,290 --> 00:01:02,659
Next, I needed to pass in these
values into the template.

17
00:01:04,040 --> 00:01:09,640
In cards.js,
I passed in the id to the template data.

18
00:01:12,250 --> 00:01:15,360
Then, I assign values to sideToShow and

19
00:01:15,360 --> 00:01:19,850
sideToshowDisplay based on
which side the URL points to.

20
00:01:22,260 --> 00:01:27,160
If it's the question in the query string,
it should point to the answer.

21
00:01:29,610 --> 00:01:33,070
Then I added an else if
clause to do the opposite.

22
00:01:37,700 --> 00:01:41,510
Don't worry if you weren't able
to complete this challenge.

23
00:01:41,510 --> 00:01:45,680
Coding takes practice, and
practice is what you're getting right now.

24
00:01:46,720 --> 00:01:51,462
One thing I like to do when something
isn't clicking is to erase it all and

25
00:01:51,462 --> 00:01:52,330
start over.

26
00:01:53,350 --> 00:01:55,610
Even though you saw a solution,

27
00:01:55,610 --> 00:01:58,810
it can still be a challenge to
reimplement something from scratch.

28
00:01:59,840 --> 00:02:01,520
That process may help you learn.

29
00:02:02,680 --> 00:02:04,060
Let's do another challenge now.

30
00:02:05,260 --> 00:02:08,720
This one will combine what you
know about creating routes,

31
00:02:08,720 --> 00:02:13,260
redirections, route parameters,
and of course JavaScript.

32
00:02:13,260 --> 00:02:14,450
I'll show you what you'll build.

33
00:02:15,580 --> 00:02:20,200
In the browser,
when I type the URL slash cards,

34
00:02:21,260 --> 00:02:26,970
and hit Enter, I'm being redirected
to a specific random card.

35
00:02:28,270 --> 00:02:32,420
I'll do it again, and
I'm at a different card.

36
00:02:32,420 --> 00:02:35,570
Giving users a way to study
random cards can help them learn.

37
00:02:36,590 --> 00:02:40,380
To complete this challenge,
you'll need to create a new route,

38
00:02:40,380 --> 00:02:45,910
write some logic to find a random card,
and redirect the user to view that card.

39
00:02:45,910 --> 00:02:48,410
Good luck, and
I'll show you my solution next.