All language subtitles for 010 Building the Tour Overview - Part 2_Downloadly.ir_en

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.