WEBVTT

0
00:00.240 --> 00:04.430
All right here comes the answer for challenge 5.

1
00:04.490 --> 00:12.200
Now as I mentioned, the first thing to address is our contact.ejs page and our about.ejs page.

2
00:12.200 --> 00:15.430
We essentially want to replicate what we did in our home.

3
00:15.680 --> 00:17.300
ejs. And for time's sake

4
00:17.330 --> 00:23.230
I'm just going to copy and paste what we had in our home.ejs into these two pages.

5
00:23.220 --> 00:30.350
Now in our contact.ejs we want to include the head partial and the footer partial but instead of

6
00:30.350 --> 00:36.920
having an h1 that says home, it should now say contact. And instead of passing in the starting content

7
00:37.220 --> 00:42.820
we're going to pass over the contact content as the name of the variable.

8
00:43.070 --> 00:45.790
And I'm going to do the same inside about page.

9
00:45.810 --> 00:51.490
So I'm going to change the h1 to about and the content to about content.

10
00:51.740 --> 00:57.410
So now let's hit save on both of those pages and we're ready to go into our app.js to define the

11
00:57.410 --> 00:58.370
routes.

12
00:58.370 --> 01:05.090
So we're going to again use app.get because the user is trying to get these web pages. And the first

13
01:05.090 --> 01:11.320
route we're going to target is /about and then we're going to add our callback function our req

14
01:11.350 --> 01:13.260
and res.

15
01:13.550 --> 01:16.890
And inside this function we're going to again res.render.

16
01:17.210 --> 01:23.180
But this time instead of rendering the home page we're going to render the about page. And then we're

17
01:23.180 --> 01:29.060
going to pass over a Javascript object that has to be named about content.

18
01:29.120 --> 01:34.860
So I'm just going to copy this over here and use it as the key inside this Javascript object.

19
01:35.120 --> 01:41.060
And I'm going to add my colon and I'm going to pass in the variable that I want to have inside my About

20
01:41.060 --> 01:44.320
page which is this thing about content.

21
01:44.540 --> 01:50.480
So I'm going to go ahead and add that there and then we'll close everything off with some semicolons

22
01:50.870 --> 01:53.980
and that should now get us are about page.

23
01:54.050 --> 02:01.130
Now notice how over here passing in this object I try to make it clear by saying that the variable name

24
02:01.160 --> 02:06.700
that's going to be passed over is called starting content and that is what we'll have access to

25
02:06.710 --> 02:13.820
now inside home.ejs once that gets passed over. And the data I'm passing over is called home starting

26
02:13.820 --> 02:15.650
content which comes over here.

27
02:15.890 --> 02:19.130
So that value is what's going to be passed over.

28
02:19.220 --> 02:24.980
Now inside this route, I'm keeping more in line with the Node and Express standard formatting which is

29
02:24.980 --> 02:29.530
where they use the same name for the key and the value.

30
02:29.750 --> 02:31.880
Now if you find this confusing

31
02:31.880 --> 02:37.850
feel free to do it exactly the same way that I've done it here just to make it clear what's the value,

32
02:37.880 --> 02:39.170
where's it from,

33
02:39.290 --> 02:42.560
and what's the key and what's being passed over.

34
02:42.980 --> 02:48.530
And depending on your comfort level, name your variables whichever way you wish.

35
02:48.530 --> 02:56.060
Now all we have to do is just add our last path which is an app.get method for the /contact

36
02:56.120 --> 02:56.920
page.

37
02:57.230 --> 03:06.940
And then here's our anonymous callback function. And we're going to res.render our contact page

38
03:07.850 --> 03:11.660
and we're going to pass over our contact content.

39
03:13.900 --> 03:20.950
And the value of that is going to be from this current page with a variable called contact content.

40
03:21.100 --> 03:29.620
And let's again close off with semicolons and now we should be able to test our code and refresh our

41
03:29.620 --> 03:30.550
page.

42
03:30.580 --> 03:36.700
And now if we go to /contact we can see that we're getting this data here which of course

43
03:36.790 --> 03:38.710
comes from this variable.

44
03:38.710 --> 03:45.880
So that means we've successfully passed over contact content over to our contact.ejs and we're including it

45
03:45.880 --> 03:47.850
inside a paragraph type.

46
03:48.250 --> 03:56.530
And if we head over to /about then we get the about content that we had over at the top of

47
03:56.530 --> 03:58.800
our app.js.

48
03:58.870 --> 04:05.490
So that was just a refresher on how we create our routes and how we pass data around using EJS.

49
04:05.710 --> 04:08.690
And we did this plenty of times in the EJS module.

50
04:08.710 --> 04:13.120
So if you're at all confused, be sure to take a look back at those videos.

51
04:13.480 --> 04:16.270
But once you're ready it's time for the next challenge.