1 00:00:01,240 --> 00:00:03,170 ‫In this video and the next one, 2 00:00:03,170 --> 00:00:06,540 ‫together we're gonna build the tour detail page. 3 00:00:06,540 --> 00:00:07,500 ‫And along the way 4 00:00:07,500 --> 00:00:09,930 ‫you're gonna learn some more Pug techniques 5 00:00:09,930 --> 00:00:12,107 ‫like conditionals and mixins. 6 00:00:14,120 --> 00:00:15,840 ‫And as I showed you before, 7 00:00:15,840 --> 00:00:19,760 ‫this is what the tour detail page actually looks like. 8 00:00:19,760 --> 00:00:22,590 ‫And so that's what we're going to build in this video 9 00:00:22,590 --> 00:00:24,640 ‫and the next one. 10 00:00:24,640 --> 00:00:26,180 ‫Now the only thing that we're gonna leave 11 00:00:26,180 --> 00:00:27,550 ‫for a bit later 12 00:00:27,550 --> 00:00:29,490 ‫is actually this map. 13 00:00:29,490 --> 00:00:31,060 ‫All right, but everything else 14 00:00:31,060 --> 00:00:33,760 ‫we're going to build in these tool lectures. 15 00:00:33,760 --> 00:00:35,873 ‫Including these reviews. 16 00:00:37,510 --> 00:00:39,070 ‫All right. 17 00:00:39,070 --> 00:00:41,830 ‫So right now we have our overview 18 00:00:41,830 --> 00:00:43,350 ‫and we have of course 19 00:00:43,350 --> 00:00:46,270 ‫these buttons with the URLs already created. 20 00:00:46,270 --> 00:00:49,430 ‫But then when we try to access this page 21 00:00:49,430 --> 00:00:51,380 ‫we of course get this error. 22 00:00:51,380 --> 00:00:52,380 ‫All right. 23 00:00:52,380 --> 00:00:55,170 ‫So let's go back to our VS code 24 00:00:55,170 --> 00:00:57,470 ‫and I actually want to start this 25 00:00:57,470 --> 00:00:59,650 ‫with a small challenge for you. 26 00:00:59,650 --> 00:01:00,820 ‫So what I want you to do 27 00:01:00,820 --> 00:01:03,310 ‫is to create a route for the detail page 28 00:01:03,310 --> 00:01:06,180 ‫according to the URL that we just built before. 29 00:01:06,180 --> 00:01:07,370 ‫And it's going to be similar 30 00:01:07,370 --> 00:01:09,100 ‫to what we already have here 31 00:01:09,100 --> 00:01:11,640 ‫but you have to tweak it a little bit. 32 00:01:11,640 --> 00:01:12,473 ‫Okay. 33 00:01:12,473 --> 00:01:13,306 ‫Enough of that, 34 00:01:13,306 --> 00:01:16,120 ‫I also want you to build this controller. 35 00:01:16,120 --> 00:01:17,530 ‫So get to it. 36 00:01:17,530 --> 00:01:19,370 ‫'Cause right now we only have 37 00:01:19,370 --> 00:01:20,910 ‫like this place holder. 38 00:01:20,910 --> 00:01:23,410 ‫And so let me actually give you the steps here. 39 00:01:23,410 --> 00:01:25,130 ‫And so as always, 40 00:01:25,130 --> 00:01:26,660 ‫first, 41 00:01:26,660 --> 00:01:29,120 ‫we need to get the data. 42 00:01:29,120 --> 00:01:31,093 ‫This time for the requested tour. 43 00:01:34,480 --> 00:01:35,313 ‫And for that, 44 00:01:35,313 --> 00:01:37,360 ‫keep in mind that we actually need the reviews here 45 00:01:37,360 --> 00:01:38,693 ‫and also the tour guides. 46 00:01:43,670 --> 00:01:44,503 ‫Okay. 47 00:01:45,890 --> 00:01:46,723 ‫So, 48 00:01:46,723 --> 00:01:48,700 ‫again let's take a look at that. 49 00:01:48,700 --> 00:01:51,140 ‫So we have these tour guides here. 50 00:01:51,140 --> 00:01:54,230 ‫Right, and so they are a separate data set basically. 51 00:01:54,230 --> 00:01:55,550 ‫So users. 52 00:01:55,550 --> 00:01:57,933 ‫And then here we also have the reviews. 53 00:01:59,380 --> 00:02:00,730 ‫Now these tour guides here, 54 00:02:00,730 --> 00:02:03,330 ‫I believe they're actually automatically populated 55 00:02:03,330 --> 00:02:04,400 ‫in a model. 56 00:02:04,400 --> 00:02:06,930 ‫So let's take a look at that very quick. 57 00:02:06,930 --> 00:02:08,270 ‫So the tour model 58 00:02:09,610 --> 00:02:11,450 ‫and so, 59 00:02:11,450 --> 00:02:12,283 ‫yeah. 60 00:02:12,283 --> 00:02:13,116 ‫So down here, 61 00:02:13,116 --> 00:02:14,400 ‫we have this auto populate 62 00:02:14,400 --> 00:02:16,600 ‫whenever there is a find query 63 00:02:16,600 --> 00:02:18,070 ‫but only for the guides. 64 00:02:18,070 --> 00:02:20,160 ‫And so don't forget to also populate 65 00:02:20,160 --> 00:02:21,173 ‫the reviews. 66 00:02:22,530 --> 00:02:23,450 ‫Okay. 67 00:02:23,450 --> 00:02:24,513 ‫Then after that, 68 00:02:25,900 --> 00:02:27,120 ‫we will build a template 69 00:02:27,120 --> 00:02:29,670 ‫but that we will do together okay, 70 00:02:29,670 --> 00:02:31,470 ‫so I don't need you to do this part. 71 00:02:33,880 --> 00:02:35,220 ‫And then finally, 72 00:02:35,220 --> 00:02:38,030 ‫I want you to complete this part here as well. 73 00:02:38,030 --> 00:02:38,950 ‫So render 74 00:02:40,370 --> 00:02:41,203 ‫template 75 00:02:42,130 --> 00:02:43,510 ‫using the data 76 00:02:44,930 --> 00:02:47,050 ‫from step one again. 77 00:02:47,050 --> 00:02:48,580 ‫All right. 78 00:02:48,580 --> 00:02:50,120 ‫So that's very simple as well. 79 00:02:50,120 --> 00:02:51,300 ‫And so what I want you to do 80 00:02:51,300 --> 00:02:52,870 ‫is to create the route 81 00:02:52,870 --> 00:02:54,410 ‫and then also get the data. 82 00:02:54,410 --> 00:02:57,763 ‫Okay so pause the video here and good luck with that. 83 00:03:01,540 --> 00:03:03,280 ‫So I hope you did that 84 00:03:03,280 --> 00:03:05,950 ‫and to let me know, solve it here for you. 85 00:03:05,950 --> 00:03:08,090 ‫And we're gonna start with the route. 86 00:03:08,090 --> 00:03:11,360 ‫And now all we actually need to add here is this slug. 87 00:03:11,360 --> 00:03:14,510 ‫And of course, we're doing that as a URL parameter. 88 00:03:14,510 --> 00:03:17,693 ‫So just like this, calling it slug. 89 00:03:18,885 --> 00:03:21,150 ‫So before we use the ID right? 90 00:03:21,150 --> 00:03:22,660 ‫And so we had it like this 91 00:03:22,660 --> 00:03:25,480 ‫and now let's just call it the slug. 92 00:03:25,480 --> 00:03:26,313 ‫All right. 93 00:03:26,313 --> 00:03:27,146 ‫Because again, 94 00:03:27,146 --> 00:03:29,560 ‫that is what the overview page looks like. 95 00:03:29,560 --> 00:03:32,413 ‫We have tour slash slug basically. 96 00:03:33,780 --> 00:03:36,100 ‫Okay, and so that's what we will then use 97 00:03:36,100 --> 00:03:39,460 ‫to create for the tour in the controller. 98 00:03:39,460 --> 00:03:41,500 ‫So let's do that now here. 99 00:03:41,500 --> 00:03:42,363 ‫So const, 100 00:03:43,460 --> 00:03:44,460 ‫tour 101 00:03:44,460 --> 00:03:45,910 ‫equal 102 00:03:45,910 --> 00:03:46,743 ‫await 103 00:03:47,800 --> 00:03:48,633 ‫tour 104 00:03:51,970 --> 00:03:53,440 ‫and findone. 105 00:03:53,440 --> 00:03:56,540 ‫So this time we cannot use find by ID. 106 00:03:56,540 --> 00:03:58,330 ‫Well because, we do not know 107 00:03:58,330 --> 00:04:00,130 ‫the ID of the tour. 108 00:04:00,130 --> 00:04:01,030 ‫And so instead, 109 00:04:01,030 --> 00:04:04,040 ‫we are searching by the slug. 110 00:04:04,040 --> 00:04:05,140 ‫And the slug is 111 00:04:06,140 --> 00:04:07,540 ‫as I hope you know 112 00:04:07,540 --> 00:04:09,940 ‫request.params 113 00:04:09,940 --> 00:04:11,060 ‫dot 114 00:04:11,060 --> 00:04:11,893 ‫slug 115 00:04:11,893 --> 00:04:12,960 ‫all right. 116 00:04:12,960 --> 00:04:15,180 ‫And now finally, that's all to populate 117 00:04:16,570 --> 00:04:18,263 ‫the arrays field. 118 00:04:19,390 --> 00:04:20,223 ‫All right. 119 00:04:21,540 --> 00:04:24,063 ‫So the path to populate is reviews. 120 00:04:25,080 --> 00:04:27,690 ‫And actually we do not need all the fields here. 121 00:04:27,690 --> 00:04:29,890 ‫So let's just specify the ones that we need. 122 00:04:30,810 --> 00:04:32,480 ‫And so, 123 00:04:32,480 --> 00:04:34,023 ‫that is only the review, 124 00:04:35,200 --> 00:04:36,113 ‫the rating, 125 00:04:37,290 --> 00:04:38,450 ‫and the user. 126 00:04:38,450 --> 00:04:39,283 ‫Because remember 127 00:04:39,283 --> 00:04:40,600 ‫that we actually display 128 00:04:41,500 --> 00:04:44,490 ‫so the user name and the user photo. 129 00:04:44,490 --> 00:04:45,460 ‫And then of course, 130 00:04:45,460 --> 00:04:47,873 ‫the review itself and the rating. 131 00:04:50,065 --> 00:04:50,898 ‫Okay. 132 00:04:50,898 --> 00:04:51,910 ‫Then of course, 133 00:04:51,910 --> 00:04:54,604 ‫it's complaining that we didn't use async. 134 00:04:54,604 --> 00:04:56,763 ‫And of course I wasn't gonna forget that. 135 00:04:58,140 --> 00:04:59,300 ‫But anyway it's good 136 00:04:59,300 --> 00:05:02,290 ‫that ES Line warns us about this kind of errors. 137 00:05:02,290 --> 00:05:04,660 ‫It really takes away a lot of bugs 138 00:05:04,660 --> 00:05:06,353 ‫from development. 139 00:05:07,880 --> 00:05:08,713 ‫Okay. 140 00:05:08,713 --> 00:05:09,770 ‫And then here of course 141 00:05:09,770 --> 00:05:12,030 ‫we're going to pass that tour variable 142 00:05:12,030 --> 00:05:14,660 ‫into our tour template. 143 00:05:14,660 --> 00:05:16,240 ‫So that one. 144 00:05:16,240 --> 00:05:17,380 ‫Give it a save. 145 00:05:17,380 --> 00:05:19,010 ‫No more errors. 146 00:05:19,010 --> 00:05:21,590 ‫And so that part is actually now complete. 147 00:05:21,590 --> 00:05:22,940 ‫And so all we need to do now 148 00:05:22,940 --> 00:05:26,420 ‫is to go ahead and build our template. 149 00:05:26,420 --> 00:05:27,730 ‫Okay. 150 00:05:27,730 --> 00:05:28,940 ‫So, 151 00:05:28,940 --> 00:05:30,920 ‫we already should have that here. 152 00:05:30,920 --> 00:05:32,193 ‫And that's the dev data. 153 00:05:33,050 --> 00:05:34,230 ‫So we have a lot of folders 154 00:05:34,230 --> 00:05:35,490 ‫and a lot of data. 155 00:05:35,490 --> 00:05:37,370 ‫And it can become a bit 156 00:05:37,370 --> 00:05:39,090 ‫confusing at some point. 157 00:05:39,090 --> 00:05:39,923 ‫Okay. 158 00:05:39,923 --> 00:05:40,923 ‫And so, 159 00:05:41,780 --> 00:05:45,310 ‫let's get rid of this placeholder content here. 160 00:05:45,310 --> 00:05:47,510 ‫And before we do anything else, 161 00:05:47,510 --> 00:05:51,690 ‫let's again take a look at the original HTML file. 162 00:05:51,690 --> 00:05:53,510 ‫Which is in that 163 00:05:53,510 --> 00:05:55,900 ‫public folder that I just closed. 164 00:05:55,900 --> 00:05:58,080 ‫Let's actually close all of these here, 165 00:05:59,180 --> 00:06:00,980 ‫'cause I find this really confusing. 166 00:06:03,150 --> 00:06:05,470 ‫Okay, the models as well. 167 00:06:05,470 --> 00:06:08,290 ‫And so now what we need is public 168 00:06:08,290 --> 00:06:09,893 ‫and then tour.html. 169 00:06:12,180 --> 00:06:14,950 ‫So the header we already have of course. 170 00:06:14,950 --> 00:06:16,970 ‫And then here goes all the content. 171 00:06:16,970 --> 00:06:17,803 ‫So, 172 00:06:17,803 --> 00:06:18,880 ‫all of these sections 173 00:06:18,880 --> 00:06:20,070 ‫that we have on our page 174 00:06:20,070 --> 00:06:23,110 ‫are of course translated here as HTML. 175 00:06:23,110 --> 00:06:24,360 ‫And just like before, 176 00:06:24,360 --> 00:06:26,830 ‫I actually already created a Pug template 177 00:06:26,830 --> 00:06:30,649 ‫based on all of this HTML code. 178 00:06:30,649 --> 00:06:33,390 ‫All right, we wouldn't want to translate 179 00:06:33,390 --> 00:06:35,630 ‫this here manually together. 180 00:06:35,630 --> 00:06:36,640 ‫Okay. 181 00:06:36,640 --> 00:06:40,050 ‫So I have it here already in this template file. 182 00:06:40,050 --> 00:06:40,883 ‫But of course, 183 00:06:40,883 --> 00:06:42,630 ‫again, if you feel like it, 184 00:06:42,630 --> 00:06:44,020 ‫you can pause the video now 185 00:06:44,020 --> 00:06:46,113 ‫and translate this on your own as well. 186 00:06:47,010 --> 00:06:47,843 ‫All right. 187 00:06:47,843 --> 00:06:49,870 ‫But what I'm going to do now is to 188 00:06:49,870 --> 00:06:51,850 ‫go ahead and copy all of this code. 189 00:06:51,850 --> 00:06:54,933 ‫Which is still a ton of code as you can see. 190 00:06:56,310 --> 00:07:00,270 ‫So let's copy all of this and go into our tour 191 00:07:00,270 --> 00:07:02,090 ‫and paste that here. 192 00:07:02,090 --> 00:07:05,240 ‫Now the annotation is going to be wrong again. 193 00:07:05,240 --> 00:07:08,920 ‫So let's copy, or actually select what we just pasted here. 194 00:07:08,920 --> 00:07:11,990 ‫And so everything except the first line is incorrect. 195 00:07:11,990 --> 00:07:14,490 ‫But all we need to do here is to add one more tab. 196 00:07:15,400 --> 00:07:16,910 ‫And that's it. 197 00:07:16,910 --> 00:07:20,420 ‫So now they're all inside of this content block 198 00:07:20,420 --> 00:07:21,720 ‫all at the same level. 199 00:07:21,720 --> 00:07:22,920 ‫So section 200 00:07:22,920 --> 00:07:23,980 ‫and section 201 00:07:23,980 --> 00:07:26,410 ‫and so basically all of the sections 202 00:07:26,410 --> 00:07:27,700 ‫are now at the same level, 203 00:07:27,700 --> 00:07:29,570 ‫so they're all siblings. 204 00:07:29,570 --> 00:07:30,403 ‫Great. 205 00:07:30,403 --> 00:07:32,650 ‫So let's just close up all of these 206 00:07:32,650 --> 00:07:33,973 ‫we no longer need. 207 00:07:34,820 --> 00:07:36,070 ‫And so just like before, 208 00:07:36,070 --> 00:07:38,150 ‫we now have this static page here 209 00:07:38,150 --> 00:07:40,120 ‫with all of this static data. 210 00:07:40,120 --> 00:07:43,310 ‫Which we know we'll have to go ahead an replace. 211 00:07:43,310 --> 00:07:44,700 ‫But before actually doing that, 212 00:07:44,700 --> 00:07:46,960 ‫let's just take a look if our route 213 00:07:46,960 --> 00:07:48,173 ‫is already working. 214 00:07:49,670 --> 00:07:50,840 ‫Okay. 215 00:07:50,840 --> 00:07:52,600 ‫So let's reload it 216 00:07:52,600 --> 00:07:54,700 ‫and that gives us the same error. 217 00:07:54,700 --> 00:07:55,690 ‫And I guess that's because 218 00:07:55,690 --> 00:07:56,970 ‫here we have tours 219 00:07:56,970 --> 00:07:58,720 ‫and not tour 220 00:07:58,720 --> 00:08:00,673 ‫as I think we have it in our route. 221 00:08:03,410 --> 00:08:04,800 ‫Right so here we have tour. 222 00:08:04,800 --> 00:08:07,560 ‫And that actually is the way it makes sense. 223 00:08:07,560 --> 00:08:10,443 ‫And so let's go ahead and change that here in our 224 00:08:11,480 --> 00:08:12,313 ‫overview. 225 00:08:13,690 --> 00:08:14,950 ‫Okay and so here 226 00:08:14,950 --> 00:08:16,670 ‫we actually want tour. 227 00:08:16,670 --> 00:08:17,680 ‫'Cause in fact, 228 00:08:17,680 --> 00:08:19,950 ‫we're actually only seeing one tour 229 00:08:19,950 --> 00:08:21,333 ‫and not multiple tours. 230 00:08:22,460 --> 00:08:23,570 ‫Right? 231 00:08:23,570 --> 00:08:25,800 ‫And so if we go back to the overview now, 232 00:08:25,800 --> 00:08:27,940 ‫we load it, 233 00:08:27,940 --> 00:08:29,800 ‫and now open up The Forest Hiker, 234 00:08:29,800 --> 00:08:32,500 ‫then you see that it's going to be tour. 235 00:08:32,500 --> 00:08:33,420 ‫And then of course, 236 00:08:33,420 --> 00:08:35,533 ‫we get the HTML for the page 237 00:08:35,533 --> 00:08:38,160 ‫that we just created. 238 00:08:38,160 --> 00:08:41,360 ‫Now for some reason the CSS is not here. 239 00:08:41,360 --> 00:08:42,860 ‫Let's just try to reload this. 240 00:08:44,410 --> 00:08:46,100 ‫Well, what's going on here? 241 00:08:46,100 --> 00:08:48,340 ‫Let's try to inspect this. 242 00:08:48,340 --> 00:08:50,440 ‫And I see we have a couple of errors. 243 00:08:50,440 --> 00:08:52,510 ‫So we can click on that. 244 00:08:52,510 --> 00:08:55,000 ‫And so the reason for the missing CSS, 245 00:08:55,000 --> 00:08:57,630 ‫because instead it's trying to load the file 246 00:08:57,630 --> 00:08:58,640 ‫in the wrong place. 247 00:08:58,640 --> 00:09:01,320 ‫So it's trying to load it in the CSS folder 248 00:09:01,320 --> 00:09:02,310 ‫inside of tour. 249 00:09:02,310 --> 00:09:04,890 ‫But that of course does not exist. 250 00:09:04,890 --> 00:09:05,950 ‫And so that is because 251 00:09:05,950 --> 00:09:08,430 ‫we're here on this tour route, okay. 252 00:09:08,430 --> 00:09:10,230 ‫And so we need to basically fix 253 00:09:10,230 --> 00:09:13,493 ‫the way that we import the CSS in our base template. 254 00:09:14,850 --> 00:09:16,113 ‫Let's go there. 255 00:09:18,720 --> 00:09:19,950 ‫And so here in fact, 256 00:09:19,950 --> 00:09:23,070 ‫we should have another slash. 257 00:09:23,070 --> 00:09:25,010 ‫Okay, and the same actually here. 258 00:09:25,010 --> 00:09:25,910 ‫And so that's 259 00:09:25,910 --> 00:09:27,153 ‫for the exact same reason 260 00:09:27,153 --> 00:09:30,770 ‫that I explained to you before in the overview down here. 261 00:09:30,770 --> 00:09:33,930 ‫So we started this URL as well with a slash. 262 00:09:33,930 --> 00:09:36,260 ‫And so again, that is then going to start 263 00:09:36,260 --> 00:09:38,120 ‫at the root of the page. 264 00:09:38,120 --> 00:09:40,350 ‫And that's the way it's supposed to work. 265 00:09:40,350 --> 00:09:43,470 ‫And in fact, the same applies to all of the images here. 266 00:09:43,470 --> 00:09:45,630 ‫So all the images should always 267 00:09:45,630 --> 00:09:49,080 ‫also start relative to the root URL. 268 00:09:49,080 --> 00:09:52,030 ‫So let's add that very quickly here to all of these images. 269 00:09:54,800 --> 00:09:55,633 ‫And, 270 00:09:55,633 --> 00:09:56,590 ‫yeah, that's it. 271 00:09:56,590 --> 00:09:57,723 ‫So that's all of them. 272 00:09:58,800 --> 00:09:59,813 ‫And so, 273 00:10:01,020 --> 00:10:02,810 ‫with that we've fixed the overview 274 00:10:02,810 --> 00:10:06,210 ‫and also this base file. 275 00:10:06,210 --> 00:10:07,950 ‫So if we now reload, 276 00:10:07,950 --> 00:10:11,610 ‫we should then get access to the correct CSS. 277 00:10:11,610 --> 00:10:13,610 ‫And indeed, here we go. 278 00:10:13,610 --> 00:10:15,000 ‫There is just one more error 279 00:10:15,000 --> 00:10:16,610 ‫which is here in this image. 280 00:10:16,610 --> 00:10:17,480 ‫And so again, 281 00:10:17,480 --> 00:10:19,390 ‫it's because it's trying to load it here 282 00:10:19,390 --> 00:10:20,830 ‫from the tour 283 00:10:20,830 --> 00:10:22,830 ‫and not from the root URL. 284 00:10:22,830 --> 00:10:23,663 ‫And so, 285 00:10:23,663 --> 00:10:25,563 ‫that problem is here in the header. 286 00:10:27,040 --> 00:10:27,873 ‫And so of course, 287 00:10:27,873 --> 00:10:29,770 ‫here we also need to make it relative 288 00:10:29,770 --> 00:10:31,700 ‫to the root path. 289 00:10:31,700 --> 00:10:33,853 ‫Probably the same in the footer. 290 00:10:34,950 --> 00:10:35,783 ‫And yeah. 291 00:10:37,180 --> 00:10:38,033 ‫All right. 292 00:10:39,320 --> 00:10:41,960 ‫Just to quickly confirm that, 293 00:10:41,960 --> 00:10:43,573 ‫yeah indeed, here we go. 294 00:10:45,320 --> 00:10:46,350 ‫Great. 295 00:10:46,350 --> 00:10:47,830 ‫So as I mentioned of course, 296 00:10:47,830 --> 00:10:49,890 ‫this has all the static data 297 00:10:49,890 --> 00:10:52,380 ‫about The Park Camper Tour 298 00:10:52,380 --> 00:10:54,650 ‫which is the one that we have in the template. 299 00:10:54,650 --> 00:10:57,140 ‫But we are looking at the forest hiker. 300 00:10:57,140 --> 00:11:01,060 ‫And so, let's now start by fixing our template 301 00:11:01,060 --> 00:11:04,663 ‫and basically using the dynamic data right in here. 302 00:11:07,620 --> 00:11:10,720 ‫So, remember that the variable that we passed in here 303 00:11:10,720 --> 00:11:12,053 ‫is called tour. 304 00:11:13,210 --> 00:11:14,043 ‫Right? 305 00:11:14,043 --> 00:11:15,480 ‫So it's simply called tour 306 00:11:15,480 --> 00:11:18,100 ‫and so that's what we have to call it here. 307 00:11:18,100 --> 00:11:18,933 ‫So tour 308 00:11:19,997 --> 00:11:20,883 ‫.name, 309 00:11:21,720 --> 00:11:23,600 ‫and also the same up here. 310 00:11:23,600 --> 00:11:24,630 ‫And now you already know that 311 00:11:24,630 --> 00:11:26,840 ‫we need to use a template string here 312 00:11:26,840 --> 00:11:29,993 ‫because we in fact want to create a string. 313 00:11:31,240 --> 00:11:32,463 ‫So named .tour. 314 00:11:33,460 --> 00:11:36,543 ‫And here this path is also not correct. 315 00:11:37,920 --> 00:11:40,530 ‫First of all it needs to be a template string 316 00:11:40,530 --> 00:11:42,250 ‫and then our images, 317 00:11:42,250 --> 00:11:45,000 ‫I'll write image slash tours 318 00:11:46,280 --> 00:11:48,983 ‫slash the name of the cover image. 319 00:11:52,140 --> 00:11:53,330 ‫So tour 320 00:11:53,330 --> 00:11:56,880 ‫dot, and now I don't remember if it's image cover, 321 00:11:56,880 --> 00:11:57,933 ‫or cover image. 322 00:11:59,000 --> 00:12:00,080 ‫So, 323 00:12:00,080 --> 00:12:01,160 ‫yeah. 324 00:12:01,160 --> 00:12:01,993 ‫Image cover. 325 00:12:03,780 --> 00:12:04,613 ‫Okay. 326 00:12:04,613 --> 00:12:07,140 ‫So let's quickly try that out. 327 00:12:07,140 --> 00:12:09,830 ‫And so remember, we're at The First Hiker. 328 00:12:09,830 --> 00:12:11,580 ‫And so that should now be the name. 329 00:12:12,710 --> 00:12:14,480 ‫And yet another error. 330 00:12:14,480 --> 00:12:15,450 ‫So, 331 00:12:15,450 --> 00:12:19,310 ‫it says here, cannot read property tour of undefined. 332 00:12:19,310 --> 00:12:21,020 ‫So let's go back and 333 00:12:21,890 --> 00:12:22,770 ‫yeah. 334 00:12:22,770 --> 00:12:25,940 ‫So here is this stupid mistake. 335 00:12:25,940 --> 00:12:27,900 ‫So it's of course tour.name 336 00:12:27,900 --> 00:12:30,420 ‫and not name.tour. 337 00:12:30,420 --> 00:12:31,290 ‫So, 338 00:12:31,290 --> 00:12:32,663 ‫what was I thinking there? 339 00:12:33,980 --> 00:12:34,910 ‫Let's reload this 340 00:12:34,910 --> 00:12:37,820 ‫and now indeed, we get The Forest Hiker 341 00:12:37,820 --> 00:12:41,980 ‫with this real nice cover image in the background. 342 00:12:41,980 --> 00:12:42,813 ‫Great. 343 00:12:42,813 --> 00:12:44,373 ‫And let's keep moving here. 344 00:12:45,550 --> 00:12:47,723 ‫So create yet another template string. 345 00:12:49,980 --> 00:12:50,813 ‫Tour. 346 00:12:52,320 --> 00:12:53,343 ‫Duration, 347 00:12:55,421 --> 00:12:57,680 ‫and then the number of days. 348 00:12:57,680 --> 00:12:58,560 ‫Then down here, 349 00:12:58,560 --> 00:13:01,303 ‫we have again the start location. 350 00:13:03,020 --> 00:13:03,930 ‫So, 351 00:13:03,930 --> 00:13:05,570 ‫tour.start 352 00:13:07,000 --> 00:13:09,643 ‫location.description, remember. 353 00:13:11,440 --> 00:13:12,520 ‫All right. 354 00:13:12,520 --> 00:13:14,070 ‫Now down here 355 00:13:14,070 --> 00:13:16,220 ‫we have these overview boxes here. 356 00:13:16,220 --> 00:13:18,110 ‫So overview box detail. 357 00:13:18,110 --> 00:13:19,100 ‫And as you see, 358 00:13:19,100 --> 00:13:21,660 ‫we have four equal boxes here 359 00:13:21,660 --> 00:13:23,530 ‫where the only thing that changes 360 00:13:23,530 --> 00:13:25,687 ‫is this icon name, 361 00:13:25,687 --> 00:13:28,810 ‫then the date and the next date. 362 00:13:28,810 --> 00:13:29,643 ‫Okay, 363 00:13:29,643 --> 00:13:32,140 ‫so here what changes is not the next date, 364 00:13:32,140 --> 00:13:34,210 ‫what changes is the description of the boxes. 365 00:13:34,210 --> 00:13:36,540 ‫So next date, difficulty, 366 00:13:36,540 --> 00:13:38,500 ‫participants and rating. 367 00:13:38,500 --> 00:13:39,350 ‫All right. 368 00:13:39,350 --> 00:13:40,260 ‫And so basically, 369 00:13:40,260 --> 00:13:42,550 ‫this code here is always the same 370 00:13:42,550 --> 00:13:44,710 ‫only with three pieces that change. 371 00:13:44,710 --> 00:13:46,100 ‫So the name of the icon, 372 00:13:46,100 --> 00:13:49,560 ‫the description and the value of that description. 373 00:13:49,560 --> 00:13:50,393 ‫And so, 374 00:13:50,393 --> 00:13:53,510 ‫since we don't like repeated code, right? 375 00:13:53,510 --> 00:13:56,070 ‫Let's use another feature of Pug 376 00:13:56,070 --> 00:13:57,410 ‫that we haven't used yet 377 00:13:57,410 --> 00:13:59,500 ‫which is called mixins. 378 00:13:59,500 --> 00:14:03,060 ‫So mixins are basically reusable pieces of code 379 00:14:03,060 --> 00:14:05,060 ‫that we can pass arguments into. 380 00:14:05,060 --> 00:14:06,940 ‫So a bit like a function. 381 00:14:06,940 --> 00:14:10,400 ‫And also it's exactly like mixins in SAS. 382 00:14:10,400 --> 00:14:12,460 ‫So that's a CSS pre processor 383 00:14:12,460 --> 00:14:14,370 ‫that you might be familiar with. 384 00:14:14,370 --> 00:14:17,950 ‫So let's copy this code here for this overview box. 385 00:14:17,950 --> 00:14:19,200 ‫So copying it. 386 00:14:19,200 --> 00:14:22,240 ‫And now out here, out of this block, 387 00:14:22,240 --> 00:14:24,353 ‫let's then create a new mixin. 388 00:14:25,930 --> 00:14:29,140 ‫So we write mixin and then the name of the mixin, 389 00:14:29,140 --> 00:14:30,793 ‫which I'm calling overview box. 390 00:14:33,400 --> 00:14:35,200 ‫And then a bit like a function, 391 00:14:35,200 --> 00:14:37,200 ‫we can specify some arguments. 392 00:14:37,200 --> 00:14:41,430 ‫And so remember how we have the description of the box, 393 00:14:41,430 --> 00:14:43,600 ‫then we have the value of that description 394 00:14:43,600 --> 00:14:45,283 ‫and let's just call it text here. 395 00:14:46,241 --> 00:14:48,570 ‫And then also, the icon name. 396 00:14:48,570 --> 00:14:49,790 ‫Okay. 397 00:14:49,790 --> 00:14:52,020 ‫So now, let's copy that text in here 398 00:14:53,447 --> 00:14:54,450 ‫and of course 399 00:14:54,450 --> 00:14:56,853 ‫this now messes up our formatting. 400 00:14:58,420 --> 00:14:59,980 ‫Let's just quickly fix that. 401 00:15:02,047 --> 00:15:02,880 ‫And so now, 402 00:15:02,880 --> 00:15:04,320 ‫these variables here, 403 00:15:04,320 --> 00:15:07,940 ‫they really work like all the other variables in Pug. 404 00:15:07,940 --> 00:15:08,773 ‫So, 405 00:15:08,773 --> 00:15:11,563 ‫here this should now be the text. 406 00:15:13,640 --> 00:15:14,473 ‫Right? 407 00:15:14,473 --> 00:15:16,410 ‫And this here should be the description. 408 00:15:18,300 --> 00:15:20,920 ‫So equal description. 409 00:15:20,920 --> 00:15:23,730 ‫Well here it's actually called label in the CSS. 410 00:15:23,730 --> 00:15:26,303 ‫So let's call it label here as well. 411 00:15:28,210 --> 00:15:30,833 ‫Okay so label, text and icon. 412 00:15:31,850 --> 00:15:35,280 ‫And so here we also need to change the name of that icon 413 00:15:35,280 --> 00:15:36,530 ‫and all of these icon names 414 00:15:36,530 --> 00:15:38,730 ‫always start with icon dash. 415 00:15:38,730 --> 00:15:40,630 ‫And so all we really need to replace 416 00:15:40,630 --> 00:15:42,350 ‫is this part. 417 00:15:42,350 --> 00:15:44,963 ‫So let's create again a template string. 418 00:15:46,500 --> 00:15:48,493 ‫And then get rid of this. 419 00:15:51,690 --> 00:15:52,943 ‫And icon. 420 00:15:54,000 --> 00:15:56,363 ‫Okay and now we can use this. 421 00:15:57,310 --> 00:15:58,800 ‫I also wanted to say that 422 00:15:58,800 --> 00:16:03,200 ‫we could also have exported this mixin into another file 423 00:16:03,200 --> 00:16:05,170 ‫and then included that file here. 424 00:16:05,170 --> 00:16:07,040 ‫But I think this doesn't make much sense. 425 00:16:07,040 --> 00:16:09,780 ‫In this case because it is 426 00:16:09,780 --> 00:16:11,890 ‫not really a lot of code. 427 00:16:11,890 --> 00:16:12,723 ‫Anyway, 428 00:16:12,723 --> 00:16:15,760 ‫let's now actually go ahead and use this mixin. 429 00:16:15,760 --> 00:16:17,510 ‫So let me copy just the name of it. 430 00:16:18,490 --> 00:16:22,203 ‫And so here instead of this overview box. 431 00:16:23,290 --> 00:16:25,840 ‫And for now let me actually just duplicate it here. 432 00:16:27,290 --> 00:16:29,310 ‫Okay, so we used this mixin 433 00:16:29,310 --> 00:16:31,220 ‫by writing plus 434 00:16:31,220 --> 00:16:33,130 ‫and then just like a regular function, 435 00:16:33,130 --> 00:16:35,340 ‫we passed empty arguments into it. 436 00:16:35,340 --> 00:16:38,043 ‫And so our first overview box is next date. 437 00:16:41,150 --> 00:16:43,380 ‫Then for now, just the date that is here. 438 00:16:43,380 --> 00:16:46,383 ‫So just that I can show you that it works in fact. 439 00:16:47,600 --> 00:16:49,480 ‫So August 20, 440 00:16:49,480 --> 00:16:50,380 ‫21. 441 00:16:50,380 --> 00:16:51,363 ‫And then here, 442 00:16:52,400 --> 00:16:53,510 ‫calendar. 443 00:16:53,510 --> 00:16:56,280 ‫Okay because that's the name here of the icon. 444 00:16:56,280 --> 00:16:58,420 ‫And so now we should get 445 00:16:58,420 --> 00:16:59,810 ‫two boxes. 446 00:16:59,810 --> 00:17:01,560 ‫So this one and this one 447 00:17:01,560 --> 00:17:03,740 ‫which should look exactly the same. 448 00:17:03,740 --> 00:17:05,800 ‫So let's quickly confirm that. 449 00:17:05,800 --> 00:17:07,830 ‫And so then we can move on 450 00:17:07,830 --> 00:17:10,103 ‫to actually use the mixin properly. 451 00:17:11,220 --> 00:17:12,240 ‫And yeah, 452 00:17:12,240 --> 00:17:15,163 ‫so here are our two exactly same boxes. 453 00:17:16,450 --> 00:17:17,490 ‫Great. 454 00:17:17,490 --> 00:17:20,203 ‫So let's get rid of this first one. 455 00:17:24,450 --> 00:17:25,760 ‫And of course then here 456 00:17:25,760 --> 00:17:27,233 ‫we want the real date. 457 00:17:28,540 --> 00:17:29,410 ‫Okay. 458 00:17:29,410 --> 00:17:31,060 ‫And so that is, 459 00:17:31,060 --> 00:17:31,893 ‫add tour 460 00:17:32,917 --> 00:17:33,960 ‫.start, 461 00:17:33,960 --> 00:17:34,793 ‫dates, 462 00:17:36,450 --> 00:17:37,283 ‫zero. 463 00:17:38,330 --> 00:17:39,910 ‫So let's take a look at that. 464 00:17:39,910 --> 00:17:41,310 ‫And remember, 465 00:17:41,310 --> 00:17:43,410 ‫that this is going to look a bit weird. 466 00:17:43,410 --> 00:17:45,083 ‫Such as it did before. 467 00:17:45,920 --> 00:17:46,860 ‫Okay. 468 00:17:46,860 --> 00:17:49,820 ‫So let's ahead and fix that. 469 00:17:49,820 --> 00:17:52,503 ‫So let's actually take that from here. 470 00:17:53,610 --> 00:17:55,220 ‫And so what we need 471 00:17:55,220 --> 00:17:57,603 ‫is basically this instead. 472 00:17:59,370 --> 00:18:01,290 ‫Now I don't want to make this line here 473 00:18:01,290 --> 00:18:02,300 ‫all too long 474 00:18:02,300 --> 00:18:04,800 ‫by simply pasting that here. 475 00:18:04,800 --> 00:18:06,700 ‫And so why not just create a new 476 00:18:06,700 --> 00:18:08,560 ‫java script variable for that. 477 00:18:08,560 --> 00:18:11,100 ‫So remember we need to use this syntax here 478 00:18:11,100 --> 00:18:12,910 ‫in order to create java script code 479 00:18:12,910 --> 00:18:15,083 ‫that's not going to produce any output. 480 00:18:16,780 --> 00:18:17,613 ‫And then 481 00:18:17,613 --> 00:18:20,133 ‫again we can simply write java script here. 482 00:18:21,060 --> 00:18:21,893 ‫Okay. 483 00:18:21,893 --> 00:18:24,780 ‫And so now in here I'm going to simply use 484 00:18:24,780 --> 00:18:26,240 ‫that date. 485 00:18:26,240 --> 00:18:27,073 ‫Great. 486 00:18:27,073 --> 00:18:29,470 ‫And now let's just duplicate this here a couple of times 487 00:18:29,470 --> 00:18:31,610 ‫for all the boxes that we have. 488 00:18:31,610 --> 00:18:33,623 ‫So the first one is for difficulty. 489 00:18:37,150 --> 00:18:38,833 ‫And the icon is trending up. 490 00:18:41,970 --> 00:18:44,483 ‫Then the next one is for participants. 491 00:18:48,040 --> 00:18:50,220 ‫With the icon of user. 492 00:18:50,220 --> 00:18:52,383 ‫And the last one is rating. 493 00:18:58,010 --> 00:18:59,403 ‫And the icon is a star. 494 00:19:00,540 --> 00:19:02,770 ‫So here we have the date but, 495 00:19:02,770 --> 00:19:05,080 ‫here in the difficulty we actually have tour 496 00:19:06,860 --> 00:19:07,860 ‫.difficulty. 497 00:19:09,149 --> 00:19:10,810 ‫Then here for the participants 498 00:19:10,810 --> 00:19:12,740 ‫we want this string. 499 00:19:12,740 --> 00:19:14,053 ‫Like 10 people. 500 00:19:15,160 --> 00:19:16,830 ‫So a template string 501 00:19:18,100 --> 00:19:19,120 ‫saying tour 502 00:19:21,327 --> 00:19:22,940 ‫.mix, 503 00:19:22,940 --> 00:19:23,823 ‫group size, 504 00:19:24,740 --> 00:19:25,573 ‫and then 505 00:19:26,950 --> 00:19:28,570 ‫people. 506 00:19:28,570 --> 00:19:30,850 ‫And finally we want the rating 507 00:19:30,850 --> 00:19:32,333 ‫and then out of five. 508 00:19:37,130 --> 00:19:38,530 ‫So tour, 509 00:19:38,530 --> 00:19:40,730 ‫and I can never remember 510 00:19:40,730 --> 00:19:42,840 ‫what I called this field. 511 00:19:42,840 --> 00:19:44,673 ‫And it is ratings average. 512 00:19:49,730 --> 00:19:50,563 ‫All right. 513 00:19:50,563 --> 00:19:51,396 ‫And then, 514 00:19:51,396 --> 00:19:52,380 ‫out of 515 00:19:52,380 --> 00:19:53,213 ‫five. 516 00:19:54,560 --> 00:19:55,393 ‫Okay. 517 00:19:55,393 --> 00:19:56,530 ‫And that should be it. 518 00:19:56,530 --> 00:19:58,660 ‫Now we can get rid of all this code. 519 00:19:58,660 --> 00:20:01,760 ‫And this way it looks a lot nicer. 520 00:20:01,760 --> 00:20:03,820 ‫And just to make sure that works, 521 00:20:03,820 --> 00:20:05,203 ‫let's give it a save here, 522 00:20:06,370 --> 00:20:08,140 ‫reload, 523 00:20:08,140 --> 00:20:09,350 ‫and indeed, 524 00:20:09,350 --> 00:20:12,170 ‫we get easy, 25 people, and the rating 525 00:20:12,170 --> 00:20:13,453 ‫five out of five. 526 00:20:14,360 --> 00:20:15,193 ‫Awesome. 527 00:20:15,193 --> 00:20:17,440 ‫So we already covered a lot of ground, 528 00:20:17,440 --> 00:20:19,820 ‫but let's split this video into two 529 00:20:19,820 --> 00:20:21,930 ‫and continue with the rest of the page 530 00:20:21,930 --> 00:20:23,173 ‫right in the next one.