Instructor: 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 pages 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 post 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.
Collapsed a sidebar.
And I will now start here writing the HTML as always.
Now here we want a div
with the class of pagination
and 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.
This one here,
btn-icon.
Then let's build our anchor elements.
And I didn't mention that these shouldn't point anywhere
but hopefully you figured that one out on your own.
So calling these one page links,
but of course you could have called them whatever you liked.
Okay.
So copy-pasting this a couple of times.
So one, two, three, four, five six,
and then the last one for page 23.
Three, four, five and 23.
Okay.
And then also here between the six and to 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 page 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 the last button.
So again, that's called btn.
And then let's grab this icon here
with the class of btn-icon.
Now, okay.
And now I will copy all of these here
again with a 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 to 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.
And then 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: 1px solid.
Then let's give it some height and some width here as well.
And let's make it double the one off 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 as always.
Well, that didn't work.
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 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.
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?
Not 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 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.
And so we need to change that to something else.
Great.
So now we have this 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.
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 this 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.
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 around.
So that's border-radius: 50%.
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.
Now, okay.
Actually we also need the same effect here
on these buttons.
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, 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 btn-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.
And so that works beautifully now.
So if we didn't do this,
so if we simply said, we copy 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.
And so now that is when the icon becomes white
as we want it,
but only again once we actually hover the icon itself.
So that's what we set here.
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.
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've 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: 0 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've 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.
So we're not defining it
and so therefore that trick would not work.
So instead what we're gonna 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.
Now 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 these dots, they need to have a different color.
And then also there is 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.
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 the hover.
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.
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.
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.
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 and 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.
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.
So again, this is the and selector,
and it only applies to an element
if it has both of these classes.
So in this case, it does have 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 the space, it is an and selector.
So again, and 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 too here.
And so now both of them have two and so in that case,
the one that is less 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
'cause 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 these selectors.
So between ID selectors and class selectors
and elements lectures.
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 the 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 are at two,
so 0, 2, 0.
And then it is the last of the two that gets applied.
So if we change this year 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.