1
00:00:01,530 --> 00:00:04,410
All right, welcome to part two of the key press.

2
00:00:05,780 --> 00:00:11,180
And this is where we introduce the challenge, so we saw in the last lesson that we can track the key

3
00:00:11,180 --> 00:00:17,150
events using the key event listener, we can track on key down and all the different key presses and

4
00:00:17,150 --> 00:00:21,020
outputting the content along when that element gets clicked.

5
00:00:21,770 --> 00:00:30,800
So this challenge is to take the content that's being clicked and create a new element, adding an element

6
00:00:31,100 --> 00:00:34,160
with whatever the key press is and you can add it.

7
00:00:34,160 --> 00:00:39,260
You can create a brand new div and then append the div with the new content that's being pressed.

8
00:00:40,220 --> 00:00:45,140
We're going to track the event key as well as the event key code.

9
00:00:45,260 --> 00:00:48,230
And you can see example over here on the right hand side.

10
00:00:49,510 --> 00:00:53,860
So pause the video, try this out and I'll walk you through the solution coming up.

11
00:00:55,040 --> 00:01:02,060
So the objective here is to add to a particular element, all of the that get pressed, so we're going

12
00:01:02,060 --> 00:01:04,970
to go ahead and we're going to add into an unordered list.

13
00:01:05,150 --> 00:01:12,290
So we've got one unordered list, selecting that unordered list, using the document, and we only have

14
00:01:12,290 --> 00:01:13,330
the one unordered list.

15
00:01:13,340 --> 00:01:15,560
So this one is a really easy selection.

16
00:01:16,250 --> 00:01:22,250
Select the unordered list and I'll refresh just to make sure that I've got that particular object.

17
00:01:22,520 --> 00:01:26,830
So I do have it and I can create elements and append them as children.

18
00:01:27,110 --> 00:01:30,970
So the next thing they need to do is listen for our event trigger.

19
00:01:30,980 --> 00:01:32,360
So that's the key event.

20
00:01:32,720 --> 00:01:38,960
So whenever the key down, whenever a key is pressed down on the document object, this is when we're

21
00:01:38,960 --> 00:01:40,850
going to be invoking this function.

22
00:01:41,150 --> 00:01:45,440
And within the function, we want to add a key price.

23
00:01:46,010 --> 00:01:48,170
So let's create an element.

24
00:01:48,470 --> 00:01:51,740
So this can be actually it's going to be a list item that we're going to be creating.

25
00:01:51,980 --> 00:01:56,390
So document create elements and we're creating a list item.

26
00:01:56,720 --> 00:02:04,460
And then also where text C also documents creates text node and we don't have the contents of that quite

27
00:02:04,460 --> 00:02:04,700
yet.

28
00:02:05,210 --> 00:02:07,120
So let's create some content for that.

29
00:02:07,520 --> 00:02:10,280
And this is going to be the information that we're tracking.

30
00:02:10,280 --> 00:02:17,270
So it could just hold it in a temporary holder and we want to take the event key plus the key code.

31
00:02:17,300 --> 00:02:22,000
So it's going to wrap it with a rounded bracket and the event or the E key code.

32
00:02:22,040 --> 00:02:24,440
So that's going to wrap it within that rounded bracket.

33
00:02:24,620 --> 00:02:27,500
So that's going to give us our content for our text element.

34
00:02:27,500 --> 00:02:29,870
And all we need to do is add temp in there.

35
00:02:30,020 --> 00:02:33,620
So now every time the key gets pressed, we're going to add that.

36
00:02:33,620 --> 00:02:36,320
So we need to attend a child to that.

37
00:02:36,590 --> 00:02:42,560
And the child that we're spending is text C, and then we're also on the unordered list.

38
00:02:42,560 --> 00:02:44,180
Were spending a child to that.

39
00:02:44,300 --> 00:02:46,830
And the child that we're spending is the list item.

40
00:02:46,880 --> 00:02:47,930
So how about we try this?

41
00:02:47,930 --> 00:02:54,050
So every time we press any of the keys, you're going to see that it gets listed as list items.

42
00:02:54,290 --> 00:02:55,940
So these are all the keys that I'm pressing.

43
00:02:56,090 --> 00:02:59,510
And you see all of these are getting tracked as list items.

44
00:03:00,110 --> 00:03:06,860
So even when I press things like the enter the enter gets tracked with its key name, which is enter

45
00:03:06,980 --> 00:03:10,220
and then its key code, which is 13, and there's also space.

46
00:03:10,470 --> 00:03:15,890
So some some systems will track space and some won't have anything for space.

47
00:03:16,040 --> 00:03:21,020
And that's why we use the key code to be more efficient when we're tracking these different key events.

48
00:03:21,320 --> 00:03:25,250
So coming up next, we've got some more mouse events that we're going to be tracking.

49
00:03:25,250 --> 00:03:28,070
So mouse movement, and that's coming in the next lesson.