WEBVTT 0 00:00.960 --> 00:04.230 All right so here comes the answer to the challenge. 1 00:04.390 --> 00:07.110 The answer is that inside our home. 2 00:07.270 --> 00:15.070 ejs instead a console logging the post title or whatever it may be, we want to be able to render it as 3 00:15.070 --> 00:22.500 HTML element. And we have to render each item inside the post array as an individual 4 00:22.530 --> 00:30.730 h1 and paragraph element just like what we've got up here with our home as our h1 and our startingContent 5 00:31.060 --> 00:33.490 being placed into paragraph elements. 6 00:33.730 --> 00:36.580 That's what we need to do down here. 7 00:36.580 --> 00:43.360 Some of you might have struggled with this because you try to keep the scriptlet tags in place and then 8 00:43.360 --> 00:46.120 try to add an h1 inside here. 9 00:46.390 --> 00:53.680 Well this is actually just pure bog standard h1. So it shouldn't go inside the Javascript scriptlet tags 10 00:53.980 --> 00:58.250 so let's delete those. Inside our forEach loop 11 00:58.270 --> 01:06.850 we know that we loop through each post inside our post array and each post needs an h1 for its title 12 01:07.270 --> 01:10.100 and a paragraph for its content. 13 01:10.390 --> 01:19.460 So let's go ahead and create an h1. And the content of our h1 is going to be the post in the singular 14 01:19.460 --> 01:28.190 form so each post .title. And then we're going to have a paragraph element and in our paragraph element 15 01:28.580 --> 01:32.360 we're going to add the post.content. 16 01:32.570 --> 01:39.350 So again make sure that these are the singular forms because we want to have a title and content created 17 01:39.380 --> 01:42.100 for each post inside the array. 18 01:42.110 --> 01:45.410 That's why we're using a for loop right? Now 19 01:45.440 --> 01:53.960 in order for this to work, we need to be able to put in the value of post.title into our h1 and 20 01:53.960 --> 02:00.880 the value of post.content into our paragraph. And we have to do that just as we did up here 21 02:00.980 --> 02:06.770 because these are going to be Javascript variables right? They're not just plain text that we want to show 22 02:07.160 --> 02:13.190 because if it looks like this then our home page would end up just having post.title post.content 23 02:13.190 --> 02:13.970 showing up 24 02:14.240 --> 02:16.650 and that's just plain text. 25 02:16.850 --> 02:22.280 So we have to use EJS tags that outputs the value into the template. 26 02:22.640 --> 02:26.750 Let's go ahead and add those tags around our variables. 27 02:27.080 --> 02:36.390 It's angle bracket percentage sign equals percentage sign angle bracket to close it off. 28 02:36.500 --> 02:43.340 All right so now that we've used the value tags let's go ahead and check and refresh our home page. 29 02:43.510 --> 02:51.310 And now you should be able to see the title and the body being rendered inside the paragraph and h1 30 02:51.350 --> 02:52.320 tags. 31 02:52.340 --> 02:59.450 And to further confirm that this is doing it for every single post, we can go ahead and add another post 32 02:59.630 --> 03:05.450 through our compose page. And you can see that when we update our home page we've got everything being 33 03:05.500 --> 03:12.260 rendered and we're looping through each and every blog post in our posts array to render it on the screen.