WEBVTT

0
00:00.270 --> 00:03.800
All right. Are you ready for challenge 19?

1
00:04.410 --> 00:09.420
All right so here's the goal of this challenge. Instead of console logging whether something matched

2
00:09.420 --> 00:10.440
or not match,

3
00:10.440 --> 00:18.150
we actually want to render the actual page so that if we have a post say called another post inside

4
00:18.150 --> 00:25.170
our home page we should be able to head over to /posts/another-post.

5
00:25.170 --> 00:31.830
And the goal of this challenge is that when I hit enter we should now get taken to a brand new page

6
00:32.010 --> 00:40.080
that's been rendered using EJS and it's a standalone page that just contains the contents of that particular

7
00:40.080 --> 00:41.290
blog post.

8
00:41.430 --> 00:47.100
And if I had more than one post say if I had another post-coup Day 2 as the title, then I should be

9
00:47.100 --> 00:53.100
able to navigate to it by simply going to /posts/day-2. And now when I hit

10
00:53.130 --> 00:58.740
enter I get taken to another page, a brand new page for this blog post.

11
00:58.780 --> 01:05.130
And no matter how many new posts that you compose every single one of them should dynamically get its

12
01:05.190 --> 01:13.070
own page just by using EJS and our Express routing parameters. Inside the views folder

13
01:13.080 --> 01:17.460
you should notice that you already have a empty file called post.

14
01:17.490 --> 01:18.350
ejs.

15
01:18.630 --> 01:22.210
See how you can use this along with what we've got so far

16
01:22.290 --> 01:28.150
in order to create this outcome. Pause the video and complete the challenge.

17
01:28.180 --> 01:32.670
Now my first hint for you is that you don't need this else statement any more.

18
01:32.670 --> 01:38.240
You're only checking to see if the requestedTitle is equal to the storedTitle. And in that case instead

19
01:38.290 --> 01:46.210
of console logging, you want to send people over to this posts.ejs page. And you need to render this

20
01:46.210 --> 01:54.480
page such that it gets access to the title and the content of the post that is being requested.

21
01:54.490 --> 02:00.480
You will need to decide on some variable names for what you want to pass over using EJS,

22
02:00.580 --> 02:06.910
you'll have to add the layouts the header and footer just as we have done for all the other pages and

23
02:06.910 --> 02:14.080
then you have to use the EJS tags in order to render an h1 and a paragraph tag of the title and

24
02:14.080 --> 02:15.090
the body.

25
02:15.430 --> 02:21.010
So see if this is enough of a hint for you to now be able to complete the challenge.

26
02:21.040 --> 02:28.150
Now the second hnt if you need it is that remember how we rendered our home page right?

27
02:28.180 --> 02:31.250
We actually used a method called res.render.

28
02:31.270 --> 02:36.580
Seems like a long time ago but we use res.render and then we specify the name of the page that

29
02:36.580 --> 02:42.940
we want to render and then we added a comma and then we specified a Javascript object where we have

30
02:43.150 --> 02:49.450
a key and a value and the value is the thing that we want to pass over and the key is the thing that

31
02:49.450 --> 02:53.350
we get to access inside that target page.

32
02:53.350 --> 02:57.360
So with this final hint see if you can now complete the challenge.