WEBVTT 0 00:00.420 --> 00:01.050 All right guys. 1 00:01.050 --> 00:02.570 Here comes the challenge 2 00:02.580 --> 00:05.190 number 2. Are you ready? 3 00:05.190 --> 00:05.520 All right. 4 00:05.520 --> 00:13.230 So in the app.js when you first downloaded it we had three of these constants at the top and 5 00:13.230 --> 00:18.330 they just contain a whole bunch of Lorem Ipsum and randomly generated text. 6 00:18.450 --> 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 00:25.320 --> 00:27.900 to our home page using EJS. 8 00:27.900 --> 00:31.040 Now this challenge is about doing exactly that. 9 00:31.110 --> 00:38.070 How much can you make this home starting content be displayed inside our home page inside a paragraph 10 00:38.070 --> 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 00:45.540 --> 00:52.420 home, but also the same text that's held inside that constant which is home starting content? 12 00:52.440 --> 00:56.890 So that's the challenge. Pause the video now and give it a go. 13 01:00.240 --> 01:00.620 All right. 14 01:00.630 --> 01:02.830 So currently inside home.ejs 15 01:02.980 --> 01:06.680 all that we have is an h1 tag. 16 01:06.990 --> 01:14.160 Now in order to complete this challenge we need to also have a paragraph element in here. And the text 17 01:14.220 --> 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 01:21.420 --> 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 01:27.720 --> 01:28.830 page. 20 01:28.830 --> 01:34.860 So with that hint and maybe a little bit of googling around what we just talked about, see if you 21 01:34.860 --> 01:36.820 can complete the challenge now. 22 01:37.230 --> 01:37.570 All right. 23 01:37.570 --> 01:39.530 Here's my second hint. 24 01:40.660 --> 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 01:46.810 --> 01:50.500 text that we want to show up on our Web page. 26 01:50.500 --> 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 01:57.710 --> 01:59.960 EJS tag that does that. 28 02:00.280 --> 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 02:07.510 --> 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 02:14.320 --> 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 02:22.120 --> 02:23.750 the EJS template. 32 02:24.160 --> 02:28.360 So with that hint see if you can now complete the challenge. 33 02:29.920 --> 02:30.430 OK. 34 02:30.440 --> 02:35.650 This is hint number 3. Inside this paragraph tag 35 02:35.820 --> 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 02:42.210 --> 02:48.750 an equal sign in the closing part of the tag is just a percentage sign and an angle bracket. 37 02:48.810 --> 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 02:55.650 --> 02:56.180 here. 39 02:56.430 --> 03:01.220 So let's give it a name. Let's call it just starting content. 40 03:02.570 --> 03:07.980 And now we need to pass over a variable with that name to our home. 41 03:08.010 --> 03:11.370 ejs from our server, our app.js. 42 03:12.210 --> 03:17.000 So see if with that hint you can now complete the challenge. 43 03:17.950 --> 03:18.200 All right. 44 03:18.220 --> 03:21.460 This is my fourth and final hint. 45 03:21.460 --> 03:28.270 Currently our res.render method is only rendering the home.ejs page. 46 03:28.390 --> 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 03:35.800 --> 03:42.850 So we know that Javascript objects are a key value pairs that are inside a set of curly braces. 48 03:43.270 --> 03:47.450 So you need to provide a key and a value. 49 03:47.710 --> 03:51.140 The key is going to be the variable that you'll be able to tap into 50 03:51.160 --> 03:52.270 inside your home. 51 03:52.480 --> 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 03:59.710 --> 04:01.300 is the app.js. 53 04:01.660 --> 04:07.660 Now with my final hint see if you can now finally complete the challenge.