Creating visual stuff in eight simple and JavaScript is always fun.
So this lesson is going to be a lot of fun because this is where we generate the card.
And instead of having six Dimond's or six diamond, we're going to have more of a visual representation
going into our code where we have function ready to make a card.
We want to pass in a value into the make a card so this can be a value of the card, let's say card.
And where we have make deck draw card, we've got our make card here and we've got our my card value
that we can pass in to make it.
So essentially we're selecting and we've got all of that object information.
So we've got a suit, a rank and a value.
And of course, if you had more object information contained within that card, that could be passed
through as well.
So if you want to extend on it and make it even more complex and interesting, you could add additional
values and parameters into that deck.
So for now, we'll just console, logout the card, just make sure that we are getting everything properly.
We should hit start.
We can see that we've got the clubs, the ten of clubs has been selected.
So let's draw that out and visually represent that.
First of all, creating some HTML containers.
We've got our card object that we can utilize.
We've got a rank within that card.
And now it's to a little bit of each time to draw that out, and the reason that I used the different
values here within the suits is that these are also can be represented in HTML characters and ask to
characters.
So if I take and hearts, I can output that value as a suit and I'll show you how that works.
So we've got our rank, which is going to be a ten, and then underneath I'm going to add in that visual
representation of the heart.
So taking the card suit value.
So we see that as clubs in this case.
And this is where that end is important because placing that in front is going to represent that visually
and then the semicolon to close that off.
So that's going to be the card that we're building out.
Let's create a div in order to house that information, so document.
Using create element in JavaScript allows us to create elements on the fly dynamically and the element
we want to create is a diff.
I move this up so it's more centered.
So creating a div next.
We'll take gameplay so that gameplay object that we set up earlier and append child to that and the
child that we're going to pending is a div and then within this div that we've just freshly created,
let's set some inner HTML into it.
So taking the d'Hiv, updating our inner turmoil, and for now we'll set it up as HTML one value and
let's try that out.
So now when we start, we see this jack of diamonds and we can actually get rid of that output here
where we're setting our gameplay into HTML and we can blank that out.
So hit start, we've got our queen of spades.
So it looks a little bit better and of course, we can use some styling to really update this.
So let's open up our scissors and we'll update the styling of these elements.
And if you're not interested in the styling, you can skip through the rest of this lesson as it's just
going to be working through some default styling so that we can output the visuals of the card in a
bit better, more appropriate fashion.
So I'm using absolute position, absolute.
And then I'm going to be attaching in these classes into that particular element that we built and will
be doing that in the upcoming lesson.
So for now, I'm just setting up some default styling.
So display in line block that we're going to be using in the next lesson in order to build out the look
and feel of our card.
So adding in some padding of seven picks height.
So this is the height of our card.
We also need to set a width for the card, and this could also change as well, depending on what the
suit your needs is, the background color are going to make it white, but not exactly whites or white
smoke border.
So one pixelate black border.
I usually like to round the sides of the cards so we can use border radius for that, set up five pics
of border radius and also a box shadow.
So that has a nice more 3D effect adding in that 3D effect for the cards.
And the way that I want to do the card is a more of a typical card where we're going to output the queen
of hearts or queen of spades twice, and we're going to have a big, big one in the center and then
a small one up in the top right corner.
So a tiny one.
So let's set up our big class and this will output for the center.
We need to have a font size, fairly large font size.
I can use three M.
Using text line can go ahead and send her text a line setting the line height so we can always force
a specific height for the line height so we don't get out of shape for our content in our content margin
auto.
And I'll do a display block.
Also, some of the cards are red.
Some of them are going to be blue black.
So we're going to apply a red class to the red ones and we can set that color to red.
So that's going to set the display text display color to red.
And then lastly, we've got one more class that we need to build out before we conclude this lesson.
And that's going to be our tiny element using display block.
So this one's small.
So point a.T.M also make sure you set that line height so that we get the positioning and vertical aligned.
So we're going to vertically align this to the top.
So we refresh it and we have an added in these classes.
Yet we're going to do that in the upcoming lesson so we'll have a more visual representation for that
particular card.
So that's still coming up in the next lesson.
So go ahead and add this in to your project and you have to be ready for the next lesson where we continue
as we build out these elements, we're going to apply some classes and we're going to style it to look
more like a card.
That's still to come.