1
00:00:00,240 --> 00:00:05,500
Last lesson we added in the ability to create a list of commands that we want to run.

2
00:00:05,730 --> 00:00:09,130
So now we want to be able to have an option to execute them.

3
00:00:09,480 --> 00:00:11,520
So we're going to listen for key process.

4
00:00:11,670 --> 00:00:19,500
And the two key processes that we're listening for is going to be for either the enter, which is 13,

5
00:00:20,340 --> 00:00:27,540
or if the key code is equal to 32, then that's the space.

6
00:00:27,540 --> 00:00:33,030
And we want to then execute a function and the function that we want to execute is mover.

7
00:00:33,450 --> 00:00:35,370
So we're executing a move or function.

8
00:00:35,520 --> 00:00:40,800
And then this is going to run through all of the different commands that we've got listed here.

9
00:00:41,220 --> 00:00:45,750
So adding those in and it's going to run through and it's going to execute those commands.

10
00:00:46,050 --> 00:00:47,460
So it's set up that function.

11
00:00:48,030 --> 00:00:54,030
And we don't need to pass anything into this function because we're using the global objects that contain

12
00:00:54,030 --> 00:00:57,330
the information in order for us to create the movement.

13
00:00:57,720 --> 00:01:04,310
So what we want to do is first we're going to check to see if formalised because this is an array.

14
00:01:04,320 --> 00:01:09,510
So it's going to have a length if the fullest length is larger than zero.

15
00:01:09,840 --> 00:01:13,090
And if it is, then we are ready to move.

16
00:01:13,710 --> 00:01:21,840
So we want to get our current position of the bounding client rectangle and we can do that.

17
00:01:21,850 --> 00:01:23,880
So we were getting it with offset here.

18
00:01:24,120 --> 00:01:31,200
And there's actually another way to get the current position so we can use the my block object and using

19
00:01:31,200 --> 00:01:33,430
get bounding client rectangle.

20
00:01:33,660 --> 00:01:36,870
This will give us the current coordinates of that element.

21
00:01:37,350 --> 00:01:43,500
So let's let's output that first so you can see what that looks like and then as we run through.

22
00:01:43,500 --> 00:01:51,060
So I need to add in a few commands and now when I press enter or space you'll see that we get this bounding

23
00:01:51,060 --> 00:01:51,610
rectangle.

24
00:01:51,780 --> 00:01:56,520
So this is giving us the position of where that element is currently located.

25
00:01:56,760 --> 00:02:01,230
So we can as well obviously use the functions that create the movement.

26
00:02:01,410 --> 00:02:03,060
But we're going to fine tune this a little bit.

27
00:02:03,070 --> 00:02:08,430
So we're actually not going to be using the functions and we're going to be doing the movement here

28
00:02:08,460 --> 00:02:13,920
within this one mover function now that we got the client bounding rectangle.

29
00:02:14,080 --> 00:02:21,080
And this is also to illustrate that we can create this type of effect in a number of different ways.

30
00:02:21,660 --> 00:02:28,710
So let's grab our current element or the movement command, whatever we want to call it, and using

31
00:02:29,070 --> 00:02:30,580
function shift.

32
00:02:30,870 --> 00:02:34,500
So what shift will do is it will remove first item from the list.

33
00:02:34,620 --> 00:02:37,550
And I'm going to give you a little secret why I called it El.

34
00:02:37,560 --> 00:02:45,480
Is that actually want to instead of adding in the value into the list, I want to add in the element.

35
00:02:45,570 --> 00:02:48,720
So this will give us the ability to reference that element.

36
00:02:48,720 --> 00:02:52,910
And just as we saw, when we create an element, we can always access it.

37
00:02:53,160 --> 00:03:00,360
So instead of accessing the just the the value, the just the string value, now we have access to the

38
00:03:00,360 --> 00:03:00,930
elements.

39
00:03:01,050 --> 00:03:04,770
And you can see when I hover over them, I'm actually accessing the element.

40
00:03:04,770 --> 00:03:10,020
So the same thing is going to happen here when I execute it and when I tried to move it, that we're

41
00:03:10,020 --> 00:03:12,020
actually going to reference that first element.

42
00:03:12,240 --> 00:03:18,000
So that's going to also make it a whole lot easier to remove that element from the page as well, because

43
00:03:18,000 --> 00:03:24,150
now we've got the reference to that element directly and we don't have to include any values or any

44
00:03:24,150 --> 00:03:25,630
other ways to find it.

45
00:03:25,770 --> 00:03:32,340
This is the most direct way in order to remove it from that object so we can take the my function list

46
00:03:32,610 --> 00:03:35,160
and remove a child from it.

47
00:03:35,430 --> 00:03:40,560
And the child that we're going to be removing is going to be the element that we've shifted out of the

48
00:03:40,560 --> 00:03:40,830
array.

49
00:03:40,840 --> 00:03:45,380
So restoring all of these elements into the array as objects.

50
00:03:45,690 --> 00:03:50,710
And also if we want to get the element content, we can just call it item.

