All language subtitles for 094 CHALLENGE 1_ Building a Pagination Component.en_US

Welcome to the coding challenge

of this section.

So we have built a couple of components together.

And so now it's time

for you to actually build this component here on your own.

So basically this very simple pagination component

that you see here, on the right side.

And this is what the final result should look and work like.

So when we hover over these buttons here,

they get this green background color

and the same here for each of the page's link.

So here, I want you to use two buttons,

one to go to the previous and one to go to the next page.

Then these, in here, are simply links.

So anchor elements.

And then we also have these dots here,

which is a simple span text element.

All right, now,

I don't want you to use any absolute positioning here

or anything like that.

So these buttons look the same or very similar

to the ones that we used in the carousel component,

but there we used some absolute positioning,

which is not necessary in this case.

So we don't have any visual container here.

And so this one here is simply going to be the first element

and this the last one, all right.

Then notice how all of this, here, is vertically aligned

and also how this entire pagination

is centered in the browser.

All right.

And so, I think that is enough for the instructions.

So please go ahead and try to build this challenge now.

And this is probably going to be the hardest challenge

of all yet in this course.

And so please don't be discouraged

in case there is something that you cannot really do.

So just try to do all that you can.

So basically trying your best

because that's, as always, the most important thing.

So pause the video now, here,

and then come back for the solution once you're done.

Okay.

So how did that go?

Hopefully you managed to do a part of this pagination,

and so now here comes the solution,

in case you missed anything.

So let me, as always, get the starter code

basically from this component file, then paste that here,

collapse the sidebar,

and I will now start here writing the HTML as always.

Now here we want a "div" with the class of "pagination".

Now, of course we need to close that.

And then we can immediately start

with the first button element, here,

which will contain this icon.

So you could have copied that from the carousel component

or also, of course, here from the Hero Icons.

So that's what I'm doing now.

All right.

So this one, let's actually give it to class of "btn"

and this one here, "btn-icon,

then let's build our anchor elements.

And I didn't mention that they shouldn't point anywhere,

but hopefully you figured that one out on your own.

So calling these one "page-link".

but of course you could have called them whatever you liked.

Okay.

So copy/pasting this a couple of times.

So 1, 2, 3, 4, 5, 6, and then the last one,

for page 23...

3, 4, 5, 6,

and 23.

Okay.

And then, also ,here between the six and the 23.

So basically before the last one, we have some dots.

So basically indicating that there are more than six pages

and in total 23 pages.

So that's a common thing to do in a pagination like this.

And as I mentioned here,

I'm going to use a span element

with the class of just "dots"

and then here, well the three dots.

Okay.

And let's now take a look here, at what it looks like.

So we need to reload this usually, and then here we go.

So we have the button here, which is again,

very small and we're missing actually the last button.

So again, let's call it "btn"

and then let's grab this icon here,

with the class of "btn-icon".

Okay.

And now I will copy all of this, here again,

with the trick of hitting alt or option at the same time.

And I think that's it.

So copying everything...

and there we go.

Now, actually I'm going to do the same trick here again,

because now I want to write the same thing in all of them.

So we want add a dot,

then we can go all the way to the end

and then we can write this...

like this.

All right.

So we saved some time there and let's now start styling them

one by one here.

And I will actually, again, start with the icon

because that's what makes these buttons here

look so small right now.

So we're giving them, again,

a height and width of 24 pixels.

So 24 at the end, of course, the green color.

So that's again using the stroke property.

All right.

So those are the icons.

And remember that it's supposed to be this round

with the green border around the button.

So let's start with that actually,

border one, pixel "solid".

Then let's give it some height and some width here as well.

And let's make it double the one of the icons themselves.

So 48 pixels, and then for the round corners,

so basically to make it round,

remember we use a border radius of 50%.

All right, nice.

Now we just need to get rid of the background color,

which these buttons always have by default.

And we also want to add that cursor.

Yes, always.

Well, that didn't work,

but that's because here we actually need "background",

not just "background-color".

Okay.

Now let's do the visual formatting

of these individual links here.

So that is "page-link."

And then of course we need to add our pseudo classes,

which are the "link"...

and the "visited" here first,

and then remember also "hover" and "visited",

or actually "hover" and "active".

So let's start with the regular link styling.

