1
00:00:00,180 --> 00:00:05,550
In the previous lesson, we set up functions in order to run blocks of code, and these blocks of code

2
00:00:05,730 --> 00:00:08,260
will have the element that we have on the page.

3
00:00:08,460 --> 00:00:11,910
So the next set we want to do in this project is add keyboard events.

4
00:00:12,150 --> 00:00:18,540
So listing on the document object, let's set that up where we've got our document and adding an event

5
00:00:18,540 --> 00:00:19,040
listener.

6
00:00:19,290 --> 00:00:24,090
So anywhere that the document is clicked, we're going to be listening for the keyboard event.

7
00:00:24,270 --> 00:00:28,720
And you can also specify keyboard events on particular elements as well.

8
00:00:29,340 --> 00:00:36,000
So whenever the key down is clicked, then we're going to invoke this anonymous function and for now,

9
00:00:36,330 --> 00:00:40,040
we'll log out and pass in the event object.

10
00:00:40,410 --> 00:00:46,560
So clicking the keys, you get the keyboard event and we see the event object is being passed and there's

11
00:00:46,560 --> 00:00:51,700
a bunch of information contained within each object and including the key code.

12
00:00:51,720 --> 00:00:55,090
So this is the one that we're looking for and we're going to listen for the different key codes.

13
00:00:55,470 --> 00:01:00,260
We also want to have a function that prevents any of the default actions.

14
00:01:00,510 --> 00:01:05,070
So for a keyboard clicks, there's a default action associated with it.

15
00:01:05,220 --> 00:01:09,450
And if we do a prevent default, that will null that default action.

16
00:01:09,660 --> 00:01:13,590
And in this case, really, we don't see anything happening with the keys being pressed.

17
00:01:13,860 --> 00:01:18,470
But it is always a good idea to include that in case you want to have that running in your code.

18
00:01:18,690 --> 00:01:25,290
So we're listening for the key down anywhere on the document object and we're tracking the key code

19
00:01:25,290 --> 00:01:25,890
values.

20
00:01:26,100 --> 00:01:32,310
So if we want to just get the key code and this is an object, just like the elements, we can get the

21
00:01:32,310 --> 00:01:33,480
exact key code.

22
00:01:33,750 --> 00:01:40,410
So now clicking you can see that these clicks are responding to key codes for retrieving back the key

23
00:01:40,410 --> 00:01:40,770
codes.

24
00:01:41,010 --> 00:01:43,390
And this is the right area.

25
00:01:43,590 --> 00:01:44,370
This is down.

26
00:01:44,520 --> 00:01:45,300
This is left.

27
00:01:45,300 --> 00:01:46,050
And this is up.

28
00:01:46,320 --> 00:01:48,930
So we've got various numbers that are coming back.

29
00:01:48,940 --> 00:01:51,680
So 37, 38, 39 and 40.

30
00:01:52,140 --> 00:01:56,790
So next to that we want to do is we want to check whatever the key code value is.

31
00:01:56,940 --> 00:02:02,010
And we can also put the key code in an object so that we can track it.

32
00:02:02,490 --> 00:02:08,700
We can call it key C, and this is where we're going to get that key code value and then we can check

33
00:02:09,030 --> 00:02:11,970
if whatever the value of key is.

34
00:02:12,450 --> 00:02:18,200
And if Keesey is 37, then this means that we need to move left.

35
00:02:18,540 --> 00:02:21,740
So we want to run the function of goal left.

36
00:02:22,050 --> 00:02:29,570
So add that in and then we can use Elif and check to see if the other key values are present.

37
00:02:29,610 --> 00:02:36,270
So checking to see if thirty nine is available and thirty nine is the right key.

38
00:02:36,810 --> 00:02:42,390
And then we're going to invoke the function go rate and then also accounting for the up and down.

39
00:02:43,230 --> 00:02:48,510
So the up key is thirty eight and these are the arrow keys on your keyboard.

40
00:02:48,520 --> 00:02:50,090
So up is 38.

41
00:02:50,130 --> 00:02:52,310
So it's attached the right function for that.

42
00:02:52,620 --> 00:02:57,600
So go up and go down and let's see what happens.

43
00:02:57,630 --> 00:03:04,080
So refresh opened this up bigger, so you press the keys and you're going to see the key code showing

44
00:03:04,080 --> 00:03:04,940
up in the console.

45
00:03:05,250 --> 00:03:11,400
So if I go right, you can see that the key code shows up down here at the bottom and the element moves

46
00:03:11,400 --> 00:03:11,940
to the right.

47
00:03:12,480 --> 00:03:14,070
We also can move down.

48
00:03:14,080 --> 00:03:16,920
So it shows up as 40 also to the left.

49
00:03:16,920 --> 00:03:21,990
And so it doesn't matter how many times you press the key code, it runs that block of code.

50
00:03:21,990 --> 00:03:25,530
So it executes that function that's associated with it.

51
00:03:25,690 --> 00:03:30,540
And now we've associated the key process with the various functions that we created in the previous

52
00:03:30,540 --> 00:03:30,930
lesson.

53
00:03:32,010 --> 00:03:38,400
So go ahead and add this into your project, and coming up, we're going to add some more interaction

54
00:03:38,430 --> 00:03:45,480
with the keyboard, changing the element color later on in the lessons we're going to extend on the

55
00:03:45,480 --> 00:03:47,650
functionality of this application.

56
00:03:48,180 --> 00:03:50,030
So that is all still yet to come.