0
1
00:00:00,650 --> 00:00:02,610
All right it's time for challenge
1

2
00:00:02,690 --> 00:00:10,920
5. So currently we've got our home route and our home page being rendered with a header and footer
2

3
00:00:11,310 --> 00:00:15,080
and some content that's being passed over from the server.
3

4
00:00:15,120 --> 00: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

5
00:00:21,510 --> 00:00:30,750
localhost:3000/about and be able to see the about page with the same header and footer and CSS 
5

6
00:00:30,780 --> 00: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

7
00:00:39,030 --> 00:00:45,140
with a header and footer using the partials and also have the data that's inside our app.js,
7

8
00:00:45,210 --> 00:00:51,880
about content and contact content rendered and passed over to the correct pages.
8

9
00:00:52,020 --> 00:00:57,560
So you should be able to see this on your About page and this on your contact page
9

10
00:00:57,750 --> 00:01:00,690
once you've successfully completed this challenge.
10

11
00:01:00,810 --> 00:01:02,370
So that's the goal.
11

12
00:01:02,370 --> 00:01:05,140
Pause the video and complete the challenge.
12

13
00:01:06,580 --> 00: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

14
00:01:13,720 --> 00:01:16,900
to achieve in order to get this to work.
14

15
00:01:16,900 --> 00: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

16
00:01:23,290 --> 00:01:32,230
this variable home starting content. And we're using these partials inside this page to be able to render
16

17
00:01:32,230 --> 00:01:35,570
the content inside the header and footer files.
17

18
00:01:35,710 --> 00: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

19
00:01:42,860 --> 00:01:43,410
home.
19

20
00:01:43,440 --> 00: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

21
00:01:50,760 --> 00:01:51,190
Now
21

22
00:01:51,250 --> 00:01:58,810
once you've updated these two pages now the next step is to go ahead and create the routes.
22

23
00:01:58,810 --> 00:02:03,600
We've got a route defined for our root route which is the forward slash
23

24
00:02:03,940 --> 00:02:11,320
and inside there we're rendering the home.ejs page and we're passing through a Javascript object that contains
24

25
00:02:11,650 --> 00:02:18,570
the value of home starting content which is the data that we want to pass over to the home page.
25

26
00:02:18,580 --> 00:02:25,210
Now we need to do pretty much the same thing but for our /about route and our /
26

27
00:02:25,300 --> 00:02:32,080
contact route and we're going to pass over the content inside the about content and contact content
27

28
00:02:32,380 --> 00:02:34,540
to the relevant pages.
28

29
00:02:34,540 --> 00: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

30
00:02:41,410 --> 00:02:45,280
the root route and you should be able to reach the goal for this challenge.
30

31
00:02:45,400 --> 00:02:46,330
So give it a go
31

32
00:02:46,330 --> 00:02:46,640
now.