Let's make them a little bit bigger.

18 pixels, let's say.

Then we also want the color to be our gray.

So the one that we have always been using.

And we want to get rid of the underlining.

So that's "text-decoration", "none".

And now, as for the hover effect,

let's again check out how that looks like.

So basically there is this circle around each of the links,

which then becomes green as we hover over it.

Now,

what that means is that this circle, actually,

needs to kind of exist already in the predefined link.

So in the state before the hover, right?

So let's actually do that.

And, as always, to make that work visually,

let's give it some background color here first.

And so now, of course, it's only a square.

And if so,

if we hovered or if we gave it some style now for the hover,

then only that square would become green.

And also the color white since we're here already.

So right,

now only this square that's around the actual element

or behind the element would become green.

And so we need to make that circle here at this point.

So in order to do that, we give it a height and a width.

So 36,

which is one of the values that is in the spacing system

and the width of 36 as well.

And so by this,

we can ensure that it is an actual square.

Now, right now, this didn't work yet

because, remember that, by default,

this is an inline element,

and so therefore it's not going to work.

Inline block.

And so now they are squares as expected.

So to inline elements, height and width does not apply,

right?

And so we need to change that to something else.

Great. So now we have the square that we can make round.

And by the way,

we couldn't use padding in order to create this new space,

because by doing that,

we could not ensure that they would be perfect squares,

but by doing this, we can.

Now we also need to center the text now,

inside of the squares,

both horizontally and vertically, right?

So once again, what is a nice trick to do that?

Well, we can do that, once again, using Flexbox.

And I think we did this trick before.

So basically using Flexbox simply to center the text

that is inside of an element,

both horizontally and vertically.

So here actually

we do not want "inline block" as the display property,

but "flex", and then here "align-items", "center",

and also "justify content", "center".

All right, there we go.

Now these links here, suddenly got stacked.

So they're now one below the other,

and that's because basically by default,

a flex container is also something like a block element.

So again,

each of these page links here is now a flex container,

right?

And, by default, flex containers

are also like block elements.

And so, therefore,

each of these elements now here occupies its own line.

All right.

So let's fix that in a moment,

but in order not to jump around all the time,

let's finish this part here first.

So we still need to make them round.

So that's border radius 50%, right.

And then we need to get rid, of course,

of this background color.

And so now that is actually the effect

that we were going for. Right?

Okay.

Actually, we also need the same effect here

on these buttons, right?

So we need to quickly implement that as well.

So that is "btn", "hover".

So background color, this green.

And now of course,

we also need to make the icon itself white.

Like this is impossible to see it, right?

Now here, we need to do this.

So let me write it first and then explain.

So we are still interested in what happens

when we hover the button here and not the button icon.

And so what we want to happen is that the icon turns white

when we hover the button.

And so that's why we write "btn, "hover" like we did before.

And then as a child of that condition,

basically "btn", "icon" selector.

And so that is where the stroke then becomes white.

All right. And so that works beautifully now.

So if we didn't do this,

so if we simply said "we copied this",

because this is actually important.

So if we did this,

then it would work in a quite different way.

So now if we hovered only the button,

then the icon would still be green,

but now as we move more inward,

so at some point we will hover over the icon, right?

And so now that is when the icon becomes white

as we want it.

But only, again, once we actually hovered the icon itself.

So that's what we set here.

Right.

But again, that's not the effect we are looking for.

Instead we want the icon here to become white

as soon as we actually hover the button itself.

So just like this, right.

Now okay, so the visual styling here is almost complete.

Now let's finally take care of the layout.

So basically putting all of these elements here,

side by side.

So that is the pagination class.

And so as expected for that, we're going to use Flexbox.

So it is a one-dimensional layout. So just a row.

And so Flexbox is the right job for that.

Beautiful.

And now let's, of course, vertically align our items here.

So "align items", "center".

Now okay.

And now, just to finish, we need some gap between them

and there we go.

And of course, also,

we want to center this entire component here

inside of the body, as always.

All right, now here,

you would have actually needed that trick

that I showed you in the last lecture.

So using basically Flexbox

in order to center this component,

that's because the trick with margin zero auto

will actually not work in this case.

So that trick, remember,

only works when we actually define a width on the element.

So in this case,

