1
00:00:00,480 --> 00:00:04,830
Hey, I guarantee you by the end of this lesson and from the last lesson, that you're going to be a

2
00:00:04,830 --> 00:00:11,280
true champion at making elements using JavaScript and updating some of the properties contained within

3
00:00:11,280 --> 00:00:11,790
the elements.

4
00:00:12,000 --> 00:00:15,630
So creating and constructing a whole Web content using JavaScript.

5
00:00:15,990 --> 00:00:22,090
And this, again, it's just an excellent exercise to get a lot of practice in building this same each

6
00:00:22,110 --> 00:00:23,700
HTML using JavaScript.

7
00:00:23,970 --> 00:00:25,860
And I know it's a whole lot more lines of code.

8
00:00:26,130 --> 00:00:30,750
But trust me that once you get this practice in, you're never going to forget it and you're going to

9
00:00:30,750 --> 00:00:34,560
be whenever it comes to creating elements on the fly.

10
00:00:34,590 --> 00:00:35,970
It's going to be really easy to do.

11
00:00:36,390 --> 00:00:43,320
So going back into what we wanted to do next and the next part of it is to create some buttons.

12
00:00:43,380 --> 00:00:45,660
So we need to have a whole dashboard area.

13
00:00:45,960 --> 00:00:48,020
So we've got the first two taking care of.

14
00:00:48,040 --> 00:00:52,620
So maybe we can just simply remove those or we can just ignore that.

15
00:00:52,920 --> 00:00:58,770
Now we've got another div here in this div contains the message, bunch of buttons and a whole bunch

16
00:00:58,770 --> 00:00:59,610
of interactions.

17
00:00:59,880 --> 00:01:02,010
So we're just gonna call this the dashboard.

18
00:01:02,460 --> 00:01:09,810
So going back into game and dashboard and that's why I really like to create one game object because

19
00:01:09,810 --> 00:01:16,650
this allows me to create all the game content in one spot and then I can easily access it for within

20
00:01:16,650 --> 00:01:18,810
the rest of the JavaScript really easily.

21
00:01:19,020 --> 00:01:21,450
So using Doc, we're creating other elements.

22
00:01:21,510 --> 00:01:24,090
And this is just going to be our main diff container.

23
00:01:24,660 --> 00:01:33,570
And then just to kind of close things off before we complete, we're gonna append it to the main game

24
00:01:33,600 --> 00:01:33,930
area.

25
00:01:34,140 --> 00:01:35,250
So do a refresh.

26
00:01:35,730 --> 00:01:40,770
And if we look at the source code once again, we should have another div here.

27
00:01:41,100 --> 00:01:46,740
And this is going to be representing that third div with all of the content that is contained.

28
00:01:46,740 --> 00:01:48,150
There starts the third div there.

29
00:01:48,390 --> 00:01:52,020
So first of all, we need to do has a class of message message for players.

30
00:01:52,500 --> 00:01:54,330
So that's the next one that we need to create.

31
00:01:54,690 --> 00:01:57,380
And this is going to be just called game message.

32
00:01:57,390 --> 00:02:00,240
We can call that or we'll call it game status instead.

33
00:02:00,780 --> 00:02:05,310
And this is our spot to provide status updates to the player.

34
00:02:06,060 --> 00:02:11,190
So creating another div using class list, adding in a class.

35
00:02:11,850 --> 00:02:14,560
And the class that we want to add in is just called message.

36
00:02:14,910 --> 00:02:19,740
And we'll update the stylesheet after this lesson and then game status.

37
00:02:19,770 --> 00:02:22,440
We want to add in some text content into there.

38
00:02:22,740 --> 00:02:24,330
So using text content.

39
00:02:24,750 --> 00:02:25,740
This is an equal.

40
00:02:26,940 --> 00:02:30,000
So message for player.

41
00:02:30,180 --> 00:02:34,650
And then down below, we can do a game dashboard because it's contained within dashboard.

42
00:02:34,650 --> 00:02:36,360
So going to be the parent of it.

43
00:02:36,810 --> 00:02:37,680
That's what we're using.

44
00:02:37,770 --> 00:02:44,130
Append an order here does matter because what you're spending, that's going to simply drop it into

45
00:02:44,130 --> 00:02:45,480
the next available slot.

46
00:02:45,750 --> 00:02:47,880
So it's going to be simply appending it over.

47
00:02:48,240 --> 00:02:54,060
So if you want to make sure that you have it in the correct order, then make sure that the pen is being

