Preview
Video Player
00:00
00:00
Linking Around the Application
7:59Improve the applications links.
I'll show you how I solved the problem of
redirecting the user to a random card.
0:00
In the cards.js file I first created
a new route using the router.get method.
0:06
Remember because we're inside a router
that is mounted in the cards route.
0:14
In the app.js file We don't need to
start any of our URLs with cards.
0:19
After creating this route,
0:29
I've first needed the total number
of cards we have to choose from.
0:30
I could have counted the cards manually
0:35
from the JSON file that
we're pulling the data from.
0:38
But if I wanted to add more cards later,
I'd need to change this number.
0:41
So I just use the length
property on the cards array.
0:48
Then I generated a random
number using math.random.
0:53
Math.random generates a random number
between 0 and null point nine recurring.
0:58
So to get the random number
from 0 to the card's length,
1:05
I multiply it by length of the array.
1:10
Then I use Math.floor on the result
to convert the number to an integer.
1:14
Then I plug that number into the URL and
it's used to move to a different page.
1:20
I've got a couple of smaller
challenges for you now.
1:28
First, try to go to a specific card's URL,
say three.
1:31
When I hit Return,
you'll see that the page is mostly blank.
1:42
And it doesn't have the query string.
1:48
That's because this route requires
a query string to know what
1:50
values to render back to the user.
1:55
Try adding some code to redirect our
users to see the question side of
1:58
the flash card by default.
2:02
Pause this video if you want
to work it out on your own.
2:04
In card JS,
in the route that says individual cards,
2:09
I checked for the presence of this site.
2:14
If this site doesn't exist,
2:30
I want to redirect, To the same card,
2:34
With the query string added
pointing to the question side.
2:47
Let's try the app, And it works.
2:58
Now, I can remove the query
string from the end
3:03
of this URL to make it a little cleaner.
3:08
Note that this is not
a bulletproof implementation.
3:12
To demonstrate, try using values beside
question and answer on the query string.
3:17
You can even try adding word hint.
3:24
That's odd.
3:29
I'll let you work out what's
going on there and how to fix it.
3:30
If you want to,
3:35
try discussing it with your fellow
students in the Treehouse community.
3:36
The take away here is that
is not always obvious
3:40
how to keep users from falling
into potholes in your app.
3:43
It's very important to work out though,
3:47
because users will find all sorts
of problems one way or another.
3:49
This is why testing software is so
important.
3:54
Testing is beyond the scope of this cause.
3:58
I have linked just some treehouse
content in the teacher's notes.
4:00
I have another small challenge.
4:04
Are you ready?
4:06
Add link to the flash card page that
allows the user to move to another
4:07
randomly selected card.
4:11
We've already done a lot of
the leg work to accomplish this,
4:13
but to implement this feature,
4:19
I can just put a link underneath
the side to slash cards.
4:22
The links would sit right next
to each other on the page, and
4:33
didn't break them up some way.
4:37
You can try it in your own
code to see what I mean.
4:40
But I used the break element
next to the next card link to
4:43
separate it on the next line from
the equation and answer link.
4:48
Now that our users can move
through our flashcards easily,
5:00
let's give them a way to get from
the home page to the flashcards.
5:04
I'll just copy this link.
5:10
And paste it into the index Pug.
5:14
I'll wrap it in a paragraph tag,
I'll change the text to begin.
5:19
Now here's the greeting for
our user and the button to say goodbye.
5:28
Let's put this.
5:33
And paste it just under our header
template and above the content block.
5:37
Then the user can access the goodbye
button from any page in the app.
5:46
Now if I look at the card in the browser,
5:54
you see that we have a welcome and
a goodbye button, which is great.
5:58
But the name isn't printing.
6:03
The card template doesn't have
access to the name variable
6:07
from the snipit we just pasted in.
6:11
It's not hard to connect it, though.
6:14
Remember it's in a cookie.
6:16
I'll go to cards.js, to where
the route serves the individual page.
6:19
I can declare const name and assign the
username value from the request's cookies.
6:33
Now I can pass the name into the template.
6:45
Now let's view a card in the browser.
6:49
So my username isn't showing up.
6:53
And if I check in the cookies,
there's no values there.
6:54
I'm not logged in.
6:58
So let me just login real quickly.
7:00
Andrew.
7:03
And then refresh.
7:07
There it is.
7:08
There's one more problem though, and you
may have just seen it on the other page.
7:10
When I click on Goodbye The Welcome and
Goodbye buttons appear.
7:14
Even when the cookie is cleared and
the name is undefined.
7:22
We can hide that with the conditional.
7:25
Let's go back into our layout template,
And then nest it if the name exists.
7:28
Now when you refresh the browser,
they welcome and button disappear.
7:43
I'll put my name in and they come back.
7:49
Our flash card app is nearly complete,
great job on getting this far
7:54