1 00:00:00,180 --> 00:00:06,300 This lesson, we're going to update some of the properties of that object that we created and update 2 00:00:06,300 --> 00:00:09,940 its positioning top and left position using functions. 3 00:00:10,600 --> 00:00:12,450 Let's refresh, make it bigger. 4 00:00:12,690 --> 00:00:18,350 And when we output the my block element, we can see that we've got that my block element. 5 00:00:18,510 --> 00:00:25,290 And if we want to get its left position, we can use offset left whatsoever, turn its left position, 6 00:00:25,590 --> 00:00:31,110 and as well we can use offset top to get its position off of the top. 7 00:00:31,350 --> 00:00:35,250 And remember, we did set these within the variables here. 8 00:00:35,410 --> 00:00:40,160 We've got the top of 100 and we've got the left of 150. 9 00:00:40,470 --> 00:00:42,270 So that means that we can use this. 10 00:00:42,270 --> 00:00:49,310 And if we create a function that says go left, we can update the position of our elements. 11 00:00:49,920 --> 00:00:57,300 So selecting we'll create a temporary position value where we're going to use the my block element and 12 00:00:57,300 --> 00:01:03,630 then use offset left to get its left position, then taking that value. 13 00:01:03,660 --> 00:01:11,320 We can update that value of temp and we can equal temp plus temp and add 50 to it. 14 00:01:11,340 --> 00:01:19,080 And then lastly, let's update my block and we'll take its star position, its left position, and equal 15 00:01:19,080 --> 00:01:20,600 it to whatever temp. 16 00:01:20,790 --> 00:01:24,300 And don't forget the picks, because this is expecting a string value. 17 00:01:24,330 --> 00:01:32,340 So now when we refresh and if I type in a function and we say go left, you can see that it goes to 18 00:01:32,340 --> 00:01:37,540 the left and we could do the same thing to go to the right, and we can also do up and down. 19 00:01:37,800 --> 00:01:43,000 So if you want to pause the video and give it a try, you can add that in and I'll show you the solution. 20 00:01:43,140 --> 00:01:47,580 So the same thing that we did to go left we can do to go to right. 21 00:01:47,580 --> 00:01:55,230 And it's almost very similar if we go up where we're getting the offset top position and going up. 22 00:01:55,230 --> 00:02:01,410 So we're subtracting and we're just updating its top position and then going down. 23 00:02:01,410 --> 00:02:04,360 It's going to be the opposite of going up, of course. 24 00:02:04,560 --> 00:02:09,480 So going down, we're going to add 50 and the rest is going to be the same. 25 00:02:09,780 --> 00:02:14,630 So now we've got a series of functions where we can actually maneuver our elements. 26 00:02:14,630 --> 00:02:16,980 So if we want to go up, we can go up. 27 00:02:16,980 --> 00:02:22,170 We can move this element to the right by invoking the function goal. 28 00:02:22,170 --> 00:02:22,550 Right. 29 00:02:22,920 --> 00:02:26,220 Actually, that one went left so that one subtracted. 30 00:02:26,340 --> 00:02:28,270 And I just got to reverse this. 31 00:02:28,410 --> 00:02:29,730 So let's try that one more time. 32 00:02:29,740 --> 00:02:30,680 So go. 33 00:02:30,720 --> 00:02:34,010 We've got great function and makes a go rates. 34 00:02:34,020 --> 00:02:37,380 We also have a goal left function, makes it go left. 35 00:02:37,410 --> 00:02:40,520 We have go up function which is going to move it up. 36 00:02:40,530 --> 00:02:46,820 And then lastly, we have the last option, which was go down and invoking that function, move cell 37 00:02:46,830 --> 00:02:47,280 event down. 38 00:02:47,370 --> 00:02:50,760 Go ahead and try this out, add that into your code and have some fun with it. 39 00:02:50,760 --> 00:02:53,610 Move it around, try out some of the different functions. 40 00:02:53,850 --> 00:03:00,840 And coming up next, extend on this and build this application to listen to keyboard clicks and then 41 00:03:00,840 --> 00:03:02,630 there run the functions accordingly. 42 00:03:02,760 --> 00:03:05,100 So that's still all to come in the upcoming lessons.