All right here comes the answer for challenge 5. 1
Now as I mentioned, the first thing to address is our contact.ejs page and our about.ejs page. 2
We essentially want to replicate what we did in our home. 3
ejs. And for time's sake 4
I'm just going to copy and paste what we had in our home.ejs into these two pages. 5
Now in our contact.ejs we want to include the head partial and the footer partial but instead of 6
having an h1 that says home, it should now say contact. And instead of passing in the starting content 7
we're going to pass over the contact content as the name of the variable. 8
And I'm going to do the same inside about page. 9
So I'm going to change the h1 to about and the content to about content. 10
So now let's hit save on both of those pages and we're ready to go into our app.js to define the 11
routes. 12
So we're going to again use app.get because the user is trying to get these web pages. And the first 13
route we're going to target is /about and then we're going to add our callback function our req 14
and res. 15
And inside this function we're going to again res.render. 16
But this time instead of rendering the home page we're going to render the about page. And then we're 17
going to pass over a Javascript object that has to be named about content. 18
So I'm just going to copy this over here and use it as the key inside this Javascript object. 19
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 20
page which is this thing about content. 21
So I'm going to go ahead and add that there and then we'll close everything off with some semicolons 22
and that should now get us are about page. 23
Now notice how over here passing in this object I try to make it clear by saying that the variable name 24
that's going to be passed over is called starting content and that is what we'll have access to 25
now inside home.ejs once that gets passed over. And the data I'm passing over is called home starting 26
content which comes over here. 27
So that value is what's going to be passed over. 28
Now inside this route, I'm keeping more in line with the Node and Express standard formatting which is 29
where they use the same name for the key and the value. 30
Now if you find this confusing 31
feel free to do it exactly the same way that I've done it here just to make it clear what's the value, 32
where's it from, 33
and what's the key and what's being passed over. 34
And depending on your comfort level, name your variables whichever way you wish. 35
Now all we have to do is just add our last path which is an app.get method for the /contact 36
page. 37
And then here's our anonymous callback function. And we're going to res.render our contact page 38
and we're going to pass over our contact content. 39
And the value of that is going to be from this current page with a variable called contact content. 40
And let's again close off with semicolons and now we should be able to test our code and refresh our 41
page. 42
And now if we go to /contact we can see that we're getting this data here which of course 43
comes from this variable. 44
So that means we've successfully passed over contact content over to our contact.ejs and we're including it 45
inside a paragraph type. 46
And if we head over to /about then we get the about content that we had over at the top of 47
our app.js. 48
So that was just a refresher on how we create our routes and how we pass data around using EJS. 49
And we did this plenty of times in the EJS module. 50
So if you're at all confused, be sure to take a look back at those videos. 51
But once you're ready it's time for the next challenge.