This lesson is going to be a lot of JavaScript building of elements.
So each HTML elements.
And by the end of the lesson or you can get rid of all of this H t Amelle and just have the one div.
And the objective really is to get really, really familiar with creating elements and getting familiar
with the syntax.
So we're going through all of this and doing it via JavaScript because of course I know you're here
to learn JavaScript so that we appended the scoreboard.
So the next element that we want is we want to have basically kind of an area here that we might want
to have a table.
And then here we've got the dealer's content and we've got within here, we've got a score for the dealer.
We've got dealer cards.
So that's gonna be where we're gonna place the dealer card.
And then the same thing for the player.
So player score, player card and then area to provide a message for the players.
Some buttons that for interaction and by default, we're going to have them disabled.
And enabled as we allow the user to play through the game.
And then we also have a message here for the player.
So amount of cash that they have left and input a number for their bet amount.
So this can be an input field and then a button for the bet amount.
And then eventually we're going to touch.
To the buttons, we're going to touch the ability to have event listeners.
So all of that is still coming.
And for now, let's create a quick class and we're going to call this one button so that we do have
a button class that we can attach to the various buttons.
And it's going to be a very basic button class and we'll do a display in line block.
And, of course, if you want to, you can do all of this with JavaScript as well.
Let's give you a little bit more complex and quite a bit of repeat of the code.
And then adding in some padding.
So they look a little bit more like buttons and update the font size as well.
And actually, this should be point seven five.
And there should be point.
And then the line height.
That's enough styling for the buttons.
And let's open the JavaScript and let's get to it.
So first, create the element name.
Create the variable name.
The first thing we do is create the variable name.
So I'm just going to call it a table and then document create element, an element that we're creating.
It's gonna be a div and then game dealer is gonna be where the dealer's contents are.
So once again, document, create elements and create an element div and then dealer cards or you'll
do a very similar naming convention for the player content.
So document and make sure that when you are naming them they are something that makes sense because
we are going to need to be able to update these elements and select them.
So the more semantic the names are, the better we're gonna be able to work through the game.
So we're gonna not always have to go back and check.
And you might also want to comment to ensure that you know exactly what we're expecting within this
with this element.
So dealer cards and updating the text content and it's going to see the content here.
So this just says dealer card.
So add in dealer card and we also need one for the score.
So this is the dealer score and we'll create an element for this one as well.
So create elements now.
Just make them all as divs and we can apply styling as needed.
So we're setting the game dealer score and the initial text content would just as we do in each team,
I'll example.
And I can save that.
So we having obviously haven't added any of this content yet to the noun at the bottom.
We've got game mean then using a pen just also saw earlier we're going to hand the game table contents.
So you can save that.
And then over here, let's do the game table, append and append the various elements that were created.
So depending the game dealer and occasionally you have to go back to that.
Each team allergist's to make sure that you've got the structure right.
So you've got that mean I.D. object.
So this is going to be represented here in the parent.
And then immediately underneath there, we've got that score that we've already added in.
And then within there, we've got another element here.
Just another div.
And that's going to be representing that table.
So all of the content within table is going to go in there.
And then we've got another one that's just going to represent the dealer content.
And this is where we've got the dealer object.
So that's represented in there.
So we need to add in within the game table.
The game dealer.
So we've got that added there.
And then going back, we've got another one where we've got another element.
Therefore, the score.
So within the score, we've just got the dash.
But we also see that within the score.
So when we go game dealer score, there's also.
Class called Square.
So you can add in class in a number of ways.
You can use classless.
If you're just adding in one and if you've got multiple element attributes that you want to, you could
do class as an attribute and then class.
And then the properties of that attribute.
But in this case, we only have the one.
So we're going to use class list and then add and adding in a class of score.
And we also need to append to the game dealer.
This dealer score content.
So using append once again a pending game dealer score into that element.
So safe.
And we can see we're already starting to look more like that.
And then the next one is we've got the dealer cards.
So the same thing.
And actually, the order doesn't matter because it's just going into the object.
So you might want to keep them within a more strict order or you might be a little bit more flexible.
So it actually doesn't matter because once you've got the elements selected, then you can spend it.
You can update it.
And you can do all kinds of amazing things.
All done with JavaScript.
So I also wanted to add in the dealer cards value.
So we've got the dealer card.
So it's already starting to look quite a bit like what we see here at the top.
And then we also need to do the same for the player in this structure of the player stuff is pretty
much the same thing as the dealer stuff.
So you can literally just copy and paste it and update this as player.
And instead of dealer cards, we can just use player.
So I'm going to copy and paste to save some time.
So this is player cards, player cards, player cards, and we'll just write the word player card just
to match with what we have down here.
And it's the dealer score.
We'll have player score to have real consistency in how we're naming it.
And then when we're doing the pending, we're gonna hand everything the same way.
And actually, this one should be append dealer.
And this one should be append player.
So let's see what this looks like.
So, so far, so good.
Looks very similar to what we have.
And make it bigger so that we can take a better, closer look at the contents of it.
So within the game I.D. and this one, we have the same structure.
And then within the next div, we've got the first div and open that and we'll see that it is matching.
So this is something that bracket says Houting and it's adding in the data brackets I.D..
So if you're not using brackets you're not going to see that.
So if case you're wondering why there's all these ideas.
So it's attaching this because it's constructing all of this stuff dynamically.
So just ignore those.
And you can see we've got score.
We've got the dealer card.
And then next div is the score and the player card.
And let's just check score player card.
So everything is on track.
And then next we need to do some of the buttons.
And this is going to be a little bit more complex.
So we'll hold off till the next lesson for this.
And in between the lessons, you can continue to construct your H.T. Amelle using JavaScript.
And this is a great opportunity to get lots of practice in here as to construct elements and interact
with Web page elements using JavaScript.
So coming up, more constructing of elements.