This lesson, we're going to be building out a list of commands so that when you press the key codes,
it's not going to move immediately and we can run all of the commands afterwards.
So we see in our current example, as we press the Arrow Keys element moves around the page accordingly
to whatever, OK, we've pressed.
So we want to add in the ability to create a list of commands.
So let's create that.
And this can be called my function list.
And right now this is a blank global object, just like the my block.
We're going to create an element in order to house and so that we can visibly see all of those commands.
So within the my function list, just as we did with the my block using document create element and
the element that we're creating is going to be a div and we're simply going to be appending it the same
thing that we did with the my block where we're spending it to the document body, and that's going
to give us a container in order to deposit the commands.
And the way that we want to do this is we want to have a list of commands and we're also going to create
a global array that we can add all of the commands in.
So the rain will be called fun list.
So the idea is that every time one of these keys is pressed, we're going to send that information over
to a function.
And the function that we need to create is going to be called add fun.
And what this is going to do is this is going to add that function information into the array as well
as sort visibly.
And then when we press the arrow, the space or the enter key, then we're going to run all of the commands.
So we'll be able to build out a list of the directions that this element is going to move and then run
that.
So we'll see that we can invoked all of the different functions and run them sequentially.
So instead of going left, we're going to send this information over to fun and we're going to just
send in the information left.
We're going to do the same thing for rights and up and down.
So all of them are going to get the information now being passed into the array as well as storing it
to be added in and run at a later point, passing in all of these values into the ad.
And the first thing that we want to do is take a fun list and we're going to push whatever the value
is into the array and we'll consult log that information out.
So console log out the value of fun list.
So now whenever I press any of the arrow keys, you can see that they're being added into the arrays.
So that's the fun mystery there.
We also can remove out the tracking of the key codes in the console because we don't need that at the
moment.
So next to that we want to do is we want to output it visually so already create a container to do that.
And that's going to be the my function list element on the page.
And we want to add this visually to that element.
So we're pushing it into the array and let's create a span.
So using document, create element, creating a span element and we're going to attach some text into
it.
So it'll be spane adding in some text content into that.
And what we'll do is we'll just add in whatever the value of Val is.
We can also apply some styling, adding in padding to that.
So do 10 picks of padding for each one of those span elements.
Also a border so that we can distinguish the different ones.
So one pick solid and we'll make it a really light color border.
And then now we're ready to add it onto the page so that it's visible.
So using append child method, append the spane object to the page so that when I press the keys, you
see that where they're showing up on the screen.
And we also have a list of all of the different directions that we want to move within that array,
the fun list array.
So we see them visually and we also see them within the array.
Also, I want it to add in the ability to hover over these elements and will update the styling as we
hover over.
So this is can be done with an event listener and adding in the mouse over event, we're going to invoke
a function and this function is going to run and it's going to update the current object or the span.
So either one will point to the same object and update the background color and turn the background
color.
How about we make it red and then also this style color and we'll set that to be white.
So we'll see what happens now.
And now I need to enter in a bunch of these whenever I hover over them, you see that they go red.
And we also want to add one more event listener for most out so that we can remove the styling that
we set up and reset it back to the way that it was.
So adding and a background color of white and updating the text to be black.
So let's add that in now.
And you can see that now whenever I hover over them, we've got this hover effect.
That you can do with success as well as you can do it with JavaScript and we're listing out all of the
different directions that we want to move.
So that's that we want to add in and this is coming up in.
The next lesson is the ability to run through these functions and run them as commands.
So have that element moving.
So it would go whenever we're ready, we go right down, right down, right down and have that element
run the sequence.
So that's coming up in the next lesson.
So go ahead and add this into your project, the ability to see which arrows have been pressed, displayed
on the screen and also add in that mouse over and mouse out of AFACT.