1
00:00:00,090 --> 00:00:05,010
Let's have some fun with the element that we created and we're going to have on a key press updating

2
00:00:05,010 --> 00:00:09,590
the background color, and we already saw earlier how we can set a background color.

3
00:00:09,600 --> 00:00:15,360
And in this case, in this lesson, we need to generate a random hex value that we can return back and

4
00:00:15,360 --> 00:00:17,310
use as our background color.

5
00:00:17,470 --> 00:00:20,300
And we're going to do this using JavaScript math.

6
00:00:20,640 --> 00:00:28,260
So taking a value where we've got math, random method and you can see what gets returned back from

7
00:00:28,260 --> 00:00:29,460
math random.

8
00:00:29,850 --> 00:00:37,350
We invoke this function a C, we get a zero decimal and a bunch of characters so we can extend on that

9
00:00:37,560 --> 00:00:41,180
by updating it and applying another.

10
00:00:41,610 --> 00:00:46,290
So stringing another method to it and adding in to string.

11
00:00:46,530 --> 00:00:54,060
And we can specify that if we want to hexadecimal value being returned back, we can specify to string

12
00:00:54,060 --> 00:00:55,420
sixteen Kazaks.

13
00:00:55,440 --> 00:01:04,290
The best decimal is be sixteen and it includes the ABCDE, E and F letters as well as all of the regular

14
00:01:04,290 --> 00:01:05,330
ten digits.

15
00:01:05,580 --> 00:01:11,940
So you can see that now we're getting a hexadecimal return back value and it's still zero decimal and

16
00:01:11,940 --> 00:01:13,220
then that's hexadecimal.

17
00:01:13,530 --> 00:01:19,800
So what we want to do is we want to return back a substring minus six on this.

18
00:01:20,130 --> 00:01:27,150
And what that will do is that will take the last six characters that are available here and return that

19
00:01:27,150 --> 00:01:28,320
information back.

20
00:01:28,530 --> 00:01:34,500
And then, of course, we can utilize that in order to build our random color.

21
00:01:34,530 --> 00:01:41,280
So if we do a substring minus six, it will return back the last six characters from that string.

22
00:01:41,550 --> 00:01:48,110
So we can use that and we can use this formula to generate a random hexadecimal value.

23
00:01:48,120 --> 00:01:52,530
So let's create a function for that to handle this, creating a function.

24
00:01:53,040 --> 00:01:55,110
And we can just call this random color.

25
00:01:55,110 --> 00:01:59,580
And this function is going to return back this value.

26
00:01:59,760 --> 00:02:05,690
And we also need to add in the hash in front of this in order to have it a proper color format.

27
00:02:06,120 --> 00:02:10,320
And when we add it to a number, we're going to return back as a string.

28
00:02:10,510 --> 00:02:12,390
And this is hexadecimal anyway.

29
00:02:12,540 --> 00:02:16,070
So it's been returned back as string value.

30
00:02:16,410 --> 00:02:19,740
So let's listen for the key code that we want attached to it.

31
00:02:19,950 --> 00:02:24,090
And I'm going to press the key C and we get a value of 67.

32
00:02:24,570 --> 00:02:28,520
So adding that in as the key that we're listening for.

33
00:02:28,530 --> 00:02:31,050
So we're listening for key 67.

34
00:02:31,770 --> 00:02:40,650
And what we want to do is take the my block object, select its style, value and background color,

35
00:02:40,800 --> 00:02:48,890
and we're going to equal the background color to whatever is being returned back from random color function.

36
00:02:49,110 --> 00:02:56,730
And you can also in order to run a block of code, you can also use the curly brackets around this.

37
00:02:56,850 --> 00:03:02,430
And because we're all on that same statement line, that's what we didn't have to include them and it

38
00:03:02,430 --> 00:03:08,160
would just simply run the statement after the condition is met so we can try that out.

39
00:03:08,160 --> 00:03:15,420
And now you see that if I press see and let me refresh that and if I press see, you see that the color

40
00:03:15,420 --> 00:03:20,790
of the element is updating and I still have the other functionality where I can move left, I can move

41
00:03:20,790 --> 00:03:23,250
up, I can move right and I can move down.

42
00:03:23,490 --> 00:03:25,980
So all of that functionality is still there.

43
00:03:26,370 --> 00:03:27,720
So go ahead and try this out.

44
00:03:27,720 --> 00:03:32,250
Add in the ability to generate a random color using not random.