I always suggest that before you conclude your application, that you try it out and make sure you've
got all of the functionality that you're expecting.
So this is the application that we built out.
And we can click on the Arrow Keys and you can see that they all get registered and registered within
a sequence.
So they press either space or enter.
This element is going to run through the sequence and take the appropriate actions.
We also have an option.
If we've made a mistake here and we don't want something in our sequence, we can always remove it out
of the sequence.
So now let's try it out.
And you can see that as the sequence is running, I also have an option to continuously add in items
and this adds that into the array and it still makes them all functional where I can remove them out
as well as it simply just runs whatever the next one is that's available in the array until the RE finally
concludes.
And then that's where it stops and stops executing.
So we've got all the functionality that we set out to include.
So let's go through and run through the code that we've used in order to build the application.
Did this all in JavaScript because of course, the focus of this course and this section is JavaScript.
So we'll really want to focus on getting familiar with JavaScript, updating styles, creating elements.
And one of the first things that we did is so we've set up listening for Dom content loaded and then
we created an element.
And that's this box here that we are going to be using as our element that we're maneuvering in the
upcoming parts of the course.
And then we also apply a bunch of style properties to it.
So we add some text to it.
So there's some text by default inside of the box, as well as default positioning colors and a whole
bunch of really cool things.
So there was really here to highlight all the options that you have available to Earth and style, and
there are just as many as you would expect with success.
You can do it all in JavaScript, of course, if you want.
And then lastly, we append the newly freshly created element to the page.
And you can also go to inspect and you can see that when you inspect it, you've got all of the style
properties have been added to that element.
So they're all sitting there within the element and you can see all of the ones that were added.
We also created another element.
So this was the one where we could list out the functions that we want to run.
So we simply created that and appended that.
So there's just sitting as a blank div.
There's nothing inside of it yet.
And we do add in the visible part of the actions that are to be taken within this div.
Next, we set up the ability to listen for a key down.
So any key presses that are done within that document element body.
So anywhere within the document when it's open, let's click down.
We're listening for key presses.
If you're off, focus on that, then it's obviously not going to be listening for key presses because
it's only listening while you're active on the document.
We prevent the default action of the key and then we get the key code of the key.
So the key code is a number that's associated with every key from your keyboard.
And then we look to see which Key got pressed.
And specifically we're looking for the Arrow keys.
Or when Cius pressed see is the colors 67 are is a random movement that when we press.
So that's eighty two.
So you can see that the background color is changing and this is just a random color.
And this was a function that was introduced to show you how you can use math in order to generate a
random hex string.
And so we go through all the key combinations.
And then lastly, we're listening for space or enter, which start the moving process and start invoking
all of the pattern that we've set out for that element to move.
And this is the moving function where we've got it self-contained.
So we're getting that elements position.
We're taking it out of the array that we built.
So the fun list is the array with all the commands that have been added in.
We're getting the elements are the ones that actually get placed within the array.
So this is what we're removing and that's why we've got text content that we can pull back.
And then we've added in a function at the end where we've changed it in where we're replacing all the
plus signs, because as you can see, the elements going to contain the plus plus the command.
And we don't want the plus sign.
We want to remove it out.
So that's where we've got that replace plus there.
And then what we do is remove it from the visible part.
So once it gets executer, it's about to be executed.
We remove it from the visible part.
We update the entire text of the element to have move and then whatever direction was presented here
within that element.
Then we look to see what the contents are and we take the appropriate action.
So left, right, up or down, and then we move the element and adjust by just in the style properties.
So the left or the top position accordingly.
And we've got the original position within Curre.
So if we take the current left and we take our current with, then this will move at the full block
over.
So whatever the width of the element is, we're going to move at.
Over one set, we also have a condition, so if we've got time out, so this one will run mover again.
And while fun less length is greater than zero, it's going to run this block of code.
And when that runs out, then it's going to run this block of code and return the function.
We've got the timeout set to 300 milliseconds.
You can adjust that as needed.
So this is just the time between the movements so you can actually see the movements taking place.
Otherwise, if you didn't have this and you were just running mover, you wouldn't see anything.
It would just move pretty much instantly as it ran through the code.
So there would be no spacing.
We also have our add fun function.
So this is where depending on the key press, we're passing in a value and then we're using that value
and we're creating an element to span and then we're updating the inner text with the value that was
passed.
And we're also adjusting some of the styling to the element.
And then we're added in a few of our listeners.
So we've got a mouse over and a mouse out.
So that creates that hover effect.
Whenever we're over it, the background goes red in the Texaco's white and whenever we leave it, then
our background goes white and the text color goes black.
So it goes back to what the original default color was.
We also have our that listener.
So we're listening for a click on each one of these elements, each one of these spans.
So if it does get click, then we look for its index value within that array and we return back to the
index value in the console so you can see what index value was being presented in the array.
And then we take that index value and we splice that out of the array, returning back the item, the
element that we're removing out.
So that's within the temporal moves.
So we see it there.
And then lastly, we're taking my functionalist and doing a remove child on this.
And this is that current element.
So it could be it's the same as the Tempur move as well as it's the same as the spane.
So you could use either one of those in order to remove it and select it from the my functionalist.
And they're all going to work the same way because they're all referencing that same element on the
page.
Then lastly, what we're doing is we're appending the spane to the functionalist.
So that's adding it, making it visible on the screen.
And then we're adding it into the fun list and we're adding in that element that we created.
So that's being referenced by spane.
And so every time we update and we have any key presses, you can see that it's updating the the list
array with all of the spans that are present on the page.
And as you hover over them within Chrome, you're going to see that the light out light up because they're
referencing those elements that are visible on the page.
We also earlier we had another option to make the movement where we had to go left, go right, go up
and go down.
So from here, what we were using is the my block and we were getting the offset left or the offset
top and doing the same thing as we're doing over here where we're updating its position, whereas here
we're updating the style with the current top and current height and down here we're updating it and
always subtracting 50.
So the movement was slightly different in this case, but the fact is the same thing.
So we still always have that option that we can go into our console and we can go right.
And you can see that's going to move right 15.
So there's a number of different ways to make the adjustment.
And at the end of the day, you're doing the same thing.
You're updating that element style properties and that's repositioning it and making it move on the
screen.
So you have a number of different ways that you can make the movement where you can use go right, go
left, or you could execute the sequence of commands and that's going to execute those.
So you had an opportunity to try the code out.
And I do suggest that you try it out within your own editor if you have any questions or comments.
I'm always happy to help clarify any of the content that's been presented in the course.
And the objective really has been to practice and get more familiar javascript and updating and manipulating
elements within the dawn.
Thanks again for taking the course.