Last lesson we added in the ability to create a list of commands that we want to run.
So now we want to be able to have an option to execute them.
So we're going to listen for key process.
And the two key processes that we're listening for is going to be for either the enter, which is 13,
or if the key code is equal to 32, then that's the space.
And we want to then execute a function and the function that we want to execute is mover.
So we're executing a move or function.
And then this is going to run through all of the different commands that we've got listed here.
So adding those in and it's going to run through and it's going to execute those commands.
So it's set up that function.
And we don't need to pass anything into this function because we're using the global objects that contain
the information in order for us to create the movement.
So what we want to do is first we're going to check to see if formalised because this is an array.
So it's going to have a length if the fullest length is larger than zero.
And if it is, then we are ready to move.
So we want to get our current position of the bounding client rectangle and we can do that.
So we were getting it with offset here.
And there's actually another way to get the current position so we can use the my block object and using
get bounding client rectangle.
This will give us the current coordinates of that element.
So let's let's output that first so you can see what that looks like and then as we run through.
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
rectangle.
So this is giving us the position of where that element is currently located.
So we can as well obviously use the functions that create the movement.
But we're going to fine tune this a little bit.
So we're actually not going to be using the functions and we're going to be doing the movement here
within this one mover function now that we got the client bounding rectangle.
And this is also to illustrate that we can create this type of effect in a number of different ways.
So let's grab our current element or the movement command, whatever we want to call it, and using
function shift.
So what shift will do is it will remove first item from the list.
And I'm going to give you a little secret why I called it El.
Is that actually want to instead of adding in the value into the list, I want to add in the element.
So this will give us the ability to reference that element.
And just as we saw, when we create an element, we can always access it.
So instead of accessing the just the the value, the just the string value, now we have access to the
elements.
And you can see when I hover over them, I'm actually accessing the element.
So the same thing is going to happen here when I execute it and when I tried to move it, that we're
actually going to reference that first element.
So that's going to also make it a whole lot easier to remove that element from the page as well, because
now we've got the reference to that element directly and we don't have to include any values or any
other ways to find it.
This is the most direct way in order to remove it from that object so we can take the my function list
and remove a child from it.
And the child that we're going to be removing is going to be the element that we've shifted out of the
array.
So restoring all of these elements into the array as objects.
And also if we want to get the element content, we can just call it item.
So this will list out the value that we want to remove.
We can use the text content value in order to retrieve back that item value.
So this will tell us what we want to do, what command we want to run.
So removing it from the page, let's add some in.
And now I'm going to press enter and you see it gets removed and I get return back as item plus.
Right.
So it's getting that inner text content from the element.
So let's fix that up a little bit using JavaScript replace so we can get rid of the plus side.
And this is just going to be two double quotes.
And what this will do is this will remove out the plus sign.
So let's add them in again.
Press enter and you can see that we're getting a nice clean string being returned back and this is the
command that we want to move.
So also, let's update the my block and we're going to update its inner HTML so we can say move and
we'll enter in whatever direction we want to move so that the block will actually say which direction
we're moving.
And the next thing that we need to do is just check to see if it's.
What the item value is and take the action accordingly.
So we did use the bounding client rectangle.
So let's do it this way.
And of course, we could just simply go to the function so we could do left and we could run the function
that's associated with it.
But in this case, we're going to do it a little bit differently, where we're going to select my block
object and we're going to update it style, update its left position, taking that current left value
that we have within Curre.
So we saw we get the client client bounding rectangle so we get a value for left and then taking its
current with so subtracting the current width.
And this is how we're going to know how much we want to move that item, that element, and then we
can apply the rest of the conditions accordingly as well.
So checking to see if the command was to move right.
And if it is right, then we increment it by one.
So not decreasing.
And then the other two last commands were up and down, so up.
We're moving the vertical position.
So we're updating the current top value.
And instead of what?
Let's use height to be correct.
And so right now, if it's going up, then we need to subtract and then also let's account for down.
So if the command is to go down, then we're going to move it down and that's going to be increasing
it.
And then lastly, what we want to do is we want to use set time out in order to launch mover again and
let's launch that in 300 milliseconds.
Try that.
So now let's enter in a bunch of commands, directions.
And then when we've got them all in there that we want to use, we can then launch the sequence and
have it run through and move it around so we can add them in again and then again, press enter or space.
And you can see that we're launching that sequence.
So now we've got added in the ability to launch a sequence of commands using JavaScript and track all
of those values within an array.
So go ahead and add this into your project.
And coming up next, we're going to do some fixes and tweaks to this in order to make it a little bit
more interesting as well.
So it's coming up next.