1
00:00:00,270 --> 00:00:06,510
So I know it usually seems like it's all mouse events, click events, but there are keyboard events

2
00:00:06,510 --> 00:00:11,640
as well that you can listen to and typically these are listened on all of the document.

3
00:00:11,790 --> 00:00:18,510
But you can also listen to them individually on elements such as input fields as well as elements when

4
00:00:18,510 --> 00:00:23,190
they are in focus that the user is clicking their keyboard.

5
00:00:23,520 --> 00:00:25,730
So there are ways to track these events.

6
00:00:25,750 --> 00:00:28,620
So there's a key down and a key up event listener.

7
00:00:28,800 --> 00:00:32,900
There's an example of it here where we can track all of the key process.

8
00:00:33,150 --> 00:00:37,770
So first we create an object called keys with arrow up, arrow down.

9
00:00:37,770 --> 00:00:40,080
So all the key names set to false.

10
00:00:40,200 --> 00:00:45,660
And then whenever the key is pressed, then we change those to true and we can output all of the keys.

11
00:00:45,900 --> 00:00:48,830
This is one way how you can track keyboard events.

12
00:00:49,200 --> 00:00:54,040
They have some examples here, of course, and more information about it.

13
00:00:54,390 --> 00:00:58,740
So basically what we're doing is we're listening for the key down event.

14
00:00:58,920 --> 00:01:06,120
And if the key down is it checks to see if it's a certain key code and if it is that key code, then

15
00:01:06,120 --> 00:01:07,170
it runs some code.

16
00:01:07,320 --> 00:01:09,300
Otherwise it does this.

17
00:01:09,420 --> 00:01:11,580
So in this case, it's actually returning the function.

18
00:01:11,730 --> 00:01:16,530
So if it is any one of these values, then it simply returns it back.

19
00:01:16,530 --> 00:01:18,400
Otherwise it's going to run some code.

20
00:01:18,420 --> 00:01:21,870
So we also have another example here where we're adding event listener.

21
00:01:21,870 --> 00:01:23,190
So log key.

22
00:01:23,370 --> 00:01:31,140
And what it's doing is it's logging the key information out into the element that has the idea of log.

23
00:01:31,380 --> 00:01:33,510
So this is also a very useful example.

24
00:01:33,660 --> 00:01:36,140
And the other example, of course, is the opposite.

25
00:01:36,150 --> 00:01:41,810
So that's key down and this is key up and this occurs when the key is released.

26
00:01:42,030 --> 00:01:47,040
So when somebody is releasing their key, then it's going to track this.

27
00:01:47,190 --> 00:01:52,140
And that's why it's ideal within this type of situation where we're tracking key presses.

28
00:01:52,320 --> 00:01:58,830
So we know that once the key has been let off, then we know that the Keys object will change and reflect

29
00:01:58,830 --> 00:02:01,770
those changes for the user within their key changes.

30
00:02:02,040 --> 00:02:10,410
So we can add these key presses to specific elements like inputs detecting if an input field is key

31
00:02:10,500 --> 00:02:10,980
down.

32
00:02:11,220 --> 00:02:13,860
And if it is, then we can do something with it.

33
00:02:14,010 --> 00:02:20,220
We can check the length of the content within the value so we can change the background color to read

34
00:02:20,490 --> 00:02:24,450
if it's over five characters, otherwise it will be white.

35
00:02:24,690 --> 00:02:30,750
We can also listen for key code 13 and I'll show you a little bit more about key codes and how they

36
00:02:30,750 --> 00:02:32,940
reflect to the different key values.

37
00:02:33,190 --> 00:02:35,100
So 13, I believe, is the enter key.

38
00:02:35,340 --> 00:02:42,840
So if it's enter key and the element value length is greater than one, then we're going to update the

39
00:02:42,840 --> 00:02:48,350
color to yellow of that unordered list, that element that's been selected.

40
00:02:48,900 --> 00:02:54,030
So let's open up the editor and we're going to try some of these examples, set it up so we'll set up

41
00:02:54,030 --> 00:02:58,010
our keys object and this will track all of the key process.

42
00:02:58,020 --> 00:03:01,590
So we've got we don't actually have to have anything in here.

43
00:03:01,710 --> 00:03:03,510
This could just be a blank object.

44
00:03:03,660 --> 00:03:07,260
And then on the document, we're adding an event listener.

45
00:03:07,560 --> 00:03:10,350
And the event that we're listening for is key down.

46
00:03:10,350 --> 00:03:18,030
And whatever the key is pressed, we can say press key on function and we'll set those functions up

47
00:03:18,030 --> 00:03:18,660
afterwards.

48
00:03:18,870 --> 00:03:20,180
So key up.

49
00:03:20,190 --> 00:03:22,190
So this is when the key is released.