48
00:02:54,060 --> 00:02:56,940
done in the order that you want to represent the elements.

49
00:02:57,270 --> 00:03:05,100
So if I was to have one and then move it around, I do using the pendant a different spot, then I potentially

50
00:03:05,100 --> 00:03:08,280
would have a different spot where the elements would be structured.

51
00:03:08,670 --> 00:03:13,140
So now we've got message for player and we see that it's popping up there.

52
00:03:13,140 --> 00:03:18,730
So it's not exactly as we need it because it's popping up above the table.

53
00:03:19,560 --> 00:03:20,550
And whereas the H.

54
00:03:20,550 --> 00:03:21,960
Timal has it below.

55
00:03:22,410 --> 00:03:27,840
And that's because I want to spend the dashboard to the table and not to the main area.

56
00:03:28,350 --> 00:03:30,000
So let's do a quick refresh.

57
00:03:30,180 --> 00:03:32,700
So that moved the message for player down.

58
00:03:33,540 --> 00:03:37,530
And that's why I'm saying that the order is important, that we want to make sure that we do get the

59
00:03:37,530 --> 00:03:38,310
order proper.

60
00:03:38,580 --> 00:03:45,320
Now, let's create some buttons as the next elements are all a bunch of buttons with a class of PTM.

61
00:03:45,780 --> 00:03:48,060
So we can do some copy and paste for these ones.

62
00:03:48,480 --> 00:03:50,340
So this case, we want to create an element.

63
00:03:50,430 --> 00:03:56,010
And the element that we're creating is not going to be a div, but it's going to be a button.

64
00:03:56,220 --> 00:03:59,160
And let's add in some text to it.

65
00:03:59,670 --> 00:04:02,160
So add in tax content onto the button.

66
00:04:02,700 --> 00:04:04,200
And this one is gonna say deal.

67
00:04:04,660 --> 00:04:12,110
And we're going to add event listeners afterwards and then game Beattie and deal and using classless.

68
00:04:12,150 --> 00:04:13,230
Just as we did before.

69
00:04:13,710 --> 00:04:22,080
Let's add the class of BEATTIES and and then for the game dashboard, we're going to attend the game

70
00:04:22,410 --> 00:04:26,420
DTN and deal to the dashboard and safe.

71
00:04:27,220 --> 00:04:32,370
So that gives us the deal button and we can do the same format for the hit.

72
00:04:32,940 --> 00:04:34,050
And for the stand.

73
00:04:34,770 --> 00:04:40,140
So let's copy out this and we'll just do a quick update of the names.

74
00:04:40,980 --> 00:04:43,110
So this will be the button hit.

75
00:04:43,140 --> 00:04:45,030
Update the text content as well.

76
00:04:45,330 --> 00:04:46,120
Button hit.

77
00:04:46,410 --> 00:04:49,080
And make sure that we update the button hit.

78
00:04:49,920 --> 00:04:54,440
So now we've got the hit button and we're we don't have the exact same styling.

79
00:04:54,480 --> 00:04:59,790
So let's just make sure that we're adding it and then we have.

80
00:04:59,910 --> 00:05:00,930
One more button.

81
00:05:01,380 --> 00:05:03,250
So this one is button stand.

82
00:05:03,780 --> 00:05:06,630
So give this one an object BEATTIES stand.

83
00:05:07,340 --> 00:05:10,360
And this will allow us to easily identify them later.

84
00:05:10,550 --> 00:05:16,290
I move this dashboard up here so that the order once again is proper.

85
00:05:17,300 --> 00:05:19,450
And let's double check our HD here, Mel.

86
00:05:21,090 --> 00:05:24,900
So save and make sure that the buttons are added properly.

87
00:05:25,320 --> 00:05:29,070
So we've got the three buttons and then we have the same three buttons here.

88
00:05:29,520 --> 00:05:31,980
And as we can see, they are button tags.

89
00:05:32,760 --> 00:05:33,300
So button.

90
00:05:33,450 --> 00:05:40,830
And then below that, we've got another div with a class of message and input with type of number.

91
00:05:41,250 --> 00:05:44,070
And then also another button for the bet amount.

92
00:05:44,130 --> 00:05:45,690
So let's add those in as well.

93
00:05:46,560 --> 00:05:49,260
And this is all going into the dashboard.

94
00:05:49,290 --> 00:05:50,580
So creating a button.

95
00:05:51,150 --> 00:05:53,310
And this will be bet button.

96
00:05:53,820 --> 00:05:55,770
So we just update the whole object name there.

