All right so here comes the answer to the challenge.
The answer is that inside our home.
ejs instead a console logging the post title or whatever it may be, we want to be able to render it as
HTML element. And we have to render each item inside the post array as an individual
h1 and paragraph element just like what we've got up here with our home as our h1 and our startingContent
being placed into paragraph elements.
That's what we need to do down here.
Some of you might have struggled with this because you try to keep the scriptlet tags in place and then
try to add an h1 inside here.
Well this is actually just pure bog standard h1. So it shouldn't go inside the Javascript scriptlet tags
so let's delete those. Inside our forEach loop
we know that we loop through each post inside our post array and each post needs an h1 for its title
and a paragraph for its content.
So let's go ahead and create an h1. And the content of our h1 is going to be the post in the singular
form so each post .title. And then we're going to have a paragraph element and in our paragraph element
we're going to add the post.content.
So again make sure that these are the singular forms because we want to have a title and content created
for each post inside the array.
That's why we're using a for loop right? Now
in order for this to work, we need to be able to put in the value of post.title into our h1 and
the value of post.content into our paragraph. And we have to do that just as we did up here
because these are going to be Javascript variables right? They're not just plain text that we want to show
because if it looks like this then our home page would end up just having post.title post.content
showing up
and that's just plain text.
So we have to use EJS tags that outputs the value into the template.
Let's go ahead and add those tags around our variables.
It's angle bracket percentage sign equals percentage sign angle bracket to close it off.
All right so now that we've used the value tags let's go ahead and check and refresh our home page.
And now you should be able to see the title and the body being rendered inside the paragraph and h1
tags.
And to further confirm that this is doing it for every single post, we can go ahead and add another post
through our compose page. And you can see that when we update our home page we've got everything being
rendered and we're looping through each and every blog post in our posts array to render it on the screen.