‫Let's now fill each of the card elements
‫with the correct data for each of the tours.
‫So, just as a quick recap.
‫In a last video we started by creating this main element
‫and an inside a div container element
‫then inside of that container
‫we want one of these card elements
‫for each of the tours that comes in the array
‫that we pass in to this template.
‫And for that we use a Pug array that works
‫just like this.
‫So, what is each keyword here
‫and the result of doing that looked like this, all right.
‫And so what we're going to do now is to basically,
‫fill each of these cards here with the actual data.
‫And let's start here with the tour name.
‫So, remember how we put the value of a variable
‫inside of one element.
‫Well, we use equal and then in this case tour.
‫So, the name of the variable
‫in current loop iteration, right.
‫And so that's a tour document and then dot name, remember.
‫So, let's check that out in compass very quick.
‫So, here we have four tours
‫and so this is all of the data
‫that we're going to need now, okay.
‫And starting with the name here, okay.
‫And so if we now reload our page that should actually
‫be reflected in here.
‫And so this is where the magic starts and it worked.
‫And so this is the first time that we really see
‫the data from the database being actually rendered
‫on the website.
‫So, here we have the tour name for each of the tours
‫and again that is now coming right out of our database.
‫So, fantastic that's really cool
‫and so let's now actually continue building this card.
‫So, here about the image now.
‫Let's also put the alternative text to the tour name.
‫Now we cannot simply put a tour dot name here
‫because we're inside of a string
‫and so that doesn't work.
‫Now at the same time
‫if we do it like this it's also
‫not going to be working because here this Alt
‫actually expects a string, okay.
‫So we need some quotes here around this variable.
‫And so the easiest way of doing that
‫is to actually use ES6 template strings, okay.
‫So, just like this and again that's because
‫this actually here expects a string to be come in
‫and so with this of course we are creating a string.
‫Next up let's then specify the image here, okay.
‫So, let's take a look at compass again
‫to check out what's that cover image looks like okay.
‫And so we have a property called image cover
‫and then in here we only have the name of the image itself.
‫So, not the path to the image.=
‫and so that we will actually have to manually specify, okay.
‫So, but what matters here is that
‫it's called image cover.
‫And so let's get rid of all of this.
‫Start by creating a template string
‫and then tour dot image cover
‫and now we need to figure out
‫the entire path to that image, okay.
‫And so as we already know the image data
‫is inside the public folder.
‫So, the folder from which all the static assets
‫are going to be served
‫and so in here we have images.
‫And then we have a folder.
‫One for tours and one for users, okay.
‫And so inside of each of these tours
‫we then have the three pictures and one cover photo.
‫So, that's going to look something like this.
‫And so the path here is image dot tours or slash tours
‫and then slash the name of the image, great.
‫So that should make whole websites
‫look even better now yeah.
‫Now it's really starting to come to life.
‫So, that's fantastic.
‫This makes me feel really great
‫each time that it works.
‫Anyway, let's now take care of the rest of the data
‫which of course still looks the same
‫across all of these cards, okay.
‫And so let's now use the data in our collection
‫to build this string here.
‫So, you see that this actually is a combination
‫of a different data.
‫So, we have the difficulty and the tour duration
‫and so let's here now create a template string.
‫So, basically assign this template string to this element.
‫And so we start here with tour dot difficulty,
‫remember, then the space and then the tour duration,
‫tour dot duration day tour, okay.
‫So, that's the translation of this content.
‫Then next up what we have here is the tour summary, okay.
‫So, equal tour dot summary, all right.
‫Then next up we have the start location
‫and so this tour for example
‫starts in Banff Canada and so again
‫let's take a look at compass here
‫just to see how the data looks like
‫or actually we don't need to always be switching
‫back and forth to compass.
‫We can also just open up or or import data here.
‫So, on the tours we can simply use this data here
‫instead of always going to compass.
‫So, before we use the summary
‫now let's go ahead and use the start location
‫which is actually up here.
‫So, now we want start location dot description, okay.
‫So, tour dot start location dot description.
‫And so now you start to see
‫why it made sense to actually create
‫all of this different data that we created here.
‫Right, next up we're gonna use to start dates
‫and so keep in mind.
‫That this is an array, okay.
‫Because now what we want in our overview
‫is basically the date where the next tour starts.
‫So, that's what is icon with a calendar here
‫means in this case.
‫So, that's basically the first element
‫of that start dates array.
‫So, start dates at position 0.
‫Next up we have this piece of data which says
‫how many stops there are in these tours.
‫And so basically that means
‫how many locations we have
‫and so again we're going to use the locations
‫and this time not start location
‫but really this locations
‫and so if you want to specify how many locations we have.
‫Well then we need to count the length of this array, okay.
‫And so that simple as well.
‫So, equal and then set it to this template string
‫because we also want to add this stop
‫and so tour dot locations dot length stops
‫and finally the amount of people
‫that are part of each of the groups.
‫So, the people that can participate in one tour
‫and so that is stored at tour
‫but max group size, remember.
‫And then people.
‫Great, so that part is done now
‫and so let's actually go back to our website
‫and test that out.
‫And yeah beautiful at least almost beautiful
‫because this date looks kind of weird here.
‫So, we really just want June twenty twenty-one
‫so we don't need to be all that specific here
‫in this overview, okay.
‫And so what we want is to look like is again June 2021
‫and so right now it's all of this mess
‫and so let's fix that
‫and thankfully that's actually very easy
‫with JavaScript which includes a couple
‫of very nice functions to work with dates.
‫And keep in mind that each of these start dates here
‫really is a date object in or database
‫and so now we can use a function like this one
‫to local string, okay.
‫So, basically it will convert this date
‫into a nice readable string
‫and in here we can now pass an option for the language.
‫And so that is English for US
‫and then also an object with some options
‫and so here we can now specify that we want
‫a month to be long.
‫So, instead of just an abbreviation
‫like we had here.
‫so, one April, one Aug
‫it will now print it out like this.
‫So, really the name of the entire month and okay
‫and then also saying that the year should be numeric
‫and if you want to learn more about this function here
‫then just go ahead and Google that, okay.
‫So, let's try that out again
‫and now it looks really nice, awesome.
‫So, let's keep it moving and finish this last part here
‫with the price and the rating details.
‫And so that's down here in the card footer
‫and so here that's just the price.
‫So, equal to let's actually leave it there
‫because now we still need a template string
‫because the price is not only this number
‫but actually we need an extra dollar sign here
‫for the dollar price.
‫So, this one, right.
‫Next up we have the average rating here.
‫So, that's this and so we already know
‫that this is called tour dot average rating.
‫So, we used that so many times at least I believe.
‫Let's just confirm it so actually it's ratings average
‫and then also ratings quantity.
‫So, let's just copy this.
‫So, ratings average
‫and now here we want ratings quantity.
‫All right, but of course this needs to be a template string
‫and then here set it to equal
‫and then of course interpolate the variable name in here
‫and now finally we need to build the URL
‫to the detail page, okay.
‫So, remember that when we click on one of the cards.
‫It then takes us to the detail page
‫and so of course here we now need to specify that link
‫because of course that will depend on each tour.
‫So, we want to link to be slash tours
‫and then remember how I mentioned before
‫that for rendering these pages we actually
‫will want to query tours by their slug
‫and not by their ID.
‫How we did it in the API okay,
‫because that actually makes the URL look a much nicer, okay.
‫And so let's use that here now.
‫So tour dot slug
‫and so just to explain you
‫why we start this URL here with a slash.
‫It is because building a URL like this
‫so starting only with the slash is called a relative URL
‫and what this will do is that
‫it will then add at this piece of the URL
‫after the host name.
‫So, that host is right now one to seven point zero zero one
‫but that is not necessary to specify here
‫because again when writing a relative URL like this
‫it will then add what we have here to that host name, okay.
‫So, let's reload that again
‫and so we're almost finished here
‫not quite ready.
‫So, here you see undefined
‫and so we probably did something wrong there.
‫And also you see that there is no space here
‫between the price and the per person
‫and also here the same now.
‫If you hover this button here
‫then down there in the left corner.
‫So, down here you will see the URL
‫that we just build.
‫Can actually click it
‫and it will then give us this error
‫because of course we didn't define this route yet
‫but you see that it looks really nice here
‫with the tours slash the forest hiker
‫instead of having that ugly looking ID up there, okay.
‫But anyway let's now fix this undefined
‫in this missing space.
‫So, let's take a look at this one.
‫Well, it looks correct actually ratings, quantity
‫but of course we're missing this tour dot, okay.
‫You probably were already seeing that one.
‫Now about that missing space.
‫There's something new that I need to show you about pug
‫which is this so-called empty piped lane
‫or a line, actually.
‫So, whenever we need a real space
‫between two inline-block elements
‫which are these bands then we need
‫to manually create that space
‫using this piped line here like this, okay.
‫And the same thing down here
‫because otherwise as we just saw
‫it will simply glue all of these elements
‫then together, all right.
‫So, now all of that should be fixed
‫and that space is still not there
‫and that's actually because we forgot something.
‫And so let's go back
‫and we actually need to manually add
‫that empty space here and here.
‫So, this empty pipe line here basically,
‫creates a space for us where we can then create content
‫outside of an element
‫and so that's basically what this space is.
‫So, this space here that we just put here.
‫So, this empty space it's content that's not inside
‫of any of these two elements.
‫And so again in order to be able to do that
‫that's what we need this pipeline for.
‫So, these two pipelines.
‫So, try that again
‫and now indeed here goes the space
‫that we just created, perfect.
‫And with that we actually wrap up this lecture
‫and this stunningly looking first website
‫or part of the website that we just built here together.
‫So, a moment to appreciate how cool this really is
‫and also how all of this code
‫that we wrote it together actually works, okay.
‫And then after that come right back
‫so that we can build together the tour overview page.