50
00:03:22,620 --> 00:03:25,490
So basically it's off and creating those functions.

51
00:03:25,500 --> 00:03:31,620
So we've got press key on function and it's taking that event information.

52
00:03:31,800 --> 00:03:36,480
So taking the event object and will console log out that event object.

53
00:03:36,750 --> 00:03:40,830
And the particular value that we're after is the key event.

54
00:03:40,830 --> 00:03:46,320
And I'm also going to do one for the key off so that we can try this and I'll show you a little bit

55
00:03:46,320 --> 00:03:46,850
more about it.

56
00:03:47,310 --> 00:03:54,660
So now when we refresh and if I press any of the keys, I see I have a keyboard event and within this

57
00:03:54,660 --> 00:03:57,780
event object, I can determine what key was pressed.

58
00:03:57,990 --> 00:03:59,910
So I've got a key that was pressed.

59
00:03:59,910 --> 00:04:00,960
So that's the key.

60
00:04:01,170 --> 00:04:07,650
But to be more accurate, the key code is the one that you can use as well as you can track.

61
00:04:08,630 --> 00:04:15,380
The different types, as well as which which gives you also a number of value that relates to what was

62
00:04:15,380 --> 00:04:16,600
pressed on the keyboard.

63
00:04:16,910 --> 00:04:22,120
So we've got all of this information that we can use and which and key code are usually the same.

64
00:04:22,580 --> 00:04:26,960
And although most of the time you're going to see which being used, you can use key code as well.

65
00:04:27,170 --> 00:04:33,980
And then you can see that it's key down so we can track all of the keys that are being pressed at any

66
00:04:33,980 --> 00:04:41,750
given time by taking in the event key value, which will give us exactly the key that was pressed on

67
00:04:41,750 --> 00:04:42,350
the keyboard.

68
00:04:42,560 --> 00:04:44,620
And then this will give us the key that was released.

69
00:04:45,050 --> 00:04:49,680
So now if I type some letters, I can see the letters being output into the console.

70
00:04:49,970 --> 00:04:53,350
There's also the event prevent default.

71
00:04:53,840 --> 00:05:00,440
So what this does is this is a method in JavaScript that prevents default action on particular elements

72
00:05:00,440 --> 00:05:05,180
that might already have or events that already have some type of action associated with it.

73
00:05:05,570 --> 00:05:09,580
So in this case, we want to prevent the default because we don't actually need the key.

74
00:05:09,770 --> 00:05:12,260
We're not tracking anything within an input field.

75
00:05:12,410 --> 00:05:14,770
So we're preventing the default action of that.

76
00:05:15,110 --> 00:05:19,610
So it's always a good idea to remove it, although most of the time it's fine.

77
00:05:19,610 --> 00:05:21,200
It will run without removing it.

78
00:05:21,380 --> 00:05:27,530
And then now within the Keys object, we're going to take our event key and we'll just set those to

79
00:05:27,530 --> 00:05:27,980
true.

80
00:05:28,280 --> 00:05:31,290
And then when it gets released, we can set it to false.

81
00:05:31,610 --> 00:05:39,950
So at this way, any time we look at the keys object in the console and I'm going to get rid of these

82
00:05:39,950 --> 00:05:41,580
ones because we don't need to track it anymore.

83
00:05:41,600 --> 00:05:46,010
So any time we can look at that, you can see which keys are being pressed.

84
00:05:46,310 --> 00:05:49,070
So you can see that now I'm holding down more than one key.

85
00:05:49,070 --> 00:05:51,920
All the keys that I'm holding down are being shown.

86
00:05:52,100 --> 00:05:54,530
And as I release them, they go to force.

87
00:05:54,860 --> 00:05:58,610
This is a quick way to track the keys that are being interacted with and pressed.

88
00:05:58,820 --> 00:06:02,840
There's also adding event listeners to particular inputs.

89
00:06:03,470 --> 00:06:03,730
So.

90
00:06:03,730 --> 00:06:06,650
So you had to do that to accommodate all of this blockquote out.

91
00:06:06,650 --> 00:06:10,300
So it's not interfering with our new code and I'll refresh that to clear it.

92
00:06:10,580 --> 00:06:12,790
So ready to have an input on the page.

93
00:06:12,830 --> 00:06:15,230
That's the input that's down here at the bottom.

94
00:06:15,230 --> 00:06:16,370
So you can barely see it.

95
00:06:16,370 --> 00:06:17,950
But it's tiny little input there.

96
00:06:18,200 --> 00:06:24,590
So if we want it to track what's happening within that element, within the input element, we can track

97
00:06:24,590 --> 00:06:25,390
that as well.

98
00:06:25,760 --> 00:06:29,250
So taking context and this will be the element that we're going to be using.

