0
1
00:00:00,420 --> 00:00:01,050
All right guys.
1

2
00:00:01,050 --> 00:00:02,570
Here comes the challenge
2

3
00:00:02,580 --> 00:00:05,190
number 2. Are you ready?
3

4
00:00:05,190 --> 00:00:05,520
All right.
4

5
00:00:05,520 --> 00:00:13,230
So in the app.js when you first downloaded it we had three of these constants at the top and
5

6
00:00:13,230 --> 00:00:18,330
they just contain a whole bunch of Lorem Ipsum and randomly generated text.
6

7
00:00:18,450 --> 00:00:25,200
But let's say that this is some content that's in our server and we want to be able to deliver it over
7

8
00:00:25,320 --> 00:00:27,900
to our home page using EJS.
8

9
00:00:27,900 --> 00:00:31,040
Now this challenge is about doing exactly that.
9

10
00:00:31,110 --> 00:00:38,070
How much can you make this home starting content be displayed inside our home page inside a paragraph
10

11
00:00:38,070 --> 00:00:45,540
tag so that when you head over to our home page on localhost:3000 you not only get the h1 that says
11

12
00:00:45,540 --> 00:00:52,420
home, but also the same text that's held inside that constant which is home starting content?
12

13
00:00:52,440 --> 00:00:56,890
So that's the challenge. Pause the video now and give it a go.
13

14
00:01:00,240 --> 00:01:00,620
All right.
14

15
00:01:00,630 --> 00:01:02,830
So currently inside home.ejs
15

16
00:01:02,980 --> 00:01:06,680
all that we have is an h1 tag.
16

17
00:01:06,990 --> 00:01:14,160
Now in order to complete this challenge we need to also have a paragraph element in here. And the text
17

18
00:01:14,220 --> 00:01:21,420
that's going to go into that paragraph element is going to be the text that's inside home starting content.
18

19
00:01:21,420 --> 00:01:27,720
So you'll need to render that variable using the correct EJS tag in order to see the content in this
19

20
00:01:27,720 --> 00:01:28,830
page.
20

21
00:01:28,830 --> 00:01:34,860
So with that hint and maybe a little bit of googling around what we just talked about, see if you
21

22
00:01:34,860 --> 00:01:36,820
can complete the challenge now.
22

23
00:01:37,230 --> 00:01:37,570
All right.
23

24
00:01:37,570 --> 00:01:39,530
Here's my second hint.
24

25
00:01:40,660 --> 00:01:46,810
So we know that we need to have a paragraph element in here. And in between the paragraph element is the
25

26
00:01:46,810 --> 00:01:50,500
text that we want to show up on our Web page.
26

27
00:01:50,500 --> 00:01:57,710
So the text that we want is going to be rendered dynamically using EJS. And to do that we need the
27

28
00:01:57,710 --> 00:01:59,960
EJS tag that does that.
28

29
00:02:00,280 --> 00:02:07,510
So if we head over to the EJS docs, you can see the tag that we've been using so far which is the one
29

30
00:02:07,510 --> 00:02:14,320
that outputs the value of a variable into the template. And it's in fact even the one that they show
30

31
00:02:14,320 --> 00:02:22,120
in the header. And in between that tag is going to be the name of the variable that you passed over to
31

32
00:02:22,120 --> 00:02:23,750
the EJS template.
32

33
00:02:24,160 --> 00:02:28,360
So with that hint see if you can now complete the challenge.
33

34
00:02:29,920 --> 00:02:30,430
OK.
34

35
00:02:30,440 --> 00:02:35,650
This is hint number 3. Inside this paragraph tag
35

36
00:02:35,820 --> 00:02:42,210
let's add that EJS tag that we showed you earlier on the one with a angle, a percentage sign and
36

37
00:02:42,210 --> 00:02:48,750
an equal sign in the closing part of the tag is just a percentage sign and an angle bracket.
37

38
00:02:48,810 --> 00:02:55,650
Now in between these two parts is going to be in the name of the variable that we're going to pass into
38

39
00:02:55,650 --> 00:02:56,180
here.
39

40
00:02:56,430 --> 00:03:01,220
So let's give it a name. Let's call it just starting content.
40

41
00:03:02,570 --> 00:03:07,980
And now we need to pass over a variable with that name to our home.
41

42
00:03:08,010 --> 00:03:11,370
ejs from our server, our app.js.
42

43
00:03:12,210 --> 00:03:17,000
So see if with that hint you can now complete the challenge.
43

44
00:03:17,950 --> 00:03:18,200
All right.
44

45
00:03:18,220 --> 00:03:21,460
This is my fourth and final hint.
45

46
00:03:21,460 --> 00:03:28,270
Currently our res.render method is only rendering the home.ejs page.
46

47
00:03:28,390 --> 00:03:35,610
If we wanted to pass in a variable, we would add a comma and then we would pass over a Javascript object.
47

48
00:03:35,800 --> 00:03:42,850
So we know that Javascript objects are a key value pairs that are inside a set of curly braces.
48

49
00:03:43,270 --> 00:03:47,450
So you need to provide a key and a value.
49

50
00:03:47,710 --> 00:03:51,140
The key is going to be the variable that you'll be able to tap into
50

51
00:03:51,160 --> 00:03:52,270
inside your home.
51

52
00:03:52,480 --> 00:03:59,710
ejs and the value is whatever it is that you want to pass over that comes from this current page which
52

53
00:03:59,710 --> 00:04:01,300
is the app.js.
53

54
00:04:01,660 --> 00:04:07,660
Now with my final hint see if you can now finally complete the challenge.