we would have to declare a width on the pagination

and then use that trick of margin zero auto.

But in this case,

we are not interested

in actually giving this pagination a width.

So the width is simply defined

by basically all the width of this here added together,

right?

So we're not defining it.

And so therefore that trick would not work.

So instead, what we're going to do is to again,

make the body a flex container,

and then "justify-content", "center".

And by the way,

this is not the kind of things

that I expected you to also do in the coding challenge.

So, for the challenge,

I was mainly interested

that you did like this visual styling and all of that,

but centering in the browser,

using this technique here, if you didn't do that,

that's not a problem at all.

Well, let's just add some margin to the top here.

All right. Nice.

So let's take a look at what's different.

And so here are these dots,

they need to have a different color.

And then also there basically this indication

that we're on page number three right now.

So basically an active page indicator.

So let's style our dots,

which are right here, right.

And let's use some gray background color here.

Let's say this,

not a background color, but an actual text color.

Nice.

And now again,

we want one of them here to look as if they were active

right now.

And so basically

that style is exactly the same style as to hover, right?

So we see that here.

And it is exactly what happens when we hover.

So, since we already have that style written,

which is this one here, we can simply reuse that.

So let's add a class down here, in the third one.

So "page-link", and then some sort of variation,

which remember, I like to use two dashes for that.

So "current", so this is the current page link.

So let's copy that.

And now we need to paste that right here.

Okay. Because once again,

we already have written this style here,

and so we can simply add this class to this list.

And of course we could have done it separately as well,

but then we would have this code here in duplicate,

and that's not what we want.

However, actually this is not going to work.

And let me show you, right.

So it gave it the correct background color,

but the text color itself is still coming from up here.

And that's because, right now,

both these rules here are actually applying.

So of course this element is still a page link,

so still this one here,

and so that's where the text color comes from,

but it is also a "page-link--current".

So that's where the background color comes from.

So it uses this background color over this one here,

which means that somehow this selector here gets priority

over this one here.

So this one,

and the reason for that is a little bit complicated,

but if we hover over it,

you will see here that it says "selector specificity",

(0,2,0), right?

And down here it says (0,1,0).

And so that two here is higher,

and so that's why this applies.

And if you're interested in why this is two,

well, the quick reason is that here,

this selector does actually have two classes

or pseudo classes.

So this is one and this is two.

And so that's why we have that two,

and here we only have one.

And so that's where this one comes from.

However, we want this here to be applied always, right.

So we want, actually, the color to be white as well.

And so we need to make that the specificity

is also two here.

So what we can do is to use a new selector,

which is basically the end selector.

So let me write that here.

And again, of course,

this is not the kind of things

that you could have figured out by yourself

in the coding challenge.

Right.

So basically if we write this, but without the space here,

that's very important,

then that means that this only applies

when the element has this selector and also this one.

Okay.

So again,

this is the end selector and it only applies to an element

if it has both of these classes.

So in this case,

it does have a "page-link" and also "page-link--current".

Okay. And so very important, not the space.

So with the space, it is a descendant selector,

but without a space, it is an end selector.

So again,

"end" meaning that the element has both this class

and this class.

And so now, the selector has two classes

and when we hover it, we see that two here.

And so now both of them have two.

And so in that case,

the one that is last is the one that applies.

And so now you see that it turned white.

All right.

So this part, I admit, is a bit confusing.

So maybe go back a little bit

and listen to my explanation again,

because this can be a source of confusion

when you write your own code.

And then, in some situation,

you might not really understand what is going on.

Just remember that I showed you,

in one of the first sections,

the priority between the selectors.

So between ID selectors and class selectors

and element selectors,

but there, we didn't talk about this notion of specificity.

And I still don't want to go deep into that,

but I just want you to use basically VS code here as a help.

And so whenever you have one selector that has a lower value

here in one of these points,

then that is the one that will not get applied.

So the one with the higher value,

is the one that gets applied.

Okay. And again, now both here are at two, so (0,2,0),

and then it is the last of the two that gets applied.

So if we changed this here to the top,

then it would still not work.

So only now,

because it is the last one is the reason why it works.

And I think, with this, we actually finished this component.

Yep. Everything works nicely.

And so that is it.

So everything works nicely and so our work is done here.