97
00:05:56,020 --> 00:06:00,870
And this actually has to come after the input and as well after the message.

98
00:06:02,580 --> 00:06:04,440
So let's set up that game message.

99
00:06:04,800 --> 00:06:07,830
And this is going to contain the player's cash amount.

100
00:06:08,670 --> 00:06:14,880
So using that document, create elements created div to hold that information.

101
00:06:15,510 --> 00:06:20,670
And then game player cash using class list.

102
00:06:21,150 --> 00:06:25,890
Let's add the class of message and then added into the dashboard.

103
00:06:25,950 --> 00:06:29,970
So pend game player cash.

104
00:06:30,400 --> 00:06:38,370
And we could do game player cache text content and then equal that to be the same text content that

105
00:06:38,370 --> 00:06:39,520
we see below.

106
00:06:40,230 --> 00:06:41,460
Then we've got the bet amount.

107
00:06:42,060 --> 00:06:44,460
So last thing we need to do is still add an input.

108
00:06:45,480 --> 00:06:48,300
So let's create that input before we add the button.

109
00:06:48,750 --> 00:06:50,610
And yes, we are coming to the end.

110
00:06:51,120 --> 00:06:54,120
So this is going to be all the construction of all the elements that we need.

111
00:06:55,050 --> 00:06:59,760
So input but using document create elements.

112
00:06:59,970 --> 00:07:01,980
We're creating an input tag.

113
00:07:02,610 --> 00:07:07,350
And then for a game input that let's set some attributes for it.

114
00:07:09,210 --> 00:07:11,370
And setting the attribute type.

115
00:07:11,730 --> 00:07:13,320
Because there's going to be an input area.

116
00:07:14,070 --> 00:07:15,120
So that to be.

117
00:07:15,180 --> 00:07:15,670
No.

118
00:07:15,810 --> 00:07:19,890
And then I'll add it to the dashboard so that we can see as we're constructing it.

119
00:07:19,920 --> 00:07:20,790
What it's going to look like.

120
00:07:21,360 --> 00:07:24,540
So we still need to apply some styling to it.

121
00:07:25,200 --> 00:07:28,290
And in this case, we're gonna do the styling manually.

122
00:07:28,440 --> 00:07:29,790
So I can add in a class.

123
00:07:30,000 --> 00:07:32,580
Just so you get some more practice for it.

124
00:07:33,000 --> 00:07:35,880
So input that and then style.

125
00:07:37,020 --> 00:07:38,310
And then the style property.

126
00:07:38,400 --> 00:07:41,520
So going to have width and the width can be four a.m..

127
00:07:42,120 --> 00:07:44,510
So it will update what the with this.

128
00:07:45,570 --> 00:07:49,980
And instead of width, we can do the font size.

129
00:07:50,520 --> 00:07:52,360
And this can be one point for him.

130
00:07:53,220 --> 00:07:55,380
So that will match with what we've got below.

131
00:07:55,700 --> 00:07:57,660
And let's do a margin at the top.

132
00:07:58,260 --> 00:08:01,770
So set margin top to be equal to one each.

133
00:08:02,840 --> 00:08:04,860
So get some spacing near the top.

134
00:08:05,400 --> 00:08:10,290
And you can also set the value of the element using value.

135
00:08:11,040 --> 00:08:12,570
And we're gonna set it to be zero.

136
00:08:12,990 --> 00:08:16,240
So it's going to be a number zero value because this is a number type.

137
00:08:16,410 --> 00:08:17,520
So setting it to zero.

138
00:08:17,790 --> 00:08:18,360
And that's it.

139
00:08:18,420 --> 00:08:25,020
So now that we've constructed our game area to look exactly like that, each team out, we can get rid

140
00:08:25,020 --> 00:08:25,870
of that, each team out.

141
00:08:26,160 --> 00:08:29,550
And we can move on to some more fun stuff with JavaScript.

142
00:08:29,580 --> 00:08:33,660
So selecting all the H.T. Amelle, we can remove it from the project.

143
00:08:34,220 --> 00:08:37,560
And it's gonna make our interface look a lot cleaner.

144
00:08:37,950 --> 00:08:39,600
It's ready to move on to the next part.

145
00:08:39,900 --> 00:08:43,950
We're gonna apply some functionality to the JavaScript.

146
00:08:43,980 --> 00:08:48,480
We're gonna make these buttons do stuff as well as build the deck of cards and so on.

147
00:08:48,570 --> 00:08:50,220
So that's still coming up in the next lessons.