1 00:00:00,240 --> 00:00:01,190 Hey, welcome back. 2 00:00:01,270 --> 00:00:04,570 Now all of the fun begins because we get to code JavaScript. 3 00:00:04,590 --> 00:00:10,560 I've also adjusted my container height to 400 pics, so fits better with my small screen here on the 4 00:00:10,560 --> 00:00:11,250 right hand side. 5 00:00:11,310 --> 00:00:15,100 So going into the indexed HTML, we're going to write the JavaScript within the script. 6 00:00:15,750 --> 00:00:21,660 The first thing we want to do is select our main container so that we can access it and utilize it within 7 00:00:21,660 --> 00:00:22,140 our code. 8 00:00:22,320 --> 00:00:27,090 So doing document and using query selector, there's a number of different ways that you can make your 9 00:00:27,090 --> 00:00:28,430 selection of the element. 10 00:00:28,740 --> 00:00:34,080 And in this case we can use query selector, selecting it by the class and selecting the element with 11 00:00:34,080 --> 00:00:35,460 the class of container. 12 00:00:35,490 --> 00:00:36,840 So just refresh. 13 00:00:37,020 --> 00:00:41,460 And usually the way that I like to do that is just to make sure that I did get the container properly. 14 00:00:41,610 --> 00:00:44,910 So it does look like I have the container within the container object. 15 00:00:44,940 --> 00:00:47,570 Also, we need to get its dimensions. 16 00:00:47,880 --> 00:00:53,250 So this is an option that we're going to also make use of the width and the height so it can make it 17 00:00:53,250 --> 00:00:54,290 more dynamic. 18 00:00:54,300 --> 00:00:59,910 So taking that container object that we just created, we're going to apply a method called get bounding 19 00:00:59,910 --> 00:01:01,010 client rectangle. 20 00:01:01,020 --> 00:01:04,950 And this is going to give us the height and width and all the dimensions that we need. 21 00:01:05,190 --> 00:01:11,670 So I'm going to just call it Con Dem, so we'll refresh and I'll put the values of Con Dem and this 22 00:01:11,670 --> 00:01:17,370 is going to be within an object format so we can select any one of these properties, such as bottom 23 00:01:17,370 --> 00:01:23,930 height, left, right, top width by doing corne dem daudt with top rate left. 24 00:01:24,060 --> 00:01:29,400 So all of these are now available to us that we can use in our coding when we make some calculations 25 00:01:29,640 --> 00:01:36,120 for where we need to position different elements as well as where off screen is and so on. 26 00:01:36,130 --> 00:01:37,790 So we need all of this information. 27 00:01:37,830 --> 00:01:42,420 So next, let's create some elements and we need one game over element. 28 00:01:42,420 --> 00:01:46,890 And this is going to be where we can start the game as well as what's going to show when the game is 29 00:01:46,890 --> 00:01:47,310 over. 30 00:01:47,430 --> 00:01:50,760 So using crit element, this is a div. 31 00:01:50,760 --> 00:01:52,410 Just go ahead and create a div. 32 00:01:52,410 --> 00:01:56,080 So we've got that game over object and we haven't added to the picture. 33 00:01:56,100 --> 00:01:59,400 We need to still add a few other things, but we've got an empty div. 34 00:01:59,400 --> 00:02:02,900 It's not anywhere on the it's we haven't added it to the page quite yet. 35 00:02:03,270 --> 00:02:05,460 Let's add in some content into here. 36 00:02:05,670 --> 00:02:11,580 So text content and for now we'll type in start game and we might want to change this throughout the 37 00:02:11,580 --> 00:02:11,820 game. 38 00:02:11,820 --> 00:02:15,780 So if we want to add in a class, if we have a particular styling, we could do that at this point as 39 00:02:15,780 --> 00:02:16,050 well. 40 00:02:16,140 --> 00:02:19,050 And I'm going to do as much as possible with JavaScript. 41 00:02:19,230 --> 00:02:21,720 So sometimes this is the longer way to do this. 42 00:02:21,720 --> 00:02:23,760 But of course this is a JavaScript course. 43 00:02:23,940 --> 00:02:28,410 So we're going to take the longer route and create all of the style attributes. 44 00:02:28,410 --> 00:02:31,470 So positioning it absolute and game over again. 45 00:02:31,480 --> 00:02:37,830 So game over style, adding in the color and the color that we want for the font is white and the next 46 00:02:37,830 --> 00:02:40,440 one that we want to do is set the line height. 47 00:02:40,440 --> 00:02:44,280 So this will allow us to position content in the middle. 48 00:02:44,760 --> 00:02:46,050 So make it really big. 49 00:02:46,080 --> 00:02:47,760 We'll make it at 300 pics. 50 00:02:47,760 --> 00:02:53,580 We also have text aligned and that can be Sunter so we can center the text content. 51 00:02:53,700 --> 00:02:56,400 There's also font size that we need to apply. 52 00:02:56,760 --> 00:02:59,580 So font size and I'll make this fairly big as well. 53 00:02:59,580 --> 00:03:02,190 So three M you can also transform. 54 00:03:02,280 --> 00:03:07,110 So text transform is another option and we'll transform it to uppercase. 55 00:03:07,110 --> 00:03:09,210 So no, we've got quite a bit of stuff going on there. 56 00:03:09,330 --> 00:03:12,690 I'm going to add it to the page so that we can see as we're building it out. 57 00:03:12,690 --> 00:03:18,360 So container append child and the child that we want to append is that game over div that we've just 58 00:03:18,360 --> 00:03:18,720 created. 59 00:03:18,720 --> 00:03:21,720 So let's refresh and see what it looks like. 60 00:03:21,960 --> 00:03:26,790 So we've got our start game there and we also should add a background color so that we can actually 61 00:03:26,790 --> 00:03:27,180 see it. 62 00:03:27,210 --> 00:03:28,170 So make this red. 63 00:03:28,290 --> 00:03:29,540 So try that one more time. 64 00:03:29,550 --> 00:03:33,840 So there we've got we've got our start game also let's adjust some width to it. 65 00:03:33,990 --> 00:03:39,120 So sometimes this is easier to actually put it on the page and then add in the styling. 66 00:03:39,540 --> 00:03:40,650 So again, refresh. 67 00:03:40,650 --> 00:03:47,180 And once you've got it to how you want it, then you're ready to move along and the other elements. 68 00:03:47,180 --> 00:03:48,630 So right now, I think this is pretty good. 69 00:03:49,080 --> 00:03:50,100 We've got start game. 70 00:03:50,100 --> 00:03:52,560 We've got a nice big clickable area to start the game. 71 00:03:52,830 --> 00:03:57,030 So let's think and this one we're going to add in an event listener to it. 72 00:03:57,390 --> 00:04:01,380 So add event, listener and event that we're going to listen for is click. 73 00:04:01,380 --> 00:04:05,060 And when it gets clicked, then we're going to run a function called Start Game. 74 00:04:05,070 --> 00:04:07,740 And so for now, this is just going to be a placeholder function. 75 00:04:08,100 --> 00:04:11,940 So go down at the bottom and create that function. 76 00:04:11,950 --> 00:04:13,860 It's not going to do anything yet. 77 00:04:13,860 --> 00:04:19,710 Will output into the console and just to make sure that everything is working properly, we start game, 78 00:04:19,740 --> 00:04:21,090 we get started in the console. 79 00:04:21,300 --> 00:04:22,080 So that's what we want it. 80 00:04:22,080 --> 00:04:25,950 There's a few other things that we need to add in, a few other elements that we want to add in before 81 00:04:25,950 --> 00:04:27,120 we complete this lesson. 82 00:04:27,480 --> 00:04:31,200 So a lot of it is going to be very similar where we're going to add in another element. 83 00:04:31,200 --> 00:04:35,700 So we've got the game over start button and we're going to have to create a ball and this is going to 84 00:04:35,700 --> 00:04:39,570 be the game play ball that's going to move around, that the player's going to hit and it's going to 85 00:04:39,570 --> 00:04:42,950 move and hit the blocks and remove the blocks and so on. 86 00:04:43,140 --> 00:04:48,120 So instead of Querrey selector, because we don't have that element we use, we need to use crit element. 87 00:04:48,390 --> 00:04:51,810 And this gives us together the ability to create the element in this case. 88 00:04:51,810 --> 00:04:57,120 Let's create another div selecting the ball object just as we did the game over element. 89 00:04:57,120 --> 00:04:58,710 And first let's set the position. 90 00:04:58,710 --> 00:04:59,820 So we're going to set the position. 91 00:04:59,880 --> 00:05:04,980 To absolute and this one's not going to be as complex as the game over, but somewhere down the line, 92 00:05:04,980 --> 00:05:07,170 I do want to add it to the main container. 93 00:05:07,380 --> 00:05:12,120 So selecting the container, we're going to spend a child and the child that we're going to spend is 94 00:05:12,120 --> 00:05:12,960 going to be ball. 95 00:05:13,410 --> 00:05:14,390 So we're able to see it. 96 00:05:14,400 --> 00:05:20,190 And also, I'm going to update the container background color to be slightly darker color. 97 00:05:20,430 --> 00:05:22,070 So said it to a dark gray. 98 00:05:22,530 --> 00:05:23,640 And so we refresh. 99 00:05:24,210 --> 00:05:26,390 So that will give us the ability to see the ball. 100 00:05:26,430 --> 00:05:31,080 So going back in and we've appended the ball, but we don't have anything quite yet happening on the 101 00:05:31,080 --> 00:05:31,320 ball. 102 00:05:31,320 --> 00:05:35,430 So ball style again and we can set a width of that. 103 00:05:35,490 --> 00:05:39,540 So this one is going to be relatively small and you can adjust this as needed, of course. 104 00:05:39,570 --> 00:05:42,230 So we've got a width, we have a height for the ball. 105 00:05:42,240 --> 00:05:46,750 And this is going to be, again, the same 20 picks and can't see anything yet. 106 00:05:46,950 --> 00:05:52,860 Let's do a ball background color and we're also going to attach an image to this ball will make it a 107 00:05:52,860 --> 00:05:53,550 tennis ball. 108 00:05:53,790 --> 00:05:54,840 So it'll be kind of neat. 109 00:05:54,870 --> 00:05:57,830 So without the image, it'll just be a white ball. 110 00:05:57,930 --> 00:06:00,660 So we've got doesn't actually look like a ball at square. 111 00:06:00,690 --> 00:06:01,840 So we need to take care of that. 112 00:06:01,860 --> 00:06:08,340 Of course we need to apply border radius and border radius is what rounds it in CSFs, if you're familiar 113 00:06:08,340 --> 00:06:12,140 with Cassus so it can do 25 Pich border radius. 114 00:06:12,480 --> 00:06:13,620 Let's refresh. 115 00:06:13,650 --> 00:06:14,910 So now we've got a ball. 116 00:06:15,600 --> 00:06:22,590 Next thing we want to do I do have you URL that I do have within here where I've got a PNG image that's 117 00:06:22,590 --> 00:06:23,000 a ball. 118 00:06:23,010 --> 00:06:25,260 So let's attach that one to our image. 119 00:06:25,540 --> 00:06:30,120 And again, that's the same thing where we're applying and updating the style attribute the color. 120 00:06:30,510 --> 00:06:36,410 We can set a background image and the format for the background image is again, you quarter around 121 00:06:36,420 --> 00:06:43,380 the value and then we specify that we're going to ball PMG and refresh and that should attach the tennis 122 00:06:43,380 --> 00:06:43,920 ball in there. 123 00:06:44,070 --> 00:06:45,810 And this image is slightly bigger. 124 00:06:45,960 --> 00:06:47,640 So I want to center this as well. 125 00:06:47,790 --> 00:06:51,240 And the way to do that, we can do the ball style again. 126 00:06:51,240 --> 00:06:55,860 So I know we're setting quite a bit of style here and background size is the one that we're looking 127 00:06:55,860 --> 00:06:56,120 for. 128 00:06:56,610 --> 00:06:58,800 So we're setting the height and width. 129 00:06:58,800 --> 00:07:04,020 So 20 picks by 20 picks and now we've got more of a tennis ball. 130 00:07:04,020 --> 00:07:06,750 It's all there, sitting there within the tennis ball. 131 00:07:06,810 --> 00:07:09,120 And that's just the PMG file that I have there. 132 00:07:09,120 --> 00:07:10,490 So that's where that's coming from. 133 00:07:10,770 --> 00:07:15,240 And if this is optional, you don't have to make it a tennis ball unless you want. 134 00:07:15,660 --> 00:07:16,790 But it's always good practice. 135 00:07:16,800 --> 00:07:21,780 Become very familiar with what you can do with the style and all the different options that you have 136 00:07:21,780 --> 00:07:24,240 with in style and also maybe by default. 137 00:07:24,240 --> 00:07:29,490 We want to take the ball once we've built it and we've created the way that we want to look, we're 138 00:07:29,490 --> 00:07:31,080 going to play display none. 139 00:07:31,260 --> 00:07:35,130 And then once the game starts, then we're going to show the ball, because it doesn't make a lot of 140 00:07:35,130 --> 00:07:38,310 sense that the ball would be sitting there on top of the start game. 141 00:07:38,580 --> 00:07:40,860 So that would be kind of confusing for the user. 142 00:07:40,980 --> 00:07:44,160 So let's hide that and we can also position the ball. 143 00:07:44,310 --> 00:07:46,770 And this is also going to get dynamically adjusted. 144 00:07:47,010 --> 00:07:49,410 But it's always good to just have a starting position. 145 00:07:49,590 --> 00:07:56,880 So this can be pretty much anything we want are going to set it to 70 percent and ball style and left 146 00:07:56,880 --> 00:07:57,490 position. 147 00:07:57,490 --> 00:08:02,520 This one can again be anything that we want because we are going to be setting this dynamically using 148 00:08:02,520 --> 00:08:03,150 JavaScript. 149 00:08:03,450 --> 00:08:04,770 So now we've got our ball. 150 00:08:04,770 --> 00:08:06,240 We're all ready to go with the ball. 151 00:08:06,240 --> 00:08:08,160 When I refresh it, it should be gone. 152 00:08:08,160 --> 00:08:12,180 We've got display not and we have one more element that we want to create. 153 00:08:12,180 --> 00:08:17,010 And I know we've gotten lots of practice in this lesson, creating elements and updating their style 154 00:08:17,010 --> 00:08:17,670 attributes. 155 00:08:17,880 --> 00:08:19,230 So it's always good practice. 156 00:08:19,410 --> 00:08:21,570 And I do promise you, this is the last one. 157 00:08:21,590 --> 00:08:26,070 I'm going to go super quick on this one, creating the element, because a lot of this is going to be 158 00:08:26,070 --> 00:08:32,550 a repeat and you are welcome to try this on your own afterwards and just make some style adjustments, 159 00:08:32,550 --> 00:08:37,410 get used to all the different options that you have when you create an element and styling them all 160 00:08:37,410 --> 00:08:38,610 using JavaScript. 161 00:08:38,790 --> 00:08:42,030 So again, doing the style and we can add in. 162 00:08:42,030 --> 00:08:46,410 So if we had any success styles, we could add them in here as well. 163 00:08:46,410 --> 00:08:47,460 But we don't have anything. 164 00:08:47,910 --> 00:08:49,650 We're doing this all with JavaScript. 165 00:08:49,830 --> 00:08:54,480 So first thing we want to do is set its position and its position, just like the other ones is going 166 00:08:54,480 --> 00:09:01,440 to be absolute again, append it to the container so that we can see it as we're developing it. 167 00:09:01,590 --> 00:09:04,140 So that's paddle as the object. 168 00:09:04,740 --> 00:09:07,890 Let's update some of the other position, the other properties. 169 00:09:07,890 --> 00:09:12,030 So it's part of style and of course, background color. 170 00:09:12,900 --> 00:09:20,460 So set it to white height and we're going to set height to twenty picks, setting with two hundred and 171 00:09:20,460 --> 00:09:28,230 fifty picks on a rounded a little bit so border radius and we'll position it at bottom position and 172 00:09:28,230 --> 00:09:29,670 also a left position. 173 00:09:29,670 --> 00:09:32,220 So we have a horizontal and we can center it. 174 00:09:32,220 --> 00:09:33,020 So 50 percent. 175 00:09:33,420 --> 00:09:34,500 So let's see what that looks like. 176 00:09:34,500 --> 00:09:35,700 So do a refresh. 177 00:09:35,850 --> 00:09:38,820 So there's our paddle and we are all ready to go. 178 00:09:38,820 --> 00:09:43,590 Maybe we want to make it smaller so it doesn't matter and you can adjust these as needed to improve 179 00:09:43,590 --> 00:09:44,220 the gameplay. 180 00:09:44,400 --> 00:09:47,370 So for this case, it does look like the paddle was rather large. 181 00:09:47,490 --> 00:09:50,820 Let's set it to one hundred pics so we can always adjust this afterwards. 182 00:09:51,180 --> 00:09:56,730 So go ahead and try this out, create a few elements, create the game over the ball and the paddle, 183 00:09:56,730 --> 00:09:58,680 and you can be ready to move on to the next part. 184 00:09:58,890 --> 00:09:59,070 Where? 185 00:09:59,140 --> 00:10:03,130 Going to make some action, something happen with this game, so that's still to come.