1 00:00:00,330 --> 00:00:07,200 I've added in some H.T. Amelle into our game object, and I'm going to be actually erasing all of this 2 00:00:07,250 --> 00:00:07,440 H. 3 00:00:07,490 --> 00:00:12,540 Timal and we're gonna be doing this all with JavaScript and that's going to be coming up within this 4 00:00:12,540 --> 00:00:12,930 lesson. 5 00:00:13,050 --> 00:00:19,950 And the next lessons we're going to construct, all of these elements, ply the various styling, adding 6 00:00:19,950 --> 00:00:27,480 in content, adding in classes, and then setting various attributes of those elements as we build them 7 00:00:27,480 --> 00:00:28,230 with JavaScript. 8 00:00:28,620 --> 00:00:33,870 So at the end of the day and at the end of the project, we're gonna remove out all of this excess H. 9 00:00:33,870 --> 00:00:37,300 Timal, and of course, we want to focus on JavaScript. 10 00:00:37,490 --> 00:00:39,390 So so we're going doing in the upcoming lessons. 11 00:00:39,710 --> 00:00:45,900 And before we do that, we're gonna setup some variables that we're gonna use within the code in order 12 00:00:45,900 --> 00:00:47,250 to construct game. 13 00:00:47,790 --> 00:00:54,150 So going into the script file and just before we're initiating, let's set up some variables that we're 14 00:00:54,150 --> 00:00:55,350 gonna use within the game. 15 00:00:55,590 --> 00:01:01,020 This variable called a game is we're gonna howse some of the game information as well as the elements 16 00:01:01,020 --> 00:01:04,990 that we're going to be creating and mimicking what we see within the HDMI out. 17 00:01:05,760 --> 00:01:09,540 And in order to do that, let's take a look at some documentation first. 18 00:01:10,210 --> 00:01:16,260 So some of the JavaScript methods that we're going to be making use of in this lesson is query selector. 19 00:01:16,290 --> 00:01:23,340 So what query selector does is it allows us to select from the document object using query selector 20 00:01:23,430 --> 00:01:25,790 and applying a selector value. 21 00:01:26,430 --> 00:01:29,550 Finding the matching element on the page. 22 00:01:29,580 --> 00:01:34,320 So it founds the first one that matches the specific selection. 23 00:01:34,680 --> 00:01:37,690 And if there's no matches, then it's just going to return back null. 24 00:01:38,160 --> 00:01:40,890 Also, we're going to be using create element. 25 00:01:41,250 --> 00:01:47,100 So this allows us to create elements using JavaScript lezzies to create elements dynamically and we 26 00:01:47,100 --> 00:01:49,650 can apply some properties to those elements. 27 00:01:49,950 --> 00:01:52,980 So specify the different type of elements that we want to create. 28 00:01:53,400 --> 00:01:55,500 In this example, they're creating a div. 29 00:01:55,560 --> 00:02:00,780 So you're just using document dot create element creates a div adding in some text. 30 00:02:01,080 --> 00:02:08,700 So creating some text node content and then using append child to append that content into the main 31 00:02:08,700 --> 00:02:09,300 container. 32 00:02:09,650 --> 00:02:14,880 So it's grabbing a main container and then appending content into it and outputting it here within the 33 00:02:14,880 --> 00:02:15,300 page. 34 00:02:15,900 --> 00:02:19,770 Once you have an element object, either you've created it or you've selected it. 35 00:02:20,070 --> 00:02:21,750 You can apply various styling. 36 00:02:21,770 --> 00:02:22,980 So inline styling. 37 00:02:23,280 --> 00:02:26,060 So these are all the typical styles that you would have with CSX. 38 00:02:26,550 --> 00:02:32,700 And this is going to be what's going to allow us to apply the various style properties that we see on 39 00:02:32,700 --> 00:02:33,270 the page. 40 00:02:33,960 --> 00:02:36,920 So it's not just completely just regular H.T. mail. 41 00:02:36,930 --> 00:02:43,140 We do have some heart, some larger font sizes and so on, so we can apply all that styling as well 42 00:02:43,140 --> 00:02:46,620 as colors, and we can also set attributes to the elements. 43 00:02:46,620 --> 00:02:52,050 So once we've got the element selected or created, we can set attributes, we specify the attribute 44 00:02:52,080 --> 00:02:54,750 name and then the attribute value that we're setting to it. 45 00:02:55,110 --> 00:02:57,930 There's two different ways that we can append content. 46 00:02:58,260 --> 00:02:59,650 So there's append child. 47 00:03:00,030 --> 00:03:03,330 And this is a method that adds a node to the end of the list of child. 48 00:03:03,570 --> 00:03:09,240 So basically you get the parent element and then you can append a child to it and that's gonna add it 49 00:03:09,330 --> 00:03:10,260 onto the page. 50 00:03:10,530 --> 00:03:16,170 And as we saw here, when they create an element, then they do use the append child to add it to the 51 00:03:16,170 --> 00:03:16,680 new div. 52 00:03:16,730 --> 00:03:21,440 So the new div gets appended, the new content and then we get. 53 00:03:22,970 --> 00:03:27,620 Getting element by I.D., so it's selecting the div on the page, which is this one. 54 00:03:27,980 --> 00:03:29,540 And we're adding in. 55 00:03:29,600 --> 00:03:34,790 So it's adding and there's also options here where you can insert before and so on says a number of 56 00:03:34,790 --> 00:03:38,500 different ways to append content to the element. 57 00:03:38,630 --> 00:03:40,940 And here they're just selecting the document body. 58 00:03:41,240 --> 00:03:42,650 And they're inserting content there. 59 00:03:43,370 --> 00:03:46,910 We've also got the append as well. 60 00:03:47,240 --> 00:03:52,550 So this is another way to insert and set content into the node. 61 00:03:52,940 --> 00:03:55,310 And there are some differences from append child. 62 00:03:55,610 --> 00:04:02,780 So pen Lao's you to append Domme string objects and append child only accepts node objects. 63 00:04:03,440 --> 00:04:09,380 There are also some differences that there's no return value on append or is append child returns. 64 00:04:09,420 --> 00:04:11,180 The appended node object. 65 00:04:11,570 --> 00:04:14,330 And if you're not going to be using that, then you can just go ahead and use a pen. 66 00:04:14,390 --> 00:04:19,970 So we are going to be using append as opposed to a pen child because we don't need to return the object 67 00:04:20,060 --> 00:04:22,160 as we're gonna be building out the same object. 68 00:04:22,490 --> 00:04:26,150 And with a pen to swell, you can append several nodes and strings. 69 00:04:26,480 --> 00:04:29,930 Whereas with append to child, we've only got one that we're able to append. 70 00:04:30,290 --> 00:04:33,620 So this will also allow us to minimize some of the code that we're writing. 71 00:04:34,220 --> 00:04:38,720 So let's get back into the project and we're gonna do all of this within the iron eyeteeth. 72 00:04:39,440 --> 00:04:45,080 So the objective, again, is to build out the exact same thing that we see here on the page, except 73 00:04:45,140 --> 00:04:46,850 and then we'll remove out that main part. 74 00:04:47,330 --> 00:04:52,070 So what I'll do is I'll create a separate div and get rid of the game idea on this one. 75 00:04:52,660 --> 00:04:56,810 And we're going to use this with JavaScript to construct all of this content. 76 00:04:56,990 --> 00:05:00,520 So let's use the game object that we created earlier. 77 00:05:00,530 --> 00:05:07,070 So this is our main container for all of the elements and we can call this the main container. 78 00:05:07,700 --> 00:05:15,980 And then using documents and query selector selecting that element that has the idea of game. 79 00:05:16,370 --> 00:05:22,700 So just like you would with styling, you specify the hash for I.D., the dot for classes, and then 80 00:05:22,760 --> 00:05:25,040 nothing for the tag names. 81 00:05:25,460 --> 00:05:31,610 And if I console logout the value of game, we're going to see that particular element is now contained 82 00:05:31,610 --> 00:05:32,720 within the game object. 83 00:05:33,200 --> 00:05:35,960 So this is gonna give us access to that element. 84 00:05:36,410 --> 00:05:41,000 And at this point, we can select and we can update content contained within there. 85 00:05:41,450 --> 00:05:47,730 So if we want to do game main and to text contents, we can write. 86 00:05:47,930 --> 00:05:48,860 Hello World. 87 00:05:49,010 --> 00:05:54,590 And that will apply the tax content into that main object of hello world. 88 00:05:54,860 --> 00:05:56,750 So how about we create some elements? 89 00:05:56,750 --> 00:06:01,580 So we see the first one here has some content dealer versus player. 90 00:06:01,670 --> 00:06:06,740 So this is a scoreboard content where we're gonna be outputting the score to the player. 91 00:06:07,310 --> 00:06:09,290 So let's create a name for it. 92 00:06:09,380 --> 00:06:11,900 And I'm going to call it game dot scoreboard. 93 00:06:12,740 --> 00:06:16,400 And then using documents, create elements. 94 00:06:16,780 --> 00:06:19,190 An element that we're creating is gonna be a div. 95 00:06:19,310 --> 00:06:22,250 So we're mimicking exactly what we've got contained here. 96 00:06:22,820 --> 00:06:31,280 And then we can set the text content of the game scoreboard and set the text content and whatever we 97 00:06:31,280 --> 00:06:33,050 want the text content to equal to. 98 00:06:33,440 --> 00:06:38,510 So let's add in the text content there and then we also need to appended. 99 00:06:38,930 --> 00:06:41,330 So we've got the game main object. 100 00:06:41,900 --> 00:06:48,590 And then we can use append to append game scoreboard object into their. 101 00:06:49,570 --> 00:06:54,610 So as assume you've got the game scoreboard object and I can get rid of the text there because we're 102 00:06:54,610 --> 00:06:55,360 not going to need that. 103 00:06:55,600 --> 00:07:02,560 And one last thing before we conclude this lesson is going to be a game scoreboard and updating the 104 00:07:02,620 --> 00:07:07,090 style and setting the style we need to update the font size. 105 00:07:07,630 --> 00:07:16,660 So this is going to be font size and giving it a value of two AM to match what we have in the below 106 00:07:17,050 --> 00:07:17,470 element. 107 00:07:18,250 --> 00:07:26,260 Now, when you open the H.T. Amelle page and you go to inspect and we look at the contents that we've 108 00:07:26,260 --> 00:07:31,780 got within the game object, this is actually already matching with what we have here below. 109 00:07:32,440 --> 00:07:37,700 So the first element now has been created and now we've got a bunch more to create. 110 00:07:38,110 --> 00:07:42,850 And I know this is going to be more time consuming than just using the HD here, Mel, but we do want 111 00:07:42,850 --> 00:07:51,100 to get lots of practice in to writing the JavaScript code with the elements as well as once we're setting 112 00:07:51,100 --> 00:07:53,260 them within the game object. 113 00:07:53,500 --> 00:08:00,130 We have access to them within the game so we can rewrite the content of the score and we can make updates 114 00:08:00,130 --> 00:08:02,230 to the various elements as needed. 115 00:08:02,500 --> 00:08:06,760 So it's gonna be a crucial part to making the gameplay work well before the next lesson. 116 00:08:06,850 --> 00:08:08,500 If you want, you can go through the H. 117 00:08:08,510 --> 00:08:11,200 Timal and build it with JavaScript. 118 00:08:11,620 --> 00:08:17,260 And the next lesson I would be walking you through, how we're going to construct the exact same content 119 00:08:17,290 --> 00:08:19,360 here using JavaScript. 120 00:08:19,610 --> 00:08:20,920 So it's coming up in the next lesson.