0 1 00:00:00,240 --> 00:00:04,430 All right here comes the answer for challenge 5. 1 2 00:00:04,490 --> 00:00:12,200 Now as I mentioned, the first thing to address is our contact.ejs page and our about.ejs page. 2 3 00:00:12,200 --> 00:00:15,430 We essentially want to replicate what we did in our home. 3 4 00:00:15,680 --> 00:00:17,300 ejs. And for time's sake 4 5 00:00:17,330 --> 00:00:23,230 I'm just going to copy and paste what we had in our home.ejs into these two pages. 5 6 00:00:23,220 --> 00:00:30,350 Now in our contact.ejs we want to include the head partial and the footer partial but instead of 6 7 00:00:30,350 --> 00:00:36,920 having an h1 that says home, it should now say contact. And instead of passing in the starting content 7 8 00:00:37,220 --> 00:00:42,820 we're going to pass over the contact content as the name of the variable. 8 9 00:00:43,070 --> 00:00:45,790 And I'm going to do the same inside about page. 9 10 00:00:45,810 --> 00:00:51,490 So I'm going to change the h1 to about and the content to about content. 10 11 00:00:51,740 --> 00:00:57,410 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 12 00:00:57,410 --> 00:00:58,370 routes. 12 13 00:00:58,370 --> 00:01:05,090 So we're going to again use app.get because the user is trying to get these web pages. And the first 13 14 00:01:05,090 --> 00:01:11,320 route we're going to target is /about and then we're going to add our callback function our req 14 15 00:01:11,350 --> 00:01:13,260 and res. 15 16 00:01:13,550 --> 00:01:16,890 And inside this function we're going to again res.render. 16 17 00:01:17,210 --> 00:01:23,180 But this time instead of rendering the home page we're going to render the about page. And then we're 17 18 00:01:23,180 --> 00:01:29,060 going to pass over a Javascript object that has to be named about content. 18 19 00:01:29,120 --> 00:01:34,860 So I'm just going to copy this over here and use it as the key inside this Javascript object. 19 20 00:01:35,120 --> 00:01:41,060 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 21 00:01:41,060 --> 00:01:44,320 page which is this thing about content. 21 22 00:01:44,540 --> 00:01:50,480 So I'm going to go ahead and add that there and then we'll close everything off with some semicolons 22 23 00:01:50,870 --> 00:01:53,980 and that should now get us are about page. 23 24 00:01:54,050 --> 00:02:01,130 Now notice how over here passing in this object I try to make it clear by saying that the variable name 24 25 00:02:01,160 --> 00:02:06,700 that's going to be passed over is called starting content and that is what we'll have access to 25 26 00:02:06,710 --> 00:02:13,820 now inside home.ejs once that gets passed over. And the data I'm passing over is called home starting 26 27 00:02:13,820 --> 00:02:15,650 content which comes over here. 27 28 00:02:15,890 --> 00:02:19,130 So that value is what's going to be passed over. 28 29 00:02:19,220 --> 00:02:24,980 Now inside this route, I'm keeping more in line with the Node and Express standard formatting which is 29 30 00:02:24,980 --> 00:02:29,530 where they use the same name for the key and the value. 30 31 00:02:29,750 --> 00:02:31,880 Now if you find this confusing 31 32 00:02:31,880 --> 00:02:37,850 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 33 00:02:37,880 --> 00:02:39,170 where's it from, 33 34 00:02:39,290 --> 00:02:42,560 and what's the key and what's being passed over. 34 35 00:02:42,980 --> 00:02:48,530 And depending on your comfort level, name your variables whichever way you wish. 35 36 00:02:48,530 --> 00:02:56,060 Now all we have to do is just add our last path which is an app.get method for the /contact 36 37 00:02:56,120 --> 00:02:56,920 page. 37 38 00:02:57,230 --> 00:03:06,940 And then here's our anonymous callback function. And we're going to res.render our contact page 38 39 00:03:07,850 --> 00:03:11,660 and we're going to pass over our contact content. 39 40 00:03:13,900 --> 00:03:20,950 And the value of that is going to be from this current page with a variable called contact content. 40 41 00:03:21,100 --> 00:03:29,620 And let's again close off with semicolons and now we should be able to test our code and refresh our 41 42 00:03:29,620 --> 00:03:30,550 page. 42 43 00:03:30,580 --> 00:03:36,700 And now if we go to /contact we can see that we're getting this data here which of course 43 44 00:03:36,790 --> 00:03:38,710 comes from this variable. 44 45 00:03:38,710 --> 00:03:45,880 So that means we've successfully passed over contact content over to our contact.ejs and we're including it 45 46 00:03:45,880 --> 00:03:47,850 inside a paragraph type. 46 47 00:03:48,250 --> 00:03:56,530 And if we head over to /about then we get the about content that we had over at the top of 47 48 00:03:56,530 --> 00:03:58,800 our app.js. 48 49 00:03:58,870 --> 00:04:05,490 So that was just a refresher on how we create our routes and how we pass data around using EJS. 49 50 00:04:05,710 --> 00:04:08,690 And we did this plenty of times in the EJS module. 50 51 00:04:08,710 --> 00:04:13,120 So if you're at all confused, be sure to take a look back at those videos. 51 52 00:04:13,480 --> 00:04:16,270 But once you're ready it's time for the next challenge.