All language subtitles for 11. Creating the Name Cards

The next step in our process is to convert this array of names into nice looking cards.

So I should go ahead and do that right now.

So in order to do that, what I'm going to do is write to below the div.

So this div right over here that contains all of the different options.

So the options container right below it, I'm going to create another div and I'm going to give it a

class of cards container.

Some say cards container.

So this is going to house all of the different name cards.

Now, right in here, this is where we're going to have all of our cards.

So I'm going to create a div for this for each individual card.

I'm going to give this a class of card like so.

And then right in there, we're going to have the P tag for the card.

Now, what we're going to do is we're going to actually iterate over this, of course.

So in order in order to do this, we're going to use av4 and we're going to say V for name in selected

names.

And then we're going to need to provide a key.

So each name should be unique.

So the name should serve as the key as well.

Then right over here, we are going to supply it with the name itself.

So if you go over here, you should see our names.

Now, of course, they're not styled nicely, so let's go ahead and apply these styles.

So the first thing I'm going to do is for this cards container, which is going to be the container

that contains everything.

I'm going to go over here and I am going to give this a display of flex.

And then I'm going to give this same margin top.

Of three rims.

And lastly, a flex wrap.

Of rap.

Just so we can rap nice and well.

Okay.

So I was looking a okay.

I'm actually pretty happy with that.

But now all we need to do is start styling the cards themselves.

So let's go over here.

We're going to say card.

And then right over here, we're going to say the background color.

This is going to be r, g, b, r, g, b, RSA, say 27, 61, three, eight.

So a nice little blue color there.

We're going to give this a width of 28%.

So 28%.

So we can have around, I believe, maybe three per row.

So 28%.

We're also going to give this a color of white.

We're going to give us a border radius.

Of one REM padding of one REM, a margin left or a margin right, rather, of 0.10.5 REM.

And then we're going to give it a margin, bottom of one REM.

So margin bottom of one REM.

And I think that should be it for the card themselves.

Now, let's go ahead and style the P tag inside of the card.

So this is just going to be let's give this over here a position of relative.

And I'll show you exactly why we need this later.

It's just really to style that X button, which I'll show a little bit later.

But for now, let's say this one's position absolute.

And then over here, we're going to say that this is going to be top -30%.

And we're also going to say left.

This is going to be 95.5%.

We're going to say here, cursor.

Cursor, it's going to be pointer.

And over here, the color is going to be in our GBA.

And then over here we're going to have just all black.

But because it's an R GBA, I'm also going to specify some opacity.

So you might be thinking, why did we do this?

Well, the reason why we did this is because inside of here.

So inside of this right here, we're going to actually have that X so that X where that's going to allow

us to close.

And I want that to be in the top right corner.

And so that's why we did all those extra additional, you know, position relative and stuff like that.

So right over here, what we're going to do is inside of the HTML, the name itself is actually going

to live just outside of the card.

And then right over here inside of the P tag, we're just going to have that x like so we can even wrap

this in maybe like an H four and put that in there like that.

Okay.

So now you can see that we're getting our things.

So this is a little bit bigger than I thought it would be.

So let's go over here.

To this end.

Let's look at why it's too big.

The padding 0.1 REM.

I think that's what I meant to do.

Okay.

And you see here we have this little X.

Maybe we can even just make it 29, -29%.

And there you go.

You can see very faintly we have that X.

So now if we go ahead and we start clicking on all these different things, as you can see, it's working

the way that we expect it to.

So this is really, really good.

Maybe all here and see we get all of our different options.

So this is looking really, really good.

However, obviously there is still quite a bit of flaws with this.

Let's go ahead and remove this.

So the the first floor that you might see right away is that these X's don't work, so they don't allow

us to actually delete this.

So we need to fix that later.

But there's also some other issues with the way that we structured our code that I am going to try to

resolve in the next two videos.