All language subtitles for 012 Challenge 5 Solution_en

All right here comes the answer for challenge 5.

Now as I mentioned, the first thing to address is our contact.ejs page and our about.ejs page.

We essentially want to replicate what we did in our home.

ejs. And for time's sake

I'm just going to copy and paste what we had in our home.ejs into these two pages.

Now in our contact.ejs we want to include the head partial and the footer partial but instead of

having an h1 that says home, it should now say contact. And instead of passing in the starting content

we're going to pass over the contact content as the name of the variable.

And I'm going to do the same inside about page.

So I'm going to change the h1 to about and the content to about content.

So now let's hit save on both of those pages and we're ready to go into our app.js to define the

routes.

So we're going to again use app.get because the user is trying to get these web pages. And the first

route we're going to target is /about and then we're going to add our callback function our req

and res.

And inside this function we're going to again res.render.

But this time instead of rendering the home page we're going to render the about page. And then we're

going to pass over a Javascript object that has to be named about content.

So I'm just going to copy this over here and use it as the key inside this Javascript object.

And I'm going to add my colon and I'm going to pass in the variable that I want to have inside my About

page which is this thing about content.

So I'm going to go ahead and add that there and then we'll close everything off with some semicolons

and that should now get us are about page.

Now notice how over here passing in this object I try to make it clear by saying that the variable name

that's going to be passed over is called starting content and that is what we'll have access to

now inside home.ejs once that gets passed over. And the data I'm passing over is called home starting

content which comes over here.

So that value is what's going to be passed over.

Now inside this route, I'm keeping more in line with the Node and Express standard formatting which is

where they use the same name for the key and the value.

Now if you find this confusing

feel free to do it exactly the same way that I've done it here just to make it clear what's the value,

where's it from,

and what's the key and what's being passed over.

And depending on your comfort level, name your variables whichever way you wish.

Now all we have to do is just add our last path which is an app.get method for the /contact

page.

And then here's our anonymous callback function. And we're going to res.render our contact page

and we're going to pass over our contact content.

And the value of that is going to be from this current page with a variable called contact content.

And let's again close off with semicolons and now we should be able to test our code and refresh our

page.

And now if we go to /contact we can see that we're getting this data here which of course

comes from this variable.

So that means we've successfully passed over contact content over to our contact.ejs and we're including it

inside a paragraph type.

And if we head over to /about then we get the about content that we had over at the top of

our app.js.

So that was just a refresher on how we create our routes and how we pass data around using EJS.

And we did this plenty of times in the EJS module.

So if you're at all confused, be sure to take a look back at those videos.

But once you're ready it's time for the next challenge.