0
1
00:00:00,960 --> 00:00:04,230
All right so here comes the answer to the challenge.
1

2
00:00:04,390 --> 00:00:07,110
The answer is that inside our home.
2

3
00:00:07,270 --> 00: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

4
00:00:15,070 --> 00:00:22,500
HTML element. And we have to render each item inside the post array as an individual 
4

5
00:00:22,530 --> 00: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

6
00:00:31,060 --> 00:00:33,490
being placed into paragraph elements.
6

7
00:00:33,730 --> 00:00:36,580
That's what we need to do down here.
7

8
00:00:36,580 --> 00:00:43,360
Some of you might have struggled with this because you try to keep the scriptlet tags in place and then
8

9
00:00:43,360 --> 00:00:46,120
try to add an h1 inside here.
9

10
00:00:46,390 --> 00:00:53,680
Well this is actually just pure bog standard h1. So it shouldn't go inside the Javascript scriptlet tags
10

11
00:00:53,980 --> 00:00:58,250
so let's delete those. Inside our forEach loop
11

12
00:00:58,270 --> 00: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

13
00:01:07,270 --> 00:01:10,100
and a paragraph for its content.
13

14
00:01:10,390 --> 00: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

15
00:01:19,460 --> 00:01:28,190
form so each post .title. And then we're going to have a paragraph element and in our paragraph element
15

16
00:01:28,580 --> 00:01:32,360
we're going to add the post.content.
16

17
00:01:32,570 --> 00:01:39,350
So again make sure that these are the singular forms because we want to have a title and content created
17

18
00:01:39,380 --> 00:01:42,100
for each post inside the array.
18

19
00:01:42,110 --> 00:01:45,410
That's why we're using a for loop right? Now
19

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

21
00:01:53,960 --> 00:02:00,880
the value of post.content into our paragraph. And we have to do that just as we did up here
21

22
00:02:00,980 --> 00:02:06,770
because these are going to be Javascript variables right? They're not just plain text that we want to show
22

23
00:02:07,160 --> 00:02:13,190
because if it looks like this then our home page would end up just having post.title post.content
23

24
00:02:13,190 --> 00:02:13,970
showing up
24

25
00:02:14,240 --> 00:02:16,650
and that's just plain text.
25

26
00:02:16,850 --> 00:02:22,280
So we have to use EJS tags that outputs the value into the template.
26

27
00:02:22,640 --> 00:02:26,750
Let's go ahead and add those tags around our variables.
27

28
00:02:27,080 --> 00:02:36,390
It's angle bracket percentage sign equals percentage sign angle bracket to close it off.
28

29
00:02:36,500 --> 00: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

30
00:02:43,510 --> 00:02:51,310
And now you should be able to see the title and the body being rendered inside the paragraph and h1
30

31
00:02:51,350 --> 00:02:52,320
tags.
31

32
00:02:52,340 --> 00: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

33
00:02:59,630 --> 00:03:05,450
through our compose page. And you can see that when we update our home page we've got everything being
33

34
00:03:05,500 --> 00:03:12,260
rendered and we're looping through each and every blog post in our posts array to render it on the screen.