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