WEBVTT

0
00:00.650 --> 00:02.610
All right it's time for challenge

1
00:02.690 --> 00:10.920
5. So currently we've got our home route and our home page being rendered with a header and footer

2
00:11.310 --> 00:15.080
and some content that's being passed over from the server.

3
00:15.120 --> 00:21.510
Now in this challenge in order to complete it, I want you to be able to go into your browser and say

4
00:21.510 --> 00:30.750
localhost:3000/about and be able to see the about page with the same header and footer and CSS 

5
00:30.780 --> 00:38.940
applied to this page. And also to be able to go over to the contact page and again have this page rendered

6
00:39.030 --> 00:45.140
with a header and footer using the partials and also have the data that's inside our app.js,

7
00:45.210 --> 00:51.880
about content and contact content rendered and passed over to the correct pages.

8
00:52.020 --> 00:57.560
So you should be able to see this on your About page and this on your contact page

9
00:57.750 --> 01:00.690
once you've successfully completed this challenge.

10
01:00.810 --> 01:02.370
So that's the goal.

11
01:02.370 --> 01:05.140
Pause the video and complete the challenge.

12
01:06.580 --> 01:13.720
All right so here's the first and only hint. As a hint I'm going to go through the steps that you need

13
01:13.720 --> 01:16.900
to achieve in order to get this to work.

14
01:16.900 --> 01:23.230
Now we know that we're already able to render our home page passing in some of the content that's inside

15
01:23.290 --> 01:32.230
this variable home starting content. And we're using these partials inside this page to be able to render

16
01:32.230 --> 01:35.570
the content inside the header and footer files.

17
01:35.710 --> 01:42.860
Now in our contact.ejs and about.ejs pages you need to do the same as what we've done inside our

18
01:42.860 --> 01:43.410
home.

19
01:43.440 --> 01:50.040
ejs. But we're going to be passing in some different content and you're going to have a different h1.

20
01:50.760 --> 01:51.190
Now

21
01:51.250 --> 01:58.810
once you've updated these two pages now the next step is to go ahead and create the routes.

22
01:58.810 --> 02:03.600
We've got a route defined for our root route which is the forward slash

23
02:03.940 --> 02:11.320
and inside there we're rendering the home.ejs page and we're passing through a Javascript object that contains

24
02:11.650 --> 02:18.570
the value of home starting content which is the data that we want to pass over to the home page.

25
02:18.580 --> 02:25.210
Now we need to do pretty much the same thing but for our /about route and our /

26
02:25.300 --> 02:32.080
contact route and we're going to pass over the content inside the about content and contact content

27
02:32.380 --> 02:34.540
to the relevant pages.

28
02:34.540 --> 02:41.410
So see if you can try and replicate what we did with the home.ejs file and also this get method for

29
02:41.410 --> 02:45.280
the root route and you should be able to reach the goal for this challenge.

30
02:45.400 --> 02:46.330
So give it a go

31
02:46.330 --> 02:46.640
now.