1
00:00:00,240 --> 00:00:06,150
This lesson, we're going to be building out a list of commands so that when you press the key codes,

2
00:00:06,150 --> 00:00:10,980
it's not going to move immediately and we can run all of the commands afterwards.

3
00:00:11,310 --> 00:00:17,700
So we see in our current example, as we press the Arrow Keys element moves around the page accordingly

4
00:00:17,700 --> 00:00:19,640
to whatever, OK, we've pressed.

5
00:00:19,920 --> 00:00:24,250
So we want to add in the ability to create a list of commands.

6
00:00:24,300 --> 00:00:25,230
So let's create that.

7
00:00:25,230 --> 00:00:27,590
And this can be called my function list.

8
00:00:27,600 --> 00:00:31,620
And right now this is a blank global object, just like the my block.

9
00:00:31,620 --> 00:00:37,660
We're going to create an element in order to house and so that we can visibly see all of those commands.

10
00:00:37,680 --> 00:00:45,150
So within the my function list, just as we did with the my block using document create element and

11
00:00:45,150 --> 00:00:50,700
the element that we're creating is going to be a div and we're simply going to be appending it the same

12
00:00:50,700 --> 00:00:55,770
thing that we did with the my block where we're spending it to the document body, and that's going

13
00:00:55,770 --> 00:00:59,670
to give us a container in order to deposit the commands.

14
00:01:00,000 --> 00:01:05,160
And the way that we want to do this is we want to have a list of commands and we're also going to create

15
00:01:05,520 --> 00:01:09,150
a global array that we can add all of the commands in.

16
00:01:09,150 --> 00:01:11,020
So the rain will be called fun list.

17
00:01:11,100 --> 00:01:18,000
So the idea is that every time one of these keys is pressed, we're going to send that information over

18
00:01:18,000 --> 00:01:18,870
to a function.

19
00:01:19,200 --> 00:01:23,480
And the function that we need to create is going to be called add fun.

20
00:01:23,490 --> 00:01:29,730
And what this is going to do is this is going to add that function information into the array as well

21
00:01:29,730 --> 00:01:31,230
as sort visibly.

22
00:01:31,410 --> 00:01:38,340
And then when we press the arrow, the space or the enter key, then we're going to run all of the commands.

23
00:01:38,580 --> 00:01:44,370
So we'll be able to build out a list of the directions that this element is going to move and then run

24
00:01:44,370 --> 00:01:44,610
that.

25
00:01:44,620 --> 00:01:49,190
So we'll see that we can invoked all of the different functions and run them sequentially.

26
00:01:49,200 --> 00:01:55,740
So instead of going left, we're going to send this information over to fun and we're going to just

27
00:01:55,740 --> 00:01:57,800
send in the information left.

28
00:01:57,810 --> 00:02:01,830
We're going to do the same thing for rights and up and down.

29
00:02:02,010 --> 00:02:08,700
So all of them are going to get the information now being passed into the array as well as storing it

30
00:02:09,000 --> 00:02:14,840
to be added in and run at a later point, passing in all of these values into the ad.

31
00:02:14,850 --> 00:02:19,950
And the first thing that we want to do is take a fun list and we're going to push whatever the value

32
00:02:19,950 --> 00:02:24,060
is into the array and we'll consult log that information out.

33
00:02:24,060 --> 00:02:27,150
So console log out the value of fun list.

34
00:02:27,180 --> 00:02:32,360
So now whenever I press any of the arrow keys, you can see that they're being added into the arrays.

35
00:02:32,360 --> 00:02:34,150
So that's the fun mystery there.

36
00:02:34,200 --> 00:02:39,390
We also can remove out the tracking of the key codes in the console because we don't need that at the

37
00:02:39,390 --> 00:02:39,710
moment.

38
00:02:39,810 --> 00:02:44,280
So next to that we want to do is we want to output it visually so already create a container to do that.

39
00:02:44,280 --> 00:02:47,910
And that's going to be the my function list element on the page.

