Preview
Video Player
00:00
00:00
Card Template
3:52Let's improve the card template.
We can see different question now
by specifying an ID in the URL.
0:00
But how can we view answers
to those questions?
0:06
We could add a another URL parameter after
the ID that would look for a string.
0:11
For example question or answer.
0:16
This would work.
0:19
But there's another way to pass
information to a server I want to show
0:20
you, it's called a query string.
0:24
A query string goes at the end of a URL
and it starts with a question mark.
0:27
After the question mark,
0:33
you can pass the server a key value
pair separated by an equal sign.
0:34
You can separate additional key value
pairs with an ampersand like you see here.
0:41
Let's use a query string to
request either the answer or
0:46
the question side of the flash card.
0:50
We could use the side key to
either be question or answer.
0:53
Checking for a query string is
very similar to checking for
0:59
a route parameter or a cookie.
1:03
If a query string is in the request,
1:05
it will be in the request object
under the query property.
1:09
In the cards routes file, let's check for
the presence of a query string key site.
1:14
I'm assigning it to the variable
side since question and
1:30
answer are properties on the json.
1:36
We can use the value stored inside
to find the text we want to display.
1:43
First though, we need the ID of the card.
1:50
Let's create a variable to hold
the ID from the route parameter.
1:57
Now we can access the two pieces
of text that we want to use.
2:06
Let's store that in a constant named text.
2:11
Also I'll store a reference to the hint.
2:22
Now I'll wrap the text and
2:35
the hint into an object that
I can pass into the template.
2:37
Lastly, I need to change
the variable name for
2:57
in the card template from prompt to text.
3:00
This ensures the question or
the answer will show up.
3:06
Let's go back to the browser and
try using our query string.
3:14
The question shows up.
3:22
And the answer shows up too.
3:28
The only thing that I'd
like to change is for
3:31
the hint to show up only when the question
side is showing, and not the answer side.
3:34
See if you can use your understanding
of Express and Java Script in general
3:40
to only show the hint on
the question side of the flash card.
3:44
In the next video I'll
show you my solution.
3:49