Preview
Video Player
00:00
00:00
Randomize Cards
2:49Randomizing the cards the user sees will help them learn the material better. In this video, you'll be challenged to implement that feature!
How did it go?
0:00
Hopefully you were able to at least
work out parts of the solution.
0:01
Let me show you my solution.
0:04
Here's the card.pug template.
0:07
I've entered an anchor element
at the bottom of the page.
0:09
For the href,
the parts of the URL that will
0:12
change from card to card is the id and
the sideToShow.
0:17
I assigned a template
literal to the href and
0:25
added those values in for interpolation.
0:31
The text contents of the link
should either show question or
0:34
answer depending on where
the link is pointing.
0:37
You could have used the same variable
that you used in the query string,
0:42
since it's the same word.
0:46
I wanted mine capitalized,
so I created a new variable
0:49
named sideToShowDisplay to
hold the capitalized text.
0:53
Next, I needed to pass in these
values into the template.
0:59
In cards.js,
I passed in the id to the template data.
1:04
Then, I assign values to sideToShow and
1:12
sideToshowDisplay based on
which side the URL points to.
1:15
If it's the question in the query string,
it should point to the answer.
1:22
Then I added an else if
clause to do the opposite.
1:29
Don't worry if you weren't able
to complete this challenge.
1:37
Coding takes practice, and
practice is what you're getting right now.
1:41
One thing I like to do when something
isn't clicking is to erase it all and
1:46
start over.
1:51
Even though you saw a solution,
1:53
it can still be a challenge to
reimplement something from scratch.
1:55
That process may help you learn.
1:59
Let's do another challenge now.
2:02
This one will combine what you
know about creating routes,
2:05
redirections, route parameters,
and of course JavaScript.
2:08
I'll show you what you'll build.
2:13
In the browser,
when I type the URL slash cards,
2:15
and hit Enter, I'm being redirected
to a specific random card.
2:21
I'll do it again, and
I'm at a different card.
2:28
Giving users a way to study
random cards can help them learn.
2:32
To complete this challenge,
you'll need to create a new route,
2:36
write some logic to find a random card,
and redirect the user to view that card.
2:40
Good luck, and
I'll show you my solution next.
2:45