This lesson, we're going to update some of the properties of that object that we created and update
its positioning top and left position using functions.
Let's refresh, make it bigger.
And when we output the my block element, we can see that we've got that my block element.
And if we want to get its left position, we can use offset left whatsoever, turn its left position,
and as well we can use offset top to get its position off of the top.
And remember, we did set these within the variables here.
We've got the top of 100 and we've got the left of 150.
So that means that we can use this.
And if we create a function that says go left, we can update the position of our elements.
So selecting we'll create a temporary position value where we're going to use the my block element and
then use offset left to get its left position, then taking that value.
We can update that value of temp and we can equal temp plus temp and add 50 to it.
And then lastly, let's update my block and we'll take its star position, its left position, and equal
it to whatever temp.
And don't forget the picks, because this is expecting a string value.
So now when we refresh and if I type in a function and we say go left, you can see that it goes to
the left and we could do the same thing to go to the right, and we can also do up and down.
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.
So the same thing that we did to go left we can do to go to right.
And it's almost very similar if we go up where we're getting the offset top position and going up.
So we're subtracting and we're just updating its top position and then going down.
It's going to be the opposite of going up, of course.
So going down, we're going to add 50 and the rest is going to be the same.
So now we've got a series of functions where we can actually maneuver our elements.
So if we want to go up, we can go up.
We can move this element to the right by invoking the function goal.
Right.
Actually, that one went left so that one subtracted.
And I just got to reverse this.
So let's try that one more time.
So go.
We've got great function and makes a go rates.
We also have a goal left function, makes it go left.
We have go up function which is going to move it up.
And then lastly, we have the last option, which was go down and invoking that function, move cell
event down.
Go ahead and try this out, add that into your code and have some fun with it.
Move it around, try out some of the different functions.
And coming up next, extend on this and build this application to listen to keyboard clicks and then
there run the functions accordingly.
So that's still all to come in the upcoming lessons.