99
00:06:29,480 --> 00:06:36,560
So using the document and query select and now I always use query selector, but it is my favorite one

100
00:06:36,560 --> 00:06:37,040
to use.

101
00:06:37,460 --> 00:06:42,110
We're going to be tracking the input element and if you add more than one input element, you can go

102
00:06:42,110 --> 00:06:45,110
by its name if you wanted to, so you can bracket the name.

103
00:06:45,290 --> 00:06:47,000
But in this case, I only have just the one.

104
00:06:47,210 --> 00:06:47,830
So that's fine.

105
00:06:47,840 --> 00:06:48,650
We're going to add that.

106
00:06:49,160 --> 00:06:54,170
And then on the elements, we're going to add an event listener and this event listener is going to

107
00:06:54,170 --> 00:06:55,700
be listening for key press.

108
00:06:55,910 --> 00:06:59,890
And when the key gets pressed, we're going to fire off at item function.

109
00:07:00,680 --> 00:07:02,360
Let's set up an item.

110
00:07:02,720 --> 00:07:07,610
And if you're wondering how we pass in the event object, you're going to see that the event object

111
00:07:07,610 --> 00:07:08,950
is going to get passed in.

112
00:07:09,170 --> 00:07:12,900
So all we have to do is add it in as a parameter within the function.

113
00:07:13,040 --> 00:07:20,120
So now whenever I press the keyboard, you see that it triggers this add item so we can get the element

114
00:07:20,120 --> 00:07:21,320
value as well.

115
00:07:21,590 --> 00:07:27,650
So there was a we also saw that there's a number of ways to get that and we can also use L as well.

116
00:07:27,650 --> 00:07:32,360
So that was one that we didn't see and L value will return back the element value.

117
00:07:32,510 --> 00:07:37,730
Or we could use this, but depending maybe we want to add this function to other elements that might

118
00:07:37,730 --> 00:07:39,550
not be the one that's invoking the function.

119
00:07:39,920 --> 00:07:42,620
So there's always a different way to do that.

120
00:07:42,860 --> 00:07:44,600
So let's take the value.

121
00:07:44,900 --> 00:07:51,710
And if you wanted to set up the value of any of the elements, the document query selector, select

122
00:07:51,710 --> 00:07:59,330
the each one and we'll update its text content with whatever the content of the element is the element

123
00:07:59,330 --> 00:07:59,680
value.

124
00:08:00,020 --> 00:08:02,300
So you can see that's going to be a really neat effect.

125
00:08:02,510 --> 00:08:08,240
When I refresh anything I type into this input field is going to show within the H1.

126
00:08:08,510 --> 00:08:12,940
So let's check to see the element value length.

127
00:08:12,950 --> 00:08:20,990
And if this condition is if element value length is greater than five, we're going to update that element

128
00:08:21,290 --> 00:08:24,830
style background color and let's set it to red.

129
00:08:24,840 --> 00:08:27,800
So I don't want it to go over five and otherwise.

130
00:08:27,830 --> 00:08:30,170
So if it's not over five, then we're good.

131
00:08:30,200 --> 00:08:31,430
We'll set it back to white.

132
00:08:31,940 --> 00:08:35,750
So this will give us an option to kind of always have it at white.

133
00:08:35,750 --> 00:08:40,830
And then when we do go over the set amount, we can set it to red.

134
00:08:41,480 --> 00:08:42,710
So let's start typing.

135
00:08:42,710 --> 00:08:45,880
And as soon as we go over five characters, it goes red.

136
00:08:45,890 --> 00:08:47,210
So that's one way to track that.

137
00:08:47,750 --> 00:08:50,080
And there's also one other thing that we did want to cover.

138
00:08:50,090 --> 00:08:57,320
So if we're listening for the event code and if we're listening for 13, so that means that that's the

139
00:08:57,320 --> 00:09:00,650
enter key that's been pressed on that input.

140
00:09:00,890 --> 00:09:06,950
And then we could take that element value length and make sure that it's at least that there's some

141
00:09:06,950 --> 00:09:07,970
content there over.

142
00:09:08,280 --> 00:09:11,870
And if it is, then we can take the elements.

143
00:09:12,780 --> 00:09:21,300
Or how about we pick each one again and we'll update its style, background, color, and we'll set

144
00:09:21,300 --> 00:09:22,940
the background color to yellow.

145
00:09:23,190 --> 00:09:25,170
So we're typing in some content.

146
00:09:25,530 --> 00:09:29,480
And then I press the turkey and you see that the background color goes to yellow.

147
00:09:29,760 --> 00:09:31,560
So that's how we can affect the different colors.

148
00:09:31,680 --> 00:09:34,500
So there is a challenge for this lesson and words.

149
00:09:34,530 --> 00:09:36,210
That's coming up in the next video.