Original subtitles

In the last lecture, we have specified exchange of data, and we have passed them to exchange a list

component.

Let's continue this lecture.

Let's create for a loop and let's display this data dynamically.

All right, let's start.

Let's open the file exchange.

Let's do the view, and let's take a look here at this age table.

I know it's quite a lot of things here, but what's important here is this columns.

Columns is multilayered, and here this live with a column is developed, mobile is six, tablet is

for wide screen and is six desktop.

What does it says here?

That I'm creating that deep of the columns is that I'm creating basically a row of columns.

Can you imagine the Melbourne have a diff of columns?

This could create a container that has a size control tower, and I want to throw with a straight line.

This is in a total of 12 columns.

Better row.

And here, video specifying your diff on the item has, for example, is for light screen is means you're

specifying four or four columns per item.

So you can see here this item has a four columns.

Four and four are here, if there will be one more item, so you can see expect three items better ones

zero.

There are 12 columns.

OK, so that's that's that's what we are, that's what we are specifying here, and as you can see here,

six tablette and six desktop and so on, then you will change the size, for example, if you are a

smaller screen to display only on a two items, because here again, this has a 12.

And if the column is a six and six, you can display only two items per barrel.

That's why I'm defining the different sizes, but it's really not important.

I just want to let you know how this works in the background.

What we want to do here.

We want to create here for ETRADE's columns.

So they need to specify only one column, and they provide here for loop, so the other one, they donate,

so go down credit, click here on the device so you can find the ending.

Here it is.

And this column here you donate.

So what you call budget will go slowly down here.

Find the ending live and slowly slide it up.

You can also hold shift shift key and an up arrow shift and up everyone.

You can select the one line after another.

You will select the entire column here.

You will remove it.

Now we have only one column.

Your money will save it and it will go back here will display only one item.

Perfect.

This will be item you won't like to create iteration on.

So it's fine.

Her column was valid on the new lines that have more space here.

And on this day, let's create V for Valor V for Directive V four.

And let's create your iteration.

Create here your item can collect.

You can call this variable as you want, for example, item in exchanges where exchanges is this your

list?

Well, you are passing through.

There is the error.

So I think in this case, it would be better to call the item, not the item, about an exchange rather.

So in the first iteration exchange, you will be.

This object.

This one here in a second iteration, it'll hold the value of this one.

OK.

So what they need to positively are also missing.

Key key is very important and defining a key, and it will be your exchange, some unique value.

What's unique about our exchange?

You can take a look.

The idea is a unique information.

It should be always different for every exchange supercapacitor exchange.

Would it be perfect if you have this?

And yeah, that should be already enough.

So but I will save it.

I'll go to browser.

I'll despite the two of the same items.

Perfect.

OK, so reiterating the first exchange of displaying this, Dave, the second time on this plane, the

same day.

So now it's time to customize it.

OK, so what we can customize furrows we have here, this image does a little bit, they this figure

here, let's put right here this glass on the new line like this and probably to the right side, the

class and a style.

OK, you can see here is a background image.

That's how you define this stylings interactively in a video again about here, Bain, so you'll like

her column style and you can try their styles like this dynamically.

You specify her objects or opening curly bracket, and then you will provide your style as you normally

would have in a success.

So in this case, background image and here in the early part, you will provide the image.

Here is a hard, good image from Unsplash.

So what do you want to do?

You want to display?

You want to remove this.

You are apart, you are apart inside.

This is entire Unsplash string.

Like this?

And don't forget your closing bracket like this because they want to have it like this, I will just

provide out on the new line so it doesn't bother us.

OK, and then you want to pass here as a euro, your value of the exchange image, so you want to get

your exchange dot image.

But you see here now the exchange, the image behaves as a normal string value.

You want to get this value from the variable exchange dot image.

Since the beginning of the string, you will change the normal quotations to Bektic.

Like this Bektic quotations, and then you will interpolate through the dolorous and curly brackets.

Like this, and you can get your value from the variable.

Now instead of the string in this case.

OK, since I've been able to save it.

I'll go here, I'll refresh.

You see these images now that are coming here from our actual value, from the variable, but this answer

pledge link you can see on your screen here this image.

Unsplash That's this like car you can see, and here is this other image as plush images this coding

screen.

That's what we are displaying now.

Here is the fan to the variable extension image, which is here.

OK.

All right, here we have an icon icon I convivial not today yet because of the need to do some styling

changes here and um, that was we have here, guys, we have here is some title.

Let's find a some title here.

Some titles, some title there.

Are you here?

This H2, let's is also a little bit of formatting.

Let's provide a class under the new line.

Then there is the element, let's select it and persuade also in your line here is ending targets.

Also enter.

So it's on a new line here and H two like this?

OK, and actually eight eight going to be on the same line because it's not so long.

So the formatting is like this.

And the trip here will be dynamically.

So far, we don't know the link, so let's leave it here because this place holder of a hedge.

And here are some details will be the value from a variable of each one.

It will be exchange dot.

It will be the curly brackets, by the way, and exchange dot.

Let's take a look into what we want to display is the title.

So exchange your title.

Exchange Dot.

Title, save it.

Take a look back here and here it is, and that's like the programming lessons to name, though we don't

have any name because they don't have.

I use that, but because this play here is like no big deal, now we'll be changing it later.

This play here to change that user.

Many will save it.

It'll be the idea of the user.

OK.

And the credit Ed, we don't have we don't have any credit in our entry.

We can we can see it in Abu Dhabi.

There is no data entry, so that will be handling later will be.

You will see how you'll be able to handle it.

OK.

It looks good so far.

Still something missing.

Well, they are missing is our attacks we are quoting.

Here are and this is going going from here.

This art here, this element and defining hard coding art.

So what we need to do here is e-trade into its.

We need to create a for loop in our attacks and display the attacks interactively in the far loop.

But this is all handled in the next lecture.

Any questions asked them and they could.

And let's see in the next two years.