Welcome back, this lesson, we're going to do some styling and make these actually look like cards
instead of just outputs as text outputs, so we are adding in a class of card.
And as we build the cards, the visual cards, we're adding those in.
So let's set some values into that class.
So we've got a display of block.
We can also do margin of auto.
So that will center the element, add some padding in there.
The padding set that up as seven picks.
And we also want to force the height of the card as well as a width for the card.
And I'm also going to add in a margin at the top.
So but we do 10 picks, so it's not sitting right at the top background color for the card.
And let's make it white or an off-White so we can do a white smoke.
So it's not exactly white, also a border so that we can see where the card is sitting and do the border
block for now.
And we'll check that out and we'll see how that looks.
Also, border radius.
So most cards are not exactly square.
They've got rounded sides.
So we've got to add that in.
And then lastly, just for a nicer effect, we can add in a box shadow.
So this will add in a slight shadow underneath the card.
So let's see what that looks like when we refresh and we start.
So we've got something that looks a little bit more like a card.
Also, let's set up some classes to hold the big area.
We can just call this one big.
So this is going to be one of the representations of what's on the card and this is going to be the
bigger one.
So setting up our font size one four five M sounds good.
We can text a line.
So center text align that do the line height so that we have more, we have an option to more to center
it as well.
Margin top.
So it's not sitting right at the top as well.
So we can do ten picks and by default what's display block.
There's also one that I want to add in so we know that hearts and diamonds are red in color.
So this is another class that we can add if one of those matches, the criteria of the suit that we're
looking for.
And then lastly, there's another one that we wanted to create.
And this is going to be the tiny representation of what's on the card in a really smaller format.
And as we've got the two representations, so this one is going to have a smaller font size.
It's also going to have a smaller line.
And we can vertical align this one at the top and text line and this time we're going to text align
left.
So let's go back into our JavaScript code and we're going to add the appropriate classes where we're
showing the card.
So here's where we were constructing the card in the show card function.
So as we're building the card, let's add a class.
So we've got the card attribute and we can do a condition here that we can check to see if the card
suit as remember, this is an object that we can select that object information.
So if it's equal to Haaz or if card suit is equal to Dimond's, then we want to apply a class of red
to it and otherwise we're just going to leave it blank or black.
So do.
Class list and then add to the class list at that class of red, so see how that looks.
So fresh start.
So now the hearts and the diamonds are red.
So it's looking a little bit more like the actual cards also as we're building out the first spin.
So let's take spane one and using class list, we can add to the class so we can set an attribute because
we don't have any classes quite yet.
But in this case, let's just do the tiny one first as this is going to be the small one that's going
to show up, and then the next one is going to have CSPAN two and then this is going to be the big one.
So now let's see what that looks like.
So now we've got a more representation of what the cards look like.
And of course, you can style this as needed.
And you can see that it looks fairly good.
It looks fairly much more like a card.
The content that's being output is more visually appealing in this type of format.
So coming up next, we need to introduce the gameplay in the game Logic.
So that's still to come.
So go ahead and update your styling and you can style this the way that I did it, or you can make it
look even better.
So that's up to you.
So coming up next is Game Logic.