1 00:00:01,130 --> 00:00:03,650 ‫Let's now fill each of the card elements 2 00:00:03,650 --> 00:00:06,583 ‫with the correct data for each of the tours. 3 00:00:08,210 --> 00:00:09,870 ‫So, just as a quick recap. 4 00:00:09,870 --> 00:00:13,690 ‫In a last video we started by creating this main element 5 00:00:13,690 --> 00:00:17,220 ‫and an inside a div container element 6 00:00:17,220 --> 00:00:19,070 ‫then inside of that container 7 00:00:19,070 --> 00:00:21,670 ‫we want one of these card elements 8 00:00:21,670 --> 00:00:24,740 ‫for each of the tours that comes in the array 9 00:00:24,740 --> 00:00:26,850 ‫that we pass in to this template. 10 00:00:26,850 --> 00:00:29,720 ‫And for that we use a Pug array that works 11 00:00:29,720 --> 00:00:30,930 ‫just like this. 12 00:00:30,930 --> 00:00:33,270 ‫So, what is each keyword here 13 00:00:33,270 --> 00:00:37,580 ‫and the result of doing that looked like this, all right. 14 00:00:37,580 --> 00:00:40,010 ‫And so what we're going to do now is to basically, 15 00:00:40,010 --> 00:00:43,773 ‫fill each of these cards here with the actual data. 16 00:00:45,610 --> 00:00:48,223 ‫And let's start here with the tour name. 17 00:00:49,940 --> 00:00:52,760 ‫So, remember how we put the value of a variable 18 00:00:52,760 --> 00:00:53,983 ‫inside of one element. 19 00:00:55,200 --> 00:00:58,970 ‫Well, we use equal and then in this case tour. 20 00:00:58,970 --> 00:01:00,310 ‫So, the name of the variable 21 00:01:00,310 --> 00:01:03,370 ‫in current loop iteration, right. 22 00:01:03,370 --> 00:01:08,270 ‫And so that's a tour document and then dot name, remember. 23 00:01:08,270 --> 00:01:11,300 ‫So, let's check that out in compass very quick. 24 00:01:11,300 --> 00:01:12,900 ‫So, here we have four tours 25 00:01:12,900 --> 00:01:14,283 ‫and so this is all of the data 26 00:01:14,283 --> 00:01:17,680 ‫that we're going to need now, okay. 27 00:01:17,680 --> 00:01:21,080 ‫And starting with the name here, okay. 28 00:01:21,080 --> 00:01:23,930 ‫And so if we now reload our page that should actually 29 00:01:23,930 --> 00:01:25,203 ‫be reflected in here. 30 00:01:26,670 --> 00:01:30,350 ‫And so this is where the magic starts and it worked. 31 00:01:30,350 --> 00:01:32,740 ‫And so this is the first time that we really see 32 00:01:32,740 --> 00:01:35,470 ‫the data from the database being actually rendered 33 00:01:35,470 --> 00:01:37,240 ‫on the website. 34 00:01:37,240 --> 00:01:41,490 ‫So, here we have the tour name for each of the tours 35 00:01:41,490 --> 00:01:46,170 ‫and again that is now coming right out of our database. 36 00:01:46,170 --> 00:01:49,270 ‫So, fantastic that's really cool 37 00:01:49,270 --> 00:01:53,240 ‫and so let's now actually continue building this card. 38 00:01:53,240 --> 00:01:55,460 ‫So, here about the image now. 39 00:01:55,460 --> 00:01:59,600 ‫Let's also put the alternative text to the tour name. 40 00:01:59,600 --> 00:02:02,530 ‫Now we cannot simply put a tour dot name here 41 00:02:03,490 --> 00:02:05,190 ‫because we're inside of a string 42 00:02:05,190 --> 00:02:06,770 ‫and so that doesn't work. 43 00:02:06,770 --> 00:02:07,730 ‫Now at the same time 44 00:02:07,730 --> 00:02:09,570 ‫if we do it like this it's also 45 00:02:09,570 --> 00:02:13,270 ‫not going to be working because here this Alt 46 00:02:13,270 --> 00:02:16,220 ‫actually expects a string, okay. 47 00:02:16,220 --> 00:02:19,350 ‫So we need some quotes here around this variable. 48 00:02:19,350 --> 00:02:21,230 ‫And so the easiest way of doing that 49 00:02:21,230 --> 00:02:24,093 ‫is to actually use ES6 template strings, okay. 50 00:02:27,700 --> 00:02:30,840 ‫So, just like this and again that's because 51 00:02:30,840 --> 00:02:34,620 ‫this actually here expects a string to be come in 52 00:02:34,620 --> 00:02:38,320 ‫and so with this of course we are creating a string. 53 00:02:38,320 --> 00:02:42,450 ‫Next up let's then specify the image here, okay. 54 00:02:42,450 --> 00:02:45,720 ‫So, let's take a look at compass again 55 00:02:45,720 --> 00:02:49,827 ‫to check out what's that cover image looks like okay. 56 00:02:49,827 --> 00:02:52,550 ‫And so we have a property called image cover 57 00:02:52,550 --> 00:02:55,960 ‫and then in here we only have the name of the image itself. 58 00:02:55,960 --> 00:02:57,760 ‫So, not the path to the image.= 59 00:02:57,760 --> 00:03:01,200 ‫and so that we will actually have to manually specify, okay. 60 00:03:01,200 --> 00:03:03,300 ‫So, but what matters here is that 61 00:03:03,300 --> 00:03:04,603 ‫it's called image cover. 62 00:03:05,700 --> 00:03:07,500 ‫And so let's get rid of all of this. 63 00:03:08,740 --> 00:03:11,730 ‫Start by creating a template string 64 00:03:11,730 --> 00:03:16,170 ‫and then tour dot image cover 65 00:03:17,160 --> 00:03:18,480 ‫and now we need to figure out 66 00:03:18,480 --> 00:03:21,700 ‫the entire path to that image, okay. 67 00:03:21,700 --> 00:03:24,480 ‫And so as we already know the image data 68 00:03:24,480 --> 00:03:26,430 ‫is inside the public folder. 69 00:03:26,430 --> 00:03:28,820 ‫So, the folder from which all the static assets 70 00:03:28,820 --> 00:03:30,400 ‫are going to be served 71 00:03:30,400 --> 00:03:32,790 ‫and so in here we have images. 72 00:03:32,790 --> 00:03:34,130 ‫And then we have a folder. 73 00:03:34,130 --> 00:03:37,833 ‫One for tours and one for users, okay. 74 00:03:39,197 --> 00:03:41,700 ‫And so inside of each of these tours 75 00:03:41,700 --> 00:03:45,423 ‫we then have the three pictures and one cover photo. 76 00:03:46,330 --> 00:03:49,120 ‫So, that's going to look something like this. 77 00:03:49,120 --> 00:03:54,120 ‫And so the path here is image dot tours or slash tours 78 00:03:56,230 --> 00:03:59,863 ‫and then slash the name of the image, great. 79 00:04:00,750 --> 00:04:04,270 ‫So that should make whole websites 80 00:04:04,270 --> 00:04:08,560 ‫look even better now yeah. 81 00:04:08,560 --> 00:04:11,770 ‫Now it's really starting to come to life. 82 00:04:11,770 --> 00:04:13,730 ‫So, that's fantastic. 83 00:04:13,730 --> 00:04:15,460 ‫This makes me feel really great 84 00:04:15,460 --> 00:04:16,993 ‫each time that it works. 85 00:04:18,090 --> 00:04:21,260 ‫Anyway, let's now take care of the rest of the data 86 00:04:21,260 --> 00:04:23,010 ‫which of course still looks the same 87 00:04:23,010 --> 00:04:26,680 ‫across all of these cards, okay. 88 00:04:26,680 --> 00:04:29,550 ‫And so let's now use the data in our collection 89 00:04:29,550 --> 00:04:31,600 ‫to build this string here. 90 00:04:31,600 --> 00:04:33,550 ‫So, you see that this actually is a combination 91 00:04:33,550 --> 00:04:35,010 ‫of a different data. 92 00:04:35,010 --> 00:04:38,630 ‫So, we have the difficulty and the tour duration 93 00:04:38,630 --> 00:04:41,710 ‫and so let's here now create a template string. 94 00:04:41,710 --> 00:04:46,093 ‫So, basically assign this template string to this element. 95 00:04:48,100 --> 00:04:53,083 ‫And so we start here with tour dot difficulty, 96 00:04:54,410 --> 00:04:59,410 ‫remember, then the space and then the tour duration, 97 00:05:01,090 --> 00:05:05,763 ‫tour dot duration day tour, okay. 98 00:05:10,400 --> 00:05:14,030 ‫So, that's the translation of this content. 99 00:05:14,030 --> 00:05:18,413 ‫Then next up what we have here is the tour summary, okay. 100 00:05:19,700 --> 00:05:24,700 ‫So, equal tour dot summary, all right. 101 00:05:26,520 --> 00:05:29,870 ‫Then next up we have the start location 102 00:05:29,870 --> 00:05:31,720 ‫and so this tour for example 103 00:05:31,720 --> 00:05:34,470 ‫starts in Banff Canada and so again 104 00:05:34,470 --> 00:05:36,520 ‫let's take a look at compass here 105 00:05:36,520 --> 00:05:38,520 ‫just to see how the data looks like 106 00:05:38,520 --> 00:05:40,740 ‫or actually we don't need to always be switching 107 00:05:40,740 --> 00:05:42,520 ‫back and forth to compass. 108 00:05:42,520 --> 00:05:46,340 ‫We can also just open up or or import data here. 109 00:05:49,170 --> 00:05:52,850 ‫So, on the tours we can simply use this data here 110 00:05:52,850 --> 00:05:55,980 ‫instead of always going to compass. 111 00:05:55,980 --> 00:05:57,810 ‫So, before we use the summary 112 00:05:57,810 --> 00:06:00,400 ‫now let's go ahead and use the start location 113 00:06:01,600 --> 00:06:03,040 ‫which is actually up here. 114 00:06:03,040 --> 00:06:07,083 ‫So, now we want start location dot description, okay. 115 00:06:09,570 --> 00:06:14,570 ‫So, tour dot start location dot description. 116 00:06:17,630 --> 00:06:19,090 ‫And so now you start to see 117 00:06:19,090 --> 00:06:21,480 ‫why it made sense to actually create 118 00:06:21,480 --> 00:06:24,450 ‫all of this different data that we created here. 119 00:06:24,450 --> 00:06:28,010 ‫Right, next up we're gonna use to start dates 120 00:06:28,010 --> 00:06:29,520 ‫and so keep in mind. 121 00:06:29,520 --> 00:06:32,010 ‫That this is an array, okay. 122 00:06:32,010 --> 00:06:34,900 ‫Because now what we want in our overview 123 00:06:34,900 --> 00:06:38,680 ‫is basically the date where the next tour starts. 124 00:06:38,680 --> 00:06:41,710 ‫So, that's what is icon with a calendar here 125 00:06:41,710 --> 00:06:42,923 ‫means in this case. 126 00:06:44,260 --> 00:06:46,470 ‫So, that's basically the first element 127 00:06:46,470 --> 00:06:50,710 ‫of that start dates array. 128 00:06:50,710 --> 00:06:55,680 ‫So, start dates at position 0. 129 00:06:55,680 --> 00:06:59,960 ‫Next up we have this piece of data which says 130 00:06:59,960 --> 00:07:02,320 ‫how many stops there are in these tours. 131 00:07:02,320 --> 00:07:03,670 ‫And so basically that means 132 00:07:03,670 --> 00:07:06,000 ‫how many locations we have 133 00:07:06,000 --> 00:07:09,210 ‫and so again we're going to use the locations 134 00:07:09,210 --> 00:07:11,120 ‫and this time not start location 135 00:07:11,120 --> 00:07:13,770 ‫but really this locations 136 00:07:13,770 --> 00:07:17,350 ‫and so if you want to specify how many locations we have. 137 00:07:17,350 --> 00:07:21,493 ‫Well then we need to count the length of this array, okay. 138 00:07:22,910 --> 00:07:24,560 ‫And so that simple as well. 139 00:07:24,560 --> 00:07:27,370 ‫So, equal and then set it to this template string 140 00:07:27,370 --> 00:07:29,830 ‫because we also want to add this stop 141 00:07:31,840 --> 00:07:36,807 ‫and so tour dot locations dot length stops 142 00:07:42,850 --> 00:07:45,740 ‫and finally the amount of people 143 00:07:45,740 --> 00:07:49,070 ‫that are part of each of the groups. 144 00:07:49,070 --> 00:07:52,990 ‫So, the people that can participate in one tour 145 00:07:52,990 --> 00:07:55,110 ‫and so that is stored at tour 146 00:07:56,750 --> 00:08:00,053 ‫but max group size, remember. 147 00:08:02,440 --> 00:08:03,953 ‫And then people. 148 00:08:05,950 --> 00:08:08,990 ‫Great, so that part is done now 149 00:08:08,990 --> 00:08:12,550 ‫and so let's actually go back to our website 150 00:08:12,550 --> 00:08:13,743 ‫and test that out. 151 00:08:15,270 --> 00:08:20,150 ‫And yeah beautiful at least almost beautiful 152 00:08:20,150 --> 00:08:23,030 ‫because this date looks kind of weird here. 153 00:08:23,030 --> 00:08:28,030 ‫So, we really just want June twenty twenty-one 154 00:08:28,500 --> 00:08:30,550 ‫so we don't need to be all that specific here 155 00:08:30,550 --> 00:08:32,630 ‫in this overview, okay. 156 00:08:32,630 --> 00:08:37,630 ‫And so what we want is to look like is again June 2021 157 00:08:38,200 --> 00:08:41,620 ‫and so right now it's all of this mess 158 00:08:41,620 --> 00:08:43,560 ‫and so let's fix that 159 00:08:43,560 --> 00:08:45,910 ‫and thankfully that's actually very easy 160 00:08:45,910 --> 00:08:48,640 ‫with JavaScript which includes a couple 161 00:08:48,640 --> 00:08:51,640 ‫of very nice functions to work with dates. 162 00:08:51,640 --> 00:08:55,100 ‫And keep in mind that each of these start dates here 163 00:08:55,100 --> 00:08:57,920 ‫really is a date object in or database 164 00:08:57,920 --> 00:09:01,120 ‫and so now we can use a function like this one 165 00:09:01,120 --> 00:09:06,120 ‫to local string, okay. 166 00:09:06,510 --> 00:09:09,260 ‫So, basically it will convert this date 167 00:09:09,260 --> 00:09:11,440 ‫into a nice readable string 168 00:09:11,440 --> 00:09:15,580 ‫and in here we can now pass an option for the language. 169 00:09:15,580 --> 00:09:18,080 ‫And so that is English for US 170 00:09:19,570 --> 00:09:22,580 ‫and then also an object with some options 171 00:09:22,580 --> 00:09:25,481 ‫and so here we can now specify that we want 172 00:09:25,481 --> 00:09:27,093 ‫a month to be long. 173 00:09:29,330 --> 00:09:31,870 ‫So, instead of just an abbreviation 174 00:09:31,870 --> 00:09:32,940 ‫like we had here. 175 00:09:32,940 --> 00:09:34,910 ‫so, one April, one Aug 176 00:09:34,910 --> 00:09:36,970 ‫it will now print it out like this. 177 00:09:36,970 --> 00:09:41,560 ‫So, really the name of the entire month and okay 178 00:09:41,560 --> 00:09:46,557 ‫and then also saying that the year should be numeric 179 00:09:48,380 --> 00:09:50,757 ‫and if you want to learn more about this function here 180 00:09:50,757 --> 00:09:55,180 ‫then just go ahead and Google that, okay. 181 00:09:55,180 --> 00:09:57,810 ‫So, let's try that out again 182 00:09:59,550 --> 00:10:02,930 ‫and now it looks really nice, awesome. 183 00:10:02,930 --> 00:10:06,980 ‫So, let's keep it moving and finish this last part here 184 00:10:06,980 --> 00:10:09,723 ‫with the price and the rating details. 185 00:10:11,640 --> 00:10:14,700 ‫And so that's down here in the card footer 186 00:10:14,700 --> 00:10:17,150 ‫and so here that's just the price. 187 00:10:17,150 --> 00:10:21,240 ‫So, equal to let's actually leave it there 188 00:10:21,240 --> 00:10:23,810 ‫because now we still need a template string 189 00:10:23,810 --> 00:10:27,910 ‫because the price is not only this number 190 00:10:31,370 --> 00:10:34,120 ‫but actually we need an extra dollar sign here 191 00:10:34,120 --> 00:10:35,250 ‫for the dollar price. 192 00:10:35,250 --> 00:10:36,433 ‫So, this one, right. 193 00:10:39,620 --> 00:10:42,410 ‫Next up we have the average rating here. 194 00:10:42,410 --> 00:10:45,300 ‫So, that's this and so we already know 195 00:10:45,300 --> 00:10:50,300 ‫that this is called tour dot average rating. 196 00:10:51,020 --> 00:10:54,560 ‫So, we used that so many times at least I believe. 197 00:10:54,560 --> 00:10:59,240 ‫Let's just confirm it so actually it's ratings average 198 00:10:59,240 --> 00:11:01,490 ‫and then also ratings quantity. 199 00:11:01,490 --> 00:11:03,488 ‫So, let's just copy this. 200 00:11:03,488 --> 00:11:05,890 ‫So, ratings average 201 00:11:05,890 --> 00:11:10,073 ‫and now here we want ratings quantity. 202 00:11:16,320 --> 00:11:19,270 ‫All right, but of course this needs to be a template string 203 00:11:23,390 --> 00:11:25,560 ‫and then here set it to equal 204 00:11:25,560 --> 00:11:30,450 ‫and then of course interpolate the variable name in here 205 00:11:30,450 --> 00:11:33,490 ‫and now finally we need to build the URL 206 00:11:33,490 --> 00:11:36,220 ‫to the detail page, okay. 207 00:11:36,220 --> 00:11:39,180 ‫So, remember that when we click on one of the cards. 208 00:11:39,180 --> 00:11:41,280 ‫It then takes us to the detail page 209 00:11:41,280 --> 00:11:44,550 ‫and so of course here we now need to specify that link 210 00:11:45,410 --> 00:11:48,800 ‫because of course that will depend on each tour. 211 00:11:48,800 --> 00:11:52,380 ‫So, we want to link to be slash tours 212 00:11:52,380 --> 00:11:54,760 ‫and then remember how I mentioned before 213 00:11:54,760 --> 00:11:57,530 ‫that for rendering these pages we actually 214 00:11:57,530 --> 00:12:00,050 ‫will want to query tours by their slug 215 00:12:00,050 --> 00:12:01,870 ‫and not by their ID. 216 00:12:01,870 --> 00:12:04,620 ‫How we did it in the API okay, 217 00:12:04,620 --> 00:12:09,620 ‫because that actually makes the URL look a much nicer, okay. 218 00:12:09,920 --> 00:12:11,973 ‫And so let's use that here now. 219 00:12:13,430 --> 00:12:18,130 ‫So tour dot slug 220 00:12:18,130 --> 00:12:20,200 ‫and so just to explain you 221 00:12:20,200 --> 00:12:23,110 ‫why we start this URL here with a slash. 222 00:12:23,110 --> 00:12:26,230 ‫It is because building a URL like this 223 00:12:26,230 --> 00:12:30,140 ‫so starting only with the slash is called a relative URL 224 00:12:30,140 --> 00:12:31,620 ‫and what this will do is that 225 00:12:31,620 --> 00:12:35,020 ‫it will then add at this piece of the URL 226 00:12:35,020 --> 00:12:36,640 ‫after the host name. 227 00:12:36,640 --> 00:12:41,540 ‫So, that host is right now one to seven point zero zero one 228 00:12:41,540 --> 00:12:44,170 ‫but that is not necessary to specify here 229 00:12:44,170 --> 00:12:47,710 ‫because again when writing a relative URL like this 230 00:12:47,710 --> 00:12:51,663 ‫it will then add what we have here to that host name, okay. 231 00:12:53,135 --> 00:12:56,490 ‫So, let's reload that again 232 00:12:56,490 --> 00:12:58,930 ‫and so we're almost finished here 233 00:12:58,930 --> 00:13:00,250 ‫not quite ready. 234 00:13:00,250 --> 00:13:01,750 ‫So, here you see undefined 235 00:13:01,750 --> 00:13:03,820 ‫and so we probably did something wrong there. 236 00:13:03,820 --> 00:13:06,490 ‫And also you see that there is no space here 237 00:13:06,490 --> 00:13:08,650 ‫between the price and the per person 238 00:13:08,650 --> 00:13:11,440 ‫and also here the same now. 239 00:13:11,440 --> 00:13:13,360 ‫If you hover this button here 240 00:13:13,360 --> 00:13:15,550 ‫then down there in the left corner. 241 00:13:15,550 --> 00:13:18,400 ‫So, down here you will see the URL 242 00:13:18,400 --> 00:13:19,780 ‫that we just build. 243 00:13:19,780 --> 00:13:21,040 ‫Can actually click it 244 00:13:21,040 --> 00:13:23,010 ‫and it will then give us this error 245 00:13:23,010 --> 00:13:25,470 ‫because of course we didn't define this route yet 246 00:13:25,470 --> 00:13:27,390 ‫but you see that it looks really nice here 247 00:13:27,390 --> 00:13:30,660 ‫with the tours slash the forest hiker 248 00:13:30,660 --> 00:13:35,660 ‫instead of having that ugly looking ID up there, okay. 249 00:13:35,950 --> 00:13:38,270 ‫But anyway let's now fix this undefined 250 00:13:38,270 --> 00:13:39,563 ‫in this missing space. 251 00:13:40,610 --> 00:13:44,550 ‫So, let's take a look at this one. 252 00:13:44,550 --> 00:13:49,270 ‫Well, it looks correct actually ratings, quantity 253 00:13:50,290 --> 00:13:54,690 ‫but of course we're missing this tour dot, okay. 254 00:13:54,690 --> 00:13:57,770 ‫You probably were already seeing that one. 255 00:13:57,770 --> 00:13:59,360 ‫Now about that missing space. 256 00:13:59,360 --> 00:14:02,950 ‫There's something new that I need to show you about pug 257 00:14:02,950 --> 00:14:06,050 ‫which is this so-called empty piped lane 258 00:14:07,090 --> 00:14:08,950 ‫or a line, actually. 259 00:14:08,950 --> 00:14:11,080 ‫So, whenever we need a real space 260 00:14:11,080 --> 00:14:13,220 ‫between two inline-block elements 261 00:14:13,220 --> 00:14:15,610 ‫which are these bands then we need 262 00:14:15,610 --> 00:14:17,210 ‫to manually create that space 263 00:14:17,210 --> 00:14:20,840 ‫using this piped line here like this, okay. 264 00:14:20,840 --> 00:14:23,180 ‫And the same thing down here 265 00:14:23,180 --> 00:14:25,260 ‫because otherwise as we just saw 266 00:14:25,260 --> 00:14:27,660 ‫it will simply glue all of these elements 267 00:14:27,660 --> 00:14:31,120 ‫then together, all right. 268 00:14:31,120 --> 00:14:33,880 ‫So, now all of that should be fixed 269 00:14:33,880 --> 00:14:37,260 ‫and that space is still not there 270 00:14:37,260 --> 00:14:40,070 ‫and that's actually because we forgot something. 271 00:14:40,070 --> 00:14:41,750 ‫And so let's go back 272 00:14:41,750 --> 00:14:44,080 ‫and we actually need to manually add 273 00:14:44,080 --> 00:14:47,600 ‫that empty space here and here. 274 00:14:47,600 --> 00:14:50,290 ‫So, this empty pipe line here basically, 275 00:14:50,290 --> 00:14:53,390 ‫creates a space for us where we can then create content 276 00:14:53,390 --> 00:14:55,020 ‫outside of an element 277 00:14:55,020 --> 00:14:57,690 ‫and so that's basically what this space is. 278 00:14:57,690 --> 00:14:59,930 ‫So, this space here that we just put here. 279 00:14:59,930 --> 00:15:03,180 ‫So, this empty space it's content that's not inside 280 00:15:03,180 --> 00:15:05,830 ‫of any of these two elements. 281 00:15:05,830 --> 00:15:08,690 ‫And so again in order to be able to do that 282 00:15:08,690 --> 00:15:10,880 ‫that's what we need this pipeline for. 283 00:15:10,880 --> 00:15:13,423 ‫So, these two pipelines. 284 00:15:14,960 --> 00:15:17,020 ‫So, try that again 285 00:15:17,020 --> 00:15:18,870 ‫and now indeed here goes the space 286 00:15:18,870 --> 00:15:21,670 ‫that we just created, perfect. 287 00:15:21,670 --> 00:15:25,010 ‫And with that we actually wrap up this lecture 288 00:15:25,010 --> 00:15:28,140 ‫and this stunningly looking first website 289 00:15:28,140 --> 00:15:32,110 ‫or part of the website that we just built here together. 290 00:15:32,110 --> 00:15:35,651 ‫So, a moment to appreciate how cool this really is 291 00:15:35,651 --> 00:15:38,280 ‫and also how all of this code 292 00:15:38,280 --> 00:15:42,340 ‫that we wrote it together actually works, okay. 293 00:15:42,340 --> 00:15:44,560 ‫And then after that come right back 294 00:15:44,560 --> 00:15:47,693 ‫so that we can build together the tour overview page.