Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Express Basics!
You have completed Express Basics!
Preview
Improve the applications links.
Testing in Node
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
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
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up