40
00:02:47,910 --> 00:02:51,380
And we want to add this visually to that element.

41
00:02:51,390 --> 00:02:54,930
So we're pushing it into the array and let's create a span.

42
00:02:55,050 --> 00:03:01,230
So using document, create element, creating a span element and we're going to attach some text into

43
00:03:01,230 --> 00:03:01,410
it.

44
00:03:01,410 --> 00:03:05,280
So it'll be spane adding in some text content into that.

45
00:03:05,280 --> 00:03:10,050
And what we'll do is we'll just add in whatever the value of Val is.

46
00:03:10,080 --> 00:03:14,210
We can also apply some styling, adding in padding to that.

47
00:03:14,370 --> 00:03:18,720
So do 10 picks of padding for each one of those span elements.

48
00:03:19,170 --> 00:03:22,960
Also a border so that we can distinguish the different ones.

49
00:03:22,980 --> 00:03:27,600
So one pick solid and we'll make it a really light color border.

50
00:03:27,780 --> 00:03:31,790
And then now we're ready to add it onto the page so that it's visible.

51
00:03:31,800 --> 00:03:39,570
So using append child method, append the spane object to the page so that when I press the keys, you

52
00:03:39,570 --> 00:03:42,900
see that where they're showing up on the screen.

53
00:03:43,260 --> 00:03:49,740
And we also have a list of all of the different directions that we want to move within that array,

54
00:03:49,740 --> 00:03:50,840
the fun list array.

55
00:03:51,180 --> 00:03:54,420
So we see them visually and we also see them within the array.

56
00:03:54,840 --> 00:04:02,160
Also, I want it to add in the ability to hover over these elements and will update the styling as we

57
00:04:02,160 --> 00:04:02,890
hover over.

58
00:04:03,180 --> 00:04:09,960
So this is can be done with an event listener and adding in the mouse over event, we're going to invoke

59
00:04:09,960 --> 00:04:15,950
a function and this function is going to run and it's going to update the current object or the span.

60
00:04:16,440 --> 00:04:22,530
So either one will point to the same object and update the background color and turn the background

61
00:04:22,530 --> 00:04:22,870
color.

62
00:04:22,910 --> 00:04:30,030
How about we make it red and then also this style color and we'll set that to be white.

63
00:04:30,510 --> 00:04:31,740
So we'll see what happens now.

64
00:04:31,860 --> 00:04:37,320
And now I need to enter in a bunch of these whenever I hover over them, you see that they go red.

65
00:04:37,710 --> 00:04:44,130
And we also want to add one more event listener for most out so that we can remove the styling that

66
00:04:44,130 --> 00:04:47,430
we set up and reset it back to the way that it was.

67
00:04:47,670 --> 00:04:54,140
So adding and a background color of white and updating the text to be black.

68
00:04:54,150 --> 00:04:55,430
So let's add that in now.

69
00:04:55,440 --> 00:04:59,340
And you can see that now whenever I hover over them, we've got this hover effect.

70
00:04:59,880 --> 00:05:05,580
That you can do with success as well as you can do it with JavaScript and we're listing out all of the

71
00:05:05,580 --> 00:05:06,990
different directions that we want to move.

72
00:05:07,080 --> 00:05:09,390
So that's that we want to add in and this is coming up in.

73
00:05:09,390 --> 00:05:14,310
The next lesson is the ability to run through these functions and run them as commands.

74
00:05:14,430 --> 00:05:16,170
So have that element moving.

75
00:05:16,180 --> 00:05:22,440
So it would go whenever we're ready, we go right down, right down, right down and have that element

76
00:05:22,440 --> 00:05:23,390
run the sequence.

77
00:05:23,700 --> 00:05:25,670
So that's coming up in the next lesson.

78
00:05:26,040 --> 00:05:32,520
So go ahead and add this into your project, the ability to see which arrows have been pressed, displayed

79
00:05:32,520 --> 00:05:36,840
on the screen and also add in that mouse over and mouse out of AFACT.