Hey, I guarantee you by the end of this lesson and from the last lesson, that you're going to be a
true champion at making elements using JavaScript and updating some of the properties contained within
the elements.
So creating and constructing a whole Web content using JavaScript.
And this, again, it's just an excellent exercise to get a lot of practice in building this same each
HTML using JavaScript.
And I know it's a whole lot more lines of code.
But trust me that once you get this practice in, you're never going to forget it and you're going to
be whenever it comes to creating elements on the fly.
It's going to be really easy to do.
So going back into what we wanted to do next and the next part of it is to create some buttons.
So we need to have a whole dashboard area.
So we've got the first two taking care of.
So maybe we can just simply remove those or we can just ignore that.
Now we've got another div here in this div contains the message, bunch of buttons and a whole bunch
of interactions.
So we're just gonna call this the dashboard.
So going back into game and dashboard and that's why I really like to create one game object because
this allows me to create all the game content in one spot and then I can easily access it for within
the rest of the JavaScript really easily.
So using Doc, we're creating other elements.
And this is just going to be our main diff container.
And then just to kind of close things off before we complete, we're gonna append it to the main game
area.
So do a refresh.
And if we look at the source code once again, we should have another div here.
And this is going to be representing that third div with all of the content that is contained.
There starts the third div there.
So first of all, we need to do has a class of message message for players.
So that's the next one that we need to create.
And this is going to be just called game message.
We can call that or we'll call it game status instead.
And this is our spot to provide status updates to the player.
So creating another div using class list, adding in a class.
And the class that we want to add in is just called message.
And we'll update the stylesheet after this lesson and then game status.
We want to add in some text content into there.
So using text content.
This is an equal.
So message for player.
And then down below, we can do a game dashboard because it's contained within dashboard.
So going to be the parent of it.
That's what we're using.
Append an order here does matter because what you're spending, that's going to simply drop it into
the next available slot.
So it's going to be simply appending it over.
So if you want to make sure that you have it in the correct order, then make sure that the pen is being
done in the order that you want to represent the elements.
So if I was to have one and then move it around, I do using the pendant a different spot, then I potentially
would have a different spot where the elements would be structured.
So now we've got message for player and we see that it's popping up there.
So it's not exactly as we need it because it's popping up above the table.
And whereas the H.
Timal has it below.
And that's because I want to spend the dashboard to the table and not to the main area.
So let's do a quick refresh.
So that moved the message for player down.
And that's why I'm saying that the order is important, that we want to make sure that we do get the
order proper.
Now, let's create some buttons as the next elements are all a bunch of buttons with a class of PTM.
So we can do some copy and paste for these ones.
So this case, we want to create an element.
And the element that we're creating is not going to be a div, but it's going to be a button.
And let's add in some text to it.
So add in tax content onto the button.
And this one is gonna say deal.
And we're going to add event listeners afterwards and then game Beattie and deal and using classless.
Just as we did before.
Let's add the class of BEATTIES and and then for the game dashboard, we're going to attend the game
DTN and deal to the dashboard and safe.
So that gives us the deal button and we can do the same format for the hit.
And for the stand.
So let's copy out this and we'll just do a quick update of the names.
So this will be the button hit.
Update the text content as well.
Button hit.
And make sure that we update the button hit.
So now we've got the hit button and we're we don't have the exact same styling.
So let's just make sure that we're adding it and then we have.
One more button.
So this one is button stand.
So give this one an object BEATTIES stand.
And this will allow us to easily identify them later.
I move this dashboard up here so that the order once again is proper.
And let's double check our HD here, Mel.
So save and make sure that the buttons are added properly.
So we've got the three buttons and then we have the same three buttons here.
And as we can see, they are button tags.
So button.
And then below that, we've got another div with a class of message and input with type of number.
And then also another button for the bet amount.
So let's add those in as well.
And this is all going into the dashboard.
So creating a button.
And this will be bet button.
So we just update the whole object name there.
And this actually has to come after the input and as well after the message.
So let's set up that game message.
And this is going to contain the player's cash amount.
So using that document, create elements created div to hold that information.
And then game player cash using class list.
Let's add the class of message and then added into the dashboard.
So pend game player cash.
And we could do game player cache text content and then equal that to be the same text content that
we see below.
Then we've got the bet amount.
So last thing we need to do is still add an input.
So let's create that input before we add the button.
And yes, we are coming to the end.
So this is going to be all the construction of all the elements that we need.
So input but using document create elements.
We're creating an input tag.
And then for a game input that let's set some attributes for it.
And setting the attribute type.
Because there's going to be an input area.
So that to be.
No.
And then I'll add it to the dashboard so that we can see as we're constructing it.
What it's going to look like.
So we still need to apply some styling to it.
And in this case, we're gonna do the styling manually.
So I can add in a class.
Just so you get some more practice for it.
So input that and then style.
And then the style property.
So going to have width and the width can be four a.m..
So it will update what the with this.
And instead of width, we can do the font size.
And this can be one point for him.
So that will match with what we've got below.
And let's do a margin at the top.
So set margin top to be equal to one each.
So get some spacing near the top.
And you can also set the value of the element using value.
And we're gonna set it to be zero.
So it's going to be a number zero value because this is a number type.
So setting it to zero.
And that's it.
So now that we've constructed our game area to look exactly like that, each team out, we can get rid
of that, each team out.
And we can move on to some more fun stuff with JavaScript.
So selecting all the H.T. Amelle, we can remove it from the project.
And it's gonna make our interface look a lot cleaner.
It's ready to move on to the next part.
We're gonna apply some functionality to the JavaScript.
We're gonna make these buttons do stuff as well as build the deck of cards and so on.
So that's still coming up in the next lessons.