It's about time we get something visual on our screen again in this lesson, we'll show you how to do
that.
So we're going to do the short card function and this is the one that's going to actually show the card.
So we're passing in a couple parameters.
We've got temp, which is actually going to be the card so that we've picked up from the game deck.
So it's the top card.
And then also we need an element that we want to update.
And I also want to update these values and I want to move them above the card and just clear them out.
So we don't need to have the word deal anymore as we're going to be updating that element in the show
card, so we do have that element and do the text content and let's let's write ready in there for now.
So press.
Deal.
And then we've got the word.
Ready.
Set means that we can get the contents of the card.
And if we do.
Console.
Log of the card.
Object.
And clear that.
And press.
Deal.
You can see that this is going to be a six of diamonds.
So if we wanted to, we could set the card value and we could use the card rank.
And then let's do that.
Ampersand and card suit.
And adding in a colon.
And this should actually be in our HMO because this is an H2 metal object.
So that will give us the eight of spades.
It's really, really tiny there.
But you can see it.
And we need to apply some styling.
But this is the general ideas where we're going to be updating and we're going to be adding content.
So we need to have a particular container assigned to it.
So let's use a condition.
And just make sure that card is not undefined.
And if it is, then we're not going to try to work with the card object because that means that we're
not being passed in anything.
We just simply want to not have any action for the show cards so best.
This will help prevent throwing some errors.
So I'm going to just simply remove that because we're gonna style it a little bit better.
So it actually looks like a card.
So taking the style and let's update the background color to make sure that it's white and then using
element div.
And then document create elements and element that we're gonna be creating is gonna be a div and I'll
move this up so you can see it a little bit better.
We're gonna create a class called Card.
So class list add and adding in the class of card to that, just as we did before we were constructing
all of the elements.
And this is where we've got a condition.
So we're checking to see if the card suit is equal to hearts when we we're passing all of this information.
It's already contained within the card object.
So we just need to have the proper conditions to pick up the information.
So check to see if card suit is hearts or diamonds.
And that means that we can produce it as red.
So the class will create another class.
So class list.
That's how you can add multiple classes to an element that you're constructing.
So again, and we're going to add red to it and otherwise it'll just be black.
So just if if we don't add in red and we've got to make sure that we update the styling accordingly
as well.
And let's create a span and then do documents create elements and creating another div and span one
update the inner H to Amelle.
So we're going to use that card rank plus the ampersand and then card suit and then concatenate it with
the colon.
You do need to have the colon because this is putting the H.
Timal code for the card icon.
The suit icon.
So span one.
And class list again.
And this one, we're gonna make a little tiny value at the top.
So it looks like a real card.
And then for the div will pend the child.
And the child that we're going to spend is the span one.
So I know that I've called these device and I've called these spans, but we're gonna apply styling
to them.
So for now, we can actually also create them as span's.
It actually doesn't really matter because we're gonna be applying the styling to them.
But we can keep them as diverse as well.
This was just to avoid the confusion.
And of course, you can style these and you can update the styling as needed.
I'm to have another one.
I call this one span, too.
And let's keep this one as a div and we'll make all of the updates with the styling.
And this will be the bigger part where we've got the bigger content.
And the inner part of this one is just going to show the card ring.
So this will be whatever the card rank is.
So, you know, 10 Ace King Short, nice and big in the middle of the.
The card and let's do one more, and this one is going to be the suit.
So this one is going to be big as well.
And we'll keep this one as a div.
And as I said, right now, it's going to show as the default element properties.
But we're going to update some of the styling later on.
And the inner turmoil of this one is going to show the character code.
So that and card suit.
And then add in the in there.
So you always have to add the coal and otherwise you're not going to work.
And also make sure you don't have any spaces because again, it's not going to work if there are spaces.
So now it's just a matter of appending them.
So we've appended the child with appended spanned two.
And I think that we need to do probably or we can just keep it with the span, too.
So see what happens to it, it looks like.
Oh, and of course, lastly, we need to take the elements and we need to append child.
And let's spend that give to the element, that was the lesson that we are missing.
So, see, we've got the jack of diamonds and then the jacket diamonds.
So it's nice and neatly kind of structured and a look a lot better when we apply the styling.
And what we want to do is actually want to take four cards.
So I take two cards for the dealer hand.
And then two cards for the player hand.
And let's just update these two player.
And this will go into the player cards element.
This is why it's nice.
In the beginning, if you set up all of your objects, element up page objects that you're going to
have to work with later on in the game.
Nice and neatly.
And this way you can see that content being output.
So there we go.
So we've got the eight of spades, the nine of clubs, the king of diamonds and the two of diamonds.
So it doesn't look great right now.
And that's because we need to play some styling.
And we're going to do this with CSX.
And we're not going to attempt to do a JavaScript is quite a bit of styling to get this to look right.
So next lesson is going to be applying styling to the cards that are being output.
So that's coming up next.
So go ahead and structure your card object.
And coming up next, we're going to play the styling to it.
We've already applied it, pide, all of the classes.
That are necessary in order to construct the cards.