1 00:00:01,380 --> 00:00:05,410 This lesson is going to be a lot of JavaScript building of elements. 2 00:00:05,440 --> 00:00:06,760 So each HTML elements. 3 00:00:07,050 --> 00:00:12,810 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. 4 00:00:13,280 --> 00:00:18,690 And the objective really is to get really, really familiar with creating elements and getting familiar 5 00:00:18,690 --> 00:00:19,590 with the syntax. 6 00:00:19,860 --> 00:00:24,810 So we're going through all of this and doing it via JavaScript because of course I know you're here 7 00:00:24,810 --> 00:00:28,350 to learn JavaScript so that we appended the scoreboard. 8 00:00:29,130 --> 00:00:36,510 So the next element that we want is we want to have basically kind of an area here that we might want 9 00:00:36,510 --> 00:00:37,350 to have a table. 10 00:00:37,590 --> 00:00:42,990 And then here we've got the dealer's content and we've got within here, we've got a score for the dealer. 11 00:00:43,410 --> 00:00:45,420 We've got dealer cards. 12 00:00:45,510 --> 00:00:47,430 So that's gonna be where we're gonna place the dealer card. 13 00:00:47,760 --> 00:00:49,020 And then the same thing for the player. 14 00:00:49,050 --> 00:00:53,800 So player score, player card and then area to provide a message for the players. 15 00:00:54,240 --> 00:00:59,490 Some buttons that for interaction and by default, we're going to have them disabled. 16 00:01:00,720 --> 00:01:04,240 And enabled as we allow the user to play through the game. 17 00:01:04,920 --> 00:01:08,940 And then we also have a message here for the player. 18 00:01:09,000 --> 00:01:13,530 So amount of cash that they have left and input a number for their bet amount. 19 00:01:13,590 --> 00:01:16,950 So this can be an input field and then a button for the bet amount. 20 00:01:17,250 --> 00:01:19,050 And then eventually we're going to touch. 21 00:01:20,200 --> 00:01:24,430 To the buttons, we're going to touch the ability to have event listeners. 22 00:01:24,760 --> 00:01:26,190 So all of that is still coming. 23 00:01:27,330 --> 00:01:32,880 And for now, let's create a quick class and we're going to call this one button so that we do have 24 00:01:33,000 --> 00:01:37,890 a button class that we can attach to the various buttons. 25 00:01:38,510 --> 00:01:44,070 And it's going to be a very basic button class and we'll do a display in line block. 26 00:01:44,370 --> 00:01:47,670 And, of course, if you want to, you can do all of this with JavaScript as well. 27 00:01:47,940 --> 00:01:51,330 Let's give you a little bit more complex and quite a bit of repeat of the code. 28 00:01:52,020 --> 00:01:53,970 And then adding in some padding. 29 00:01:54,570 --> 00:01:58,650 So they look a little bit more like buttons and update the font size as well. 30 00:01:58,950 --> 00:02:01,180 And actually, this should be point seven five. 31 00:02:01,770 --> 00:02:02,730 And there should be point. 32 00:02:03,270 --> 00:02:04,620 And then the line height. 33 00:02:05,010 --> 00:02:06,900 That's enough styling for the buttons. 34 00:02:07,440 --> 00:02:10,770 And let's open the JavaScript and let's get to it. 35 00:02:10,830 --> 00:02:13,780 So first, create the element name. 36 00:02:14,340 --> 00:02:15,780 Create the variable name. 37 00:02:16,080 --> 00:02:17,880 The first thing we do is create the variable name. 38 00:02:17,880 --> 00:02:24,420 So I'm just going to call it a table and then document create element, an element that we're creating. 39 00:02:24,480 --> 00:02:30,330 It's gonna be a div and then game dealer is gonna be where the dealer's contents are. 40 00:02:30,540 --> 00:02:38,190 So once again, document, create elements and create an element div and then dealer cards or you'll 41 00:02:38,190 --> 00:02:42,660 do a very similar naming convention for the player content. 42 00:02:43,410 --> 00:02:49,230 So document and make sure that when you are naming them they are something that makes sense because 43 00:02:49,230 --> 00:02:52,920 we are going to need to be able to update these elements and select them. 44 00:02:53,220 --> 00:02:58,800 So the more semantic the names are, the better we're gonna be able to work through the game. 45 00:02:58,810 --> 00:03:00,840 So we're gonna not always have to go back and check. 46 00:03:01,080 --> 00:03:07,530 And you might also want to comment to ensure that you know exactly what we're expecting within this 47 00:03:08,400 --> 00:03:09,300 with this element. 48 00:03:10,050 --> 00:03:16,380 So dealer cards and updating the text content and it's going to see the content here. 49 00:03:16,470 --> 00:03:17,850 So this just says dealer card. 50 00:03:18,360 --> 00:03:22,200 So add in dealer card and we also need one for the score. 51 00:03:23,340 --> 00:03:28,230 So this is the dealer score and we'll create an element for this one as well. 52 00:03:28,440 --> 00:03:31,660 So create elements now. 53 00:03:31,770 --> 00:03:35,850 Just make them all as divs and we can apply styling as needed. 54 00:03:36,060 --> 00:03:42,070 So we're setting the game dealer score and the initial text content would just as we do in each team, 55 00:03:42,080 --> 00:03:42,840 I'll example. 56 00:03:43,060 --> 00:03:43,920 And I can save that. 57 00:03:44,130 --> 00:03:50,310 So we having obviously haven't added any of this content yet to the noun at the bottom. 58 00:03:50,400 --> 00:03:58,770 We've got game mean then using a pen just also saw earlier we're going to hand the game table contents. 59 00:03:59,460 --> 00:04:00,210 So you can save that. 60 00:04:00,570 --> 00:04:09,720 And then over here, let's do the game table, append and append the various elements that were created. 61 00:04:10,320 --> 00:04:14,180 So depending the game dealer and occasionally you have to go back to that. 62 00:04:14,220 --> 00:04:16,890 Each team allergist's to make sure that you've got the structure right. 63 00:04:17,250 --> 00:04:19,530 So you've got that mean I.D. object. 64 00:04:19,560 --> 00:04:21,840 So this is going to be represented here in the parent. 65 00:04:22,260 --> 00:04:26,100 And then immediately underneath there, we've got that score that we've already added in. 66 00:04:26,430 --> 00:04:29,610 And then within there, we've got another element here. 67 00:04:29,730 --> 00:04:30,490 Just another div. 68 00:04:30,840 --> 00:04:33,060 And that's going to be representing that table. 69 00:04:33,270 --> 00:04:36,090 So all of the content within table is going to go in there. 70 00:04:36,360 --> 00:04:39,720 And then we've got another one that's just going to represent the dealer content. 71 00:04:40,050 --> 00:04:43,980 And this is where we've got the dealer object. 72 00:04:44,190 --> 00:04:46,170 So that's represented in there. 73 00:04:46,380 --> 00:04:49,050 So we need to add in within the game table. 74 00:04:49,080 --> 00:04:50,070 The game dealer. 75 00:04:50,400 --> 00:04:52,010 So we've got that added there. 76 00:04:52,380 --> 00:04:56,970 And then going back, we've got another one where we've got another element. 77 00:04:57,040 --> 00:04:58,290 Therefore, the score. 78 00:04:58,830 --> 00:05:01,110 So within the score, we've just got the dash. 79 00:05:01,620 --> 00:05:03,850 But we also see that within the score. 80 00:05:03,870 --> 00:05:08,520 So when we go game dealer score, there's also. 81 00:05:10,310 --> 00:05:11,990 Class called Square. 82 00:05:13,070 --> 00:05:16,070 So you can add in class in a number of ways. 83 00:05:16,460 --> 00:05:17,790 You can use classless. 84 00:05:17,840 --> 00:05:22,790 If you're just adding in one and if you've got multiple element attributes that you want to, you could 85 00:05:22,790 --> 00:05:26,120 do class as an attribute and then class. 86 00:05:26,180 --> 00:05:28,160 And then the properties of that attribute. 87 00:05:28,430 --> 00:05:29,990 But in this case, we only have the one. 88 00:05:30,250 --> 00:05:36,200 So we're going to use class list and then add and adding in a class of score. 89 00:05:36,920 --> 00:05:40,660 And we also need to append to the game dealer. 90 00:05:41,480 --> 00:05:43,160 This dealer score content. 91 00:05:43,970 --> 00:05:50,660 So using append once again a pending game dealer score into that element. 92 00:05:51,230 --> 00:05:51,830 So safe. 93 00:05:52,810 --> 00:05:55,610 And we can see we're already starting to look more like that. 94 00:05:56,030 --> 00:05:58,880 And then the next one is we've got the dealer cards. 95 00:05:59,240 --> 00:06:00,080 So the same thing. 96 00:06:00,320 --> 00:06:03,500 And actually, the order doesn't matter because it's just going into the object. 97 00:06:03,770 --> 00:06:08,120 So you might want to keep them within a more strict order or you might be a little bit more flexible. 98 00:06:08,300 --> 00:06:12,590 So it actually doesn't matter because once you've got the elements selected, then you can spend it. 99 00:06:12,650 --> 00:06:13,580 You can update it. 100 00:06:13,640 --> 00:06:15,560 And you can do all kinds of amazing things. 101 00:06:15,830 --> 00:06:17,300 All done with JavaScript. 102 00:06:17,600 --> 00:06:20,990 So I also wanted to add in the dealer cards value. 103 00:06:21,110 --> 00:06:22,550 So we've got the dealer card. 104 00:06:23,510 --> 00:06:27,560 So it's already starting to look quite a bit like what we see here at the top. 105 00:06:27,910 --> 00:06:32,540 And then we also need to do the same for the player in this structure of the player stuff is pretty 106 00:06:32,540 --> 00:06:34,580 much the same thing as the dealer stuff. 107 00:06:34,940 --> 00:06:40,190 So you can literally just copy and paste it and update this as player. 108 00:06:40,940 --> 00:06:43,990 And instead of dealer cards, we can just use player. 109 00:06:44,240 --> 00:06:46,460 So I'm going to copy and paste to save some time. 110 00:06:46,730 --> 00:06:53,720 So this is player cards, player cards, player cards, and we'll just write the word player card just 111 00:06:53,720 --> 00:06:55,520 to match with what we have down here. 112 00:06:55,810 --> 00:06:57,260 And it's the dealer score. 113 00:06:57,320 --> 00:07:01,130 We'll have player score to have real consistency in how we're naming it. 114 00:07:01,460 --> 00:07:05,270 And then when we're doing the pending, we're gonna hand everything the same way. 115 00:07:05,780 --> 00:07:09,020 And actually, this one should be append dealer. 116 00:07:09,800 --> 00:07:11,810 And this one should be append player. 117 00:07:11,900 --> 00:07:13,250 So let's see what this looks like. 118 00:07:13,460 --> 00:07:14,750 So, so far, so good. 119 00:07:15,020 --> 00:07:16,820 Looks very similar to what we have. 120 00:07:17,240 --> 00:07:22,100 And make it bigger so that we can take a better, closer look at the contents of it. 121 00:07:22,490 --> 00:07:27,950 So within the game I.D. and this one, we have the same structure. 122 00:07:28,250 --> 00:07:36,140 And then within the next div, we've got the first div and open that and we'll see that it is matching. 123 00:07:36,320 --> 00:07:41,090 So this is something that bracket says Houting and it's adding in the data brackets I.D.. 124 00:07:41,330 --> 00:07:43,730 So if you're not using brackets you're not going to see that. 125 00:07:43,730 --> 00:07:46,160 So if case you're wondering why there's all these ideas. 126 00:07:46,430 --> 00:07:49,880 So it's attaching this because it's constructing all of this stuff dynamically. 127 00:07:50,120 --> 00:07:51,380 So just ignore those. 128 00:07:51,680 --> 00:07:53,150 And you can see we've got score. 129 00:07:53,210 --> 00:07:55,250 We've got the dealer card. 130 00:07:55,790 --> 00:07:59,210 And then next div is the score and the player card. 131 00:07:59,690 --> 00:08:02,000 And let's just check score player card. 132 00:08:02,270 --> 00:08:03,920 So everything is on track. 133 00:08:04,250 --> 00:08:06,650 And then next we need to do some of the buttons. 134 00:08:06,950 --> 00:08:08,840 And this is going to be a little bit more complex. 135 00:08:08,930 --> 00:08:11,450 So we'll hold off till the next lesson for this. 136 00:08:11,840 --> 00:08:18,320 And in between the lessons, you can continue to construct your H.T. Amelle using JavaScript. 137 00:08:18,650 --> 00:08:24,290 And this is a great opportunity to get lots of practice in here as to construct elements and interact 138 00:08:24,290 --> 00:08:27,500 with Web page elements using JavaScript. 139 00:08:28,760 --> 00:08:31,430 So coming up, more constructing of elements.