1 00:00:00,180 --> 00:00:04,290 In this lesson, we're going to be covering one of my favorite things to do in JavaScript, and that 2 00:00:04,290 --> 00:00:05,700 is to create elements. 3 00:00:05,940 --> 00:00:12,090 So now that we've got our function there, we need a function to launch in order to create those elements 4 00:00:12,240 --> 00:00:15,500 and to create those boxes that are going to be clicked by the user. 5 00:00:15,780 --> 00:00:18,780 So we're going to create a new function, call it my box. 6 00:00:19,180 --> 00:00:25,620 And so this will launch the function we need to create an element, a basic container that's going to 7 00:00:25,620 --> 00:00:34,020 hold that content so we can call it L'il and using the document object within it, there's a method 8 00:00:34,020 --> 00:00:35,630 that's called create element. 9 00:00:35,970 --> 00:00:38,780 So this gives you the ability to create any type of element you want. 10 00:00:38,850 --> 00:00:40,560 In this case, I'm going to be creating a div. 11 00:00:40,980 --> 00:00:47,640 So we're opening up and we've created a div and I can actually console log out that div and when we 12 00:00:47,640 --> 00:00:53,100 refresh it hit start, you can see there's our div that we've created, but it's not on the page yet. 13 00:00:53,220 --> 00:00:57,180 If I want to add it into the page then I need to select where I want to add it. 14 00:00:57,360 --> 00:01:03,530 I've got this object element already ready so I can add it into the game area. 15 00:01:03,810 --> 00:01:12,930 I can append child into that area and then all I need to do is identify that element object that I want 16 00:01:12,930 --> 00:01:13,560 to append. 17 00:01:13,770 --> 00:01:15,530 So let's try that one more time. 18 00:01:15,540 --> 00:01:19,590 And in this case, let's look at what we've got here within the game area. 19 00:01:19,770 --> 00:01:20,960 So nothing yet. 20 00:01:21,180 --> 00:01:22,020 Watch what happens. 21 00:01:22,020 --> 00:01:23,160 Want to hit the start button? 22 00:01:23,430 --> 00:01:26,700 We see that we get our div appears. 23 00:01:27,300 --> 00:01:31,470 So this is the brand new div that we created and of course, nothing in there yet. 24 00:01:31,470 --> 00:01:33,000 We don't see anything on the screen. 25 00:01:33,210 --> 00:01:36,350 But this is how you can create elements within JavaScript. 26 00:01:36,630 --> 00:01:42,720 And so now within this element, we can apply some different formatting if we want to add in a class 27 00:01:42,720 --> 00:01:43,080 to it. 28 00:01:43,240 --> 00:01:47,070 So let's set up a class to house that information. 29 00:01:47,610 --> 00:01:49,140 We can set up a class. 30 00:01:51,410 --> 00:01:56,690 I'll give it a position of relative so we can move it around, set a different type position, left 31 00:01:56,690 --> 00:02:04,520 position, and also I'll do border radius so that we can make it round so it's not going to be squares. 32 00:02:05,150 --> 00:02:09,260 And basically we're going to add in that class into that element. 33 00:02:09,440 --> 00:02:15,650 So you see, the next time we refresh it, we're taking that element object that we just freshly created 34 00:02:16,010 --> 00:02:23,800 using class list and using the ADD function in order to add to the current class list. 35 00:02:24,080 --> 00:02:30,670 So if we don't have any existing class, we can also set attribute class and then add in the box. 36 00:02:30,830 --> 00:02:32,060 So that's another option. 37 00:02:32,180 --> 00:02:38,750 But if you already have existing class values within the div, then you need to add or you could remove 38 00:02:38,750 --> 00:02:40,740 it specifying the class name. 39 00:02:41,060 --> 00:02:48,020 So again, pay attention to the game area hit start and we see that we've got our element here with 40 00:02:48,020 --> 00:02:49,340 the class of box. 41 00:02:49,490 --> 00:02:52,940 And again, not a whole lot happening within it quite yet. 42 00:02:53,180 --> 00:02:56,660 So we're going to set a bunch of other values into it. 43 00:02:57,140 --> 00:03:03,070 We can do things like we can take the background, we can apply style properties to it. 44 00:03:03,320 --> 00:03:04,940 So we've got a bunch of options here. 45 00:03:05,090 --> 00:03:10,790 And you can see that Brackets is really giving me a whole list of tons of different options that I have. 46 00:03:10,910 --> 00:03:13,610 And the one that I want to use is background color. 47 00:03:13,790 --> 00:03:16,750 So let's set a background color of red to it. 48 00:03:17,300 --> 00:03:20,600 We also see that we don't actually see this element. 49 00:03:20,900 --> 00:03:28,490 So we're going to apply a style and this is a style of width so we can actually see the value and we 50 00:03:28,490 --> 00:03:32,770 can set it as one hundred picks for now, also element style. 51 00:03:32,780 --> 00:03:36,740 So if we've got a width, we should also set a height so we can definitely see it. 52 00:03:36,740 --> 00:03:38,750 So it'll be one hundred picks by one hundred picks. 53 00:03:39,050 --> 00:03:40,700 So nice square box. 54 00:03:40,880 --> 00:03:41,930 Let's try that out. 55 00:03:41,930 --> 00:03:50,030 Refresh start and while we see our circle and we can also move it around a bit because we did apply 56 00:03:50,630 --> 00:03:53,060 a position property of relative. 57 00:03:53,480 --> 00:04:00,590 And of course you can actually add these properties in so you don't necessarily even need to set a class 58 00:04:00,590 --> 00:04:00,920 to it. 59 00:04:01,160 --> 00:04:03,980 You can add them in as properties if you wanted to. 60 00:04:04,160 --> 00:04:06,260 So I'll leave that class of box. 61 00:04:06,530 --> 00:04:11,690 But if we want to do things like setting the border radius, we can add that in as well. 62 00:04:11,690 --> 00:04:15,080 So style and then doing border radius. 63 00:04:15,680 --> 00:04:16,670 So this one's a long one. 64 00:04:17,420 --> 00:04:21,190 It's a border radius and then whatever the border radius is equal to. 65 00:04:21,470 --> 00:04:25,160 So if we wanted it to equal 50, we can add it in that way. 66 00:04:25,310 --> 00:04:31,100 And if I get rid of it here, you're going to see that nothing is going to change because now we're 67 00:04:31,100 --> 00:04:37,220 adding it within JavaScript and we can also add in the position if we wanted to, so we could take that 68 00:04:37,220 --> 00:04:41,660 element, style and position. 69 00:04:41,660 --> 00:04:46,730 So we've got position there and here we can type in a relative and we can even get rid of that so we 70 00:04:46,730 --> 00:04:53,900 can completely leave box empty and have our position and have all of the properties set there. 71 00:04:54,050 --> 00:04:55,400 So I'll leave it like this. 72 00:04:55,610 --> 00:05:01,760 And ones that aren't changing, you could add into as a class and then adding in the class. 73 00:05:01,760 --> 00:05:03,710 So it saves you a little bit on the JavaScript. 74 00:05:03,800 --> 00:05:08,000 And if you want to practice the JavaScript, this is a great way to practice JavaScript. 75 00:05:08,240 --> 00:05:09,140 So what else do we need? 76 00:05:09,140 --> 00:05:10,340 We need a style. 77 00:05:10,490 --> 00:05:15,110 We can also set a position so we've got our top position. 78 00:05:15,350 --> 00:05:21,590 So this, again, is a pixel position so we can set one hundred and fifty picks, position, element 79 00:05:21,680 --> 00:05:29,180 style and also let's set a left position that should be an equal side so we can just do fifty for this 80 00:05:29,180 --> 00:05:29,360 one. 81 00:05:30,260 --> 00:05:32,710 And what we want to do is we want to randomize these. 82 00:05:32,900 --> 00:05:35,570 So right now it's always appearing in the same spot. 83 00:05:35,720 --> 00:05:41,240 If I go into that element and if I take a closer look at what's being applied to it. 84 00:05:41,390 --> 00:05:46,190 So we see that we've got quite a bit of styling being applied to it. 85 00:05:46,190 --> 00:05:50,660 So we've got our background color, red width, one hundred height, one hundred border radius, 50 86 00:05:50,660 --> 00:05:55,310 percent position, relative top 150 left 50. 87 00:05:55,520 --> 00:06:02,780 And remember, the way that styles work is even if the box has some default values, when you apply 88 00:06:02,780 --> 00:06:06,380 the style attribute, that's going to overwrite the class values. 89 00:06:06,620 --> 00:06:12,260 So even if you've got content in the box, wherever you've got some default content in there, you can 90 00:06:12,260 --> 00:06:18,050 always set these using JavaScript and that will propagate over it because this is within the style property. 91 00:06:18,680 --> 00:06:22,530 So the next thing that we want to do is we want to randomize some of these values. 92 00:06:22,530 --> 00:06:25,850 So it's not always showing up exactly in the same spot. 93 00:06:26,030 --> 00:06:32,900 And that's why it was a good thing that the last lesson we created this random Isar, so we can really 94 00:06:32,900 --> 00:06:37,850 easily add in random values so we can do something like random. 95 00:06:38,090 --> 00:06:42,250 And if we wanted a random number to one hundred, we could do that. 96 00:06:42,980 --> 00:06:48,140 So now when I hit start, you're going to see that it's getting a random value. 97 00:06:48,320 --> 00:06:50,420 So we might not want to do random. 98 00:06:50,560 --> 00:06:57,460 One hundred, we might want to do something like random 30 and then plus 70, so that will give us a 99 00:06:57,460 --> 00:06:58,530 more rounded shape. 100 00:06:58,540 --> 00:07:00,400 So it's not always 100 percent rounded. 101 00:07:00,610 --> 00:07:05,830 And now when we inspect it, you can see that the value that what's been applied to it. 102 00:07:06,280 --> 00:07:08,880 So we've got width of ninety nine. 103 00:07:08,890 --> 00:07:11,140 So that was that random value that was being returned. 104 00:07:11,380 --> 00:07:14,690 This time we have a width of 75. 105 00:07:14,740 --> 00:07:19,900 So it's always different and it's always changing and you can adjust and tweak these as needed so you 106 00:07:19,900 --> 00:07:24,820 can do the same thing for the other values and just randomizing them a little bit. 107 00:07:25,300 --> 00:07:30,880 You don't have to randomize the boardriders unless of course, you want you can randomize that one to 108 00:07:30,880 --> 00:07:32,970 50 plus the percentage sign. 109 00:07:33,130 --> 00:07:34,240 So this is a string. 110 00:07:34,240 --> 00:07:39,130 And with JavaScript, whenever you're adding a number to a string, it automatically turns into a string 111 00:07:39,250 --> 00:07:40,990 and it's expecting a string on that end. 112 00:07:41,080 --> 00:07:43,210 They've got some really weird things happening here. 113 00:07:43,240 --> 00:07:49,110 So for some reason, it's really long and that's because I left that hundred within the height. 114 00:07:49,150 --> 00:07:51,250 So let me get rid of that these ones as well. 115 00:07:51,370 --> 00:07:57,010 So get rid of the 150 in here as one fifty and that can be 50. 116 00:07:57,010 --> 00:08:02,320 And this will just be randomly positioned now so we can go in and start going in Head Start. 117 00:08:02,500 --> 00:08:05,830 And you can see that these are appearing in different positions. 118 00:08:06,070 --> 00:08:07,740 They're a little bit different shapes. 119 00:08:07,750 --> 00:08:12,400 Coming up next, we need to make some random colors and that's what we're going to do, doing in the 120 00:08:12,400 --> 00:08:13,320 upcoming lesson. 121 00:08:13,570 --> 00:08:17,320 So go ahead and add this into your project, have some fun with it. 122 00:08:17,470 --> 00:08:23,290 Update the style properties of the element, create the element dynamically, update the style properties. 123 00:08:23,380 --> 00:08:29,050 You can use the random function that we created in the last lesson and then append it to your game area 124 00:08:29,230 --> 00:08:31,660 in order to create and start that gameplay.