All right, welcome to part two of the key press.
And this is where we introduce the challenge, so we saw in the last lesson that we can track the key
events using the key event listener, we can track on key down and all the different key presses and
outputting the content along when that element gets clicked.
So this challenge is to take the content that's being clicked and create a new element, adding an element
with whatever the key press is and you can add it.
You can create a brand new div and then append the div with the new content that's being pressed.
We're going to track the event key as well as the event key code.
And you can see example over here on the right hand side.
So pause the video, try this out and I'll walk you through the solution coming up.
So the objective here is to add to a particular element, all of the that get pressed, so we're going
to go ahead and we're going to add into an unordered list.
So we've got one unordered list, selecting that unordered list, using the document, and we only have
the one unordered list.
So this one is a really easy selection.
Select the unordered list and I'll refresh just to make sure that I've got that particular object.
So I do have it and I can create elements and append them as children.
So the next thing they need to do is listen for our event trigger.
So that's the key event.
So whenever the key down, whenever a key is pressed down on the document object, this is when we're
going to be invoking this function.
And within the function, we want to add a key price.
So let's create an element.
So this can be actually it's going to be a list item that we're going to be creating.
So document create elements and we're creating a list item.
And then also where text C also documents creates text node and we don't have the contents of that quite
yet.
So let's create some content for that.
And this is going to be the information that we're tracking.
So it could just hold it in a temporary holder and we want to take the event key plus the key code.
So it's going to wrap it with a rounded bracket and the event or the E key code.
So that's going to wrap it within that rounded bracket.
So that's going to give us our content for our text element.
And all we need to do is add temp in there.
So now every time the key gets pressed, we're going to add that.
So we need to attend a child to that.
And the child that we're spending is text C, and then we're also on the unordered list.
Were spending a child to that.
And the child that we're spending is the list item.
So how about we try this?
So every time we press any of the keys, you're going to see that it gets listed as list items.
So these are all the keys that I'm pressing.
And you see all of these are getting tracked as list items.
So even when I press things like the enter the enter gets tracked with its key name, which is enter
and then its key code, which is 13, and there's also space.
So some some systems will track space and some won't have anything for space.
And that's why we use the key code to be more efficient when we're tracking these different key events.
So coming up next, we've got some more mouse events that we're going to be tracking.
So mouse movement, and that's coming in the next lesson.