51
00:03:50,730 --> 00:03:53,750
So this will list out the value that we want to remove.

52
00:03:54,030 --> 00:04:00,070
We can use the text content value in order to retrieve back that item value.

53
00:04:00,660 --> 00:04:05,090
So this will tell us what we want to do, what command we want to run.

54
00:04:05,460 --> 00:04:08,700
So removing it from the page, let's add some in.

55
00:04:08,700 --> 00:04:15,090
And now I'm going to press enter and you see it gets removed and I get return back as item plus.

56
00:04:15,090 --> 00:04:15,540
Right.

57
00:04:15,540 --> 00:04:18,360
So it's getting that inner text content from the element.

58
00:04:18,480 --> 00:04:25,200
So let's fix that up a little bit using JavaScript replace so we can get rid of the plus side.

59
00:04:25,380 --> 00:04:27,960
And this is just going to be two double quotes.

60
00:04:28,350 --> 00:04:31,590
And what this will do is this will remove out the plus sign.

61
00:04:31,890 --> 00:04:33,210
So let's add them in again.

62
00:04:33,210 --> 00:04:38,940
Press enter and you can see that we're getting a nice clean string being returned back and this is the

63
00:04:38,940 --> 00:04:40,670
command that we want to move.

64
00:04:40,680 --> 00:04:48,690
So also, let's update the my block and we're going to update its inner HTML so we can say move and

65
00:04:48,690 --> 00:04:54,480
we'll enter in whatever direction we want to move so that the block will actually say which direction

66
00:04:54,480 --> 00:04:55,020
we're moving.

67
00:04:55,020 --> 00:04:59,550
And the next thing that we need to do is just check to see if it's.

68
00:04:59,960 --> 00:05:03,030
What the item value is and take the action accordingly.

69
00:05:03,470 --> 00:05:05,970
So we did use the bounding client rectangle.

70
00:05:06,410 --> 00:05:07,660
So let's do it this way.

71
00:05:07,820 --> 00:05:14,780
And of course, we could just simply go to the function so we could do left and we could run the function

72
00:05:14,780 --> 00:05:16,220
that's associated with it.

73
00:05:16,520 --> 00:05:21,290
But in this case, we're going to do it a little bit differently, where we're going to select my block

74
00:05:21,290 --> 00:05:28,520
object and we're going to update it style, update its left position, taking that current left value

75
00:05:28,520 --> 00:05:29,840
that we have within Curre.

76
00:05:30,050 --> 00:05:35,480
So we saw we get the client client bounding rectangle so we get a value for left and then taking its

77
00:05:35,480 --> 00:05:38,450
current with so subtracting the current width.

78
00:05:38,450 --> 00:05:43,460
And this is how we're going to know how much we want to move that item, that element, and then we

79
00:05:43,460 --> 00:05:47,390
can apply the rest of the conditions accordingly as well.

80
00:05:47,630 --> 00:05:51,200
So checking to see if the command was to move right.

81
00:05:51,470 --> 00:05:54,120
And if it is right, then we increment it by one.

82
00:05:54,290 --> 00:05:55,410
So not decreasing.

83
00:05:55,430 --> 00:05:59,170
And then the other two last commands were up and down, so up.

84
00:05:59,300 --> 00:06:01,550
We're moving the vertical position.

85
00:06:01,670 --> 00:06:05,690
So we're updating the current top value.

86
00:06:06,260 --> 00:06:07,470
And instead of what?

87
00:06:07,490 --> 00:06:09,390
Let's use height to be correct.

88
00:06:09,410 --> 00:06:15,360
And so right now, if it's going up, then we need to subtract and then also let's account for down.

89
00:06:15,800 --> 00:06:22,370
So if the command is to go down, then we're going to move it down and that's going to be increasing

90
00:06:22,370 --> 00:06:22,490
it.

91
00:06:22,520 --> 00:06:30,410
And then lastly, what we want to do is we want to use set time out in order to launch mover again and

92
00:06:30,410 --> 00:06:33,510
let's launch that in 300 milliseconds.

93
00:06:33,560 --> 00:06:34,070
Try that.

94
00:06:34,250 --> 00:06:38,480
So now let's enter in a bunch of commands, directions.

95
00:06:38,750 --> 00:06:45,110
And then when we've got them all in there that we want to use, we can then launch the sequence and

96
00:06:45,110 --> 00:06:50,930
have it run through and move it around so we can add them in again and then again, press enter or space.

97
00:06:51,170 --> 00:06:54,200
And you can see that we're launching that sequence.

98
00:06:57,210 --> 00:07:03,840
So now we've got added in the ability to launch a sequence of commands using JavaScript and track all

99
00:07:03,840 --> 00:07:06,090
of those values within an array.

100
00:07:06,420 --> 00:07:08,520
So go ahead and add this into your project.

101
00:07:08,760 --> 00:07:14,670
And coming up next, we're going to do some fixes and tweaks to this in order to make it a little bit

102
00:07:14,670 --> 00:07:15,800
more interesting as well.

103
00:07:15,810 --> 00:07:16,800
So it's coming up next.