The previous lesson we built out our success, now let's apply that to the element that we're building
dynamically using JavaScript, and if you didn't build it, the success, you can copy and paste it
out from the source files attached to this section.
So we've got our HTML and now we're going to be building out a second HTML container where we're going
to be holding our different our other card elements.
So we've got a small one and a big one.
So it's going to look relatively the same, having the card and then also the suit, but we're not going
to have a space between there, a line break.
We also need to account for all of the current cards.
So using documents.
So we want to position the cards a little bit over.
So this is where we need to count how many existing cards there are on the page.
So we're using the current cards object in order to contain all of that node list, just as we did with
the buttons earlier.
Now we go into creating the element and the element that we've just created.
So that div that we've just created, this is our main container where we're going to set an attribute
to that element and we're going to set a attribute of class because we don't have any content in the
class yet.
So we can set it within this type of format where we're setting an attribute and because we've positioned
it absolute, we can take that div and we can position it to the left.
And this is where we're going to calculate out how many current cards there are.
What's the length of the current cards?
Multiply that by 25 so that we know where we're going to position the new card.
So it's going to be moved over.
Every new card is going to be twenty five over to the left.
So that's going to be a little bit of overlap to the new cards as we're building them out.
Let's set a current card value.
So our current card value and this is that global object value that we have and that we set up in the
beginning.
So this is the one that's going to contain whatever the existing card is.
And we're going to use this as our calculation when the player selects either higher or lower to determine
what card is in play and what the value of that card is.
And that's the only value that we actually need to know from the card.
We don't need to know any more of this object information.
We just need to know the current card value.
So grabbing that and once it's visually represented, we're going to hide that in the background and
then use that to determine if it's higher or lower.
We also need to use the card and check to see the suit and if the suit is equal to Haaz.
Then we know that it's going to be red or if the card is equal to suit.
And the suit is diamonds.
Then we're going to select that div.
Selecting the class list, because now we've already created that attribute class, so we need to add
to it so using JavaScript to select the class list and just as we were before toggling it, we can add
to it.
So adding a value of red.
This is the class that we created in the previous lesson.
And all it's going to do is color that element.
Text red.
Now, we also need to create those smaller units that we want to house, so let's create those, we
can create one as a span.
Documents create element, so just as we did with the device, let's create a span in order to hold
this content.
This is going to be the smaller of the spam contents, so setting an attribute to it.
So we're updating and giving it a class of tiny to match with the styling that we produced in the previous
lesson.
CSPAN one will have an inner HTML and this is where we're going to use that HTML to structure for the
card so we can output that and then we're going to spend that spanned one to the div so that we're not
we have no put the div yet, but we can also still append it to the div while we're building this card
out.
And then next we need to build out another spane.
I'm going to copy this because some of the code is going to be very similar.
So we call that span too.
So creating a span, we need to set an attribute to it.
The attribute that we're setting, the class that we're starting out and setting it to is big.
Next, the span, too, and the inner HTML.
This one is one.
So no, it's a little bit reverse there where we're using one and two in reverse there.
And then we need to append it to the div sort of pending span to to the div and then we're still ready
to update an output that div we can get rid of that our HTML and now let's try it and see what our card
looks like.
So there we go.
We've built out a card and we've got higher or lower.
So right now these buttons aren't doing anything and that's what we're going to introduce in the next
lesson.
So this time the objective was to build out a visual representation of the card.
And next, we need to make some actions for these buttons.
So let's try that one more time.
So the nine of diamonds start the king of hearts.
And this is a nice representation.
And of course, you can play around with the success and style it however you want.
You can also add another tiny one here at the bottom.
So depending on what you want your cards to look like and for me, I think this is a good visual representation
for the card, so I'm not going to do any more success.
But of course, you are welcome to update and adjust that as needed.
So go ahead and add this part in where we're making the visual card, adding in and creating the elements
on the fly and then setting the different classes that are attached to those attributes and then update
an inner HTML and appending those elements as needed to the parent in order to output it for the player.