1
00:00:00,240 --> 00:00:05,550
In the earlier lesson, we saw how we can create elements and we can position them randomly at in some

2
00:00:05,550 --> 00:00:09,870
style and they are a little bit boring, they're all red in this lesson.

3
00:00:09,870 --> 00:00:12,270
We're going to fix that and add some color.

4
00:00:12,480 --> 00:00:15,250
And that's because we're setting background color to red.

5
00:00:15,540 --> 00:00:19,640
Let's create a function that's going to generate and return back a random color.

6
00:00:20,010 --> 00:00:24,690
So the color is going to be within a hex format because, of course, we can't do all the different

7
00:00:24,780 --> 00:00:28,380
named colors, such as red, blue, green and so on.

8
00:00:28,590 --> 00:00:32,970
So we want to just generate this as easily as possible.

9
00:00:33,390 --> 00:00:35,550
So we call it get color.

10
00:00:37,050 --> 00:00:41,880
And within this function, we're going to return back whatever the value of the color is.

11
00:00:42,060 --> 00:00:48,480
So it's going to be a hex color so we can simply return back the hex value and now let's generate the

12
00:00:48,480 --> 00:00:48,900
hex.

13
00:00:49,440 --> 00:00:53,480
So creating that hex value we want to use.

14
00:00:53,880 --> 00:00:59,370
Now, there's a number of different ways online that you're going to find, and some of them are really

15
00:00:59,370 --> 00:01:01,400
short to generate random colors.

16
00:01:01,800 --> 00:01:07,350
We know that colors are anywhere from zero to 255 if we've got a hex.

17
00:01:07,620 --> 00:01:15,030
So if we do random 255, we're going to get we can do the AGA colors or RGB colors within this type

18
00:01:15,030 --> 00:01:15,570
of format.

19
00:01:15,840 --> 00:01:21,320
So we're returning back a random value anywhere from zero to 255.

20
00:01:21,960 --> 00:01:28,110
So if we save that and let me open up the console, we'll type in and get color.

21
00:01:29,520 --> 00:01:35,160
And we see that we get this random value back so 63, so it's not helping us because we want to turn

22
00:01:35,160 --> 00:01:39,860
into a hex and bring it all together and that's where we can use to string.

23
00:01:40,050 --> 00:01:47,580
And what's to string does is it allows us to update the string value to return back within a hex format.

24
00:01:47,970 --> 00:01:57,780
So now when I refresh and if I do get color again, so let's refresh that we get a hex value back so

25
00:01:57,780 --> 00:01:58,710
it can be anything.

26
00:01:58,710 --> 00:02:00,020
It can be 75.

27
00:02:00,030 --> 00:02:01,550
It can be for a.

28
00:02:01,710 --> 00:02:08,520
So these are all hex values and you can see the way that the string prototype works again on the Mozilla

29
00:02:08,520 --> 00:02:09,420
developer network.

30
00:02:09,870 --> 00:02:13,660
When we run this we can generate using two string.

31
00:02:13,770 --> 00:02:18,950
So basically that gives us a base 16, which is a hex number and hex value.

32
00:02:19,170 --> 00:02:25,740
So it's how we can generate random hex values that are within a hex format that are values from zero

33
00:02:25,740 --> 00:02:26,760
to 255.

34
00:02:27,600 --> 00:02:33,780
Now, we need to use that and there's also one other thing that we want to make sure so in cases we

35
00:02:33,780 --> 00:02:36,990
have a value that only has one character.

36
00:02:37,110 --> 00:02:38,280
We want to fix that.

37
00:02:38,460 --> 00:02:45,810
And the way to fix that is to make sure that our string and we're going to get a substring of minus

38
00:02:45,990 --> 00:02:55,200
two adding in a value of zero so we can take this value and let's add in a value of zero in front of

39
00:02:55,200 --> 00:02:55,410
it.

40
00:02:55,420 --> 00:02:59,200
And then we've got our value here that we need to turn into a string.

41
00:02:59,400 --> 00:03:01,500
So this is actually getting fairly complicated.

42
00:03:01,740 --> 00:03:05,280
So the way that we're going to do it is we're going to set up a function in order to do that.

43
00:03:05,700 --> 00:03:06,630
So function.

44
00:03:07,620 --> 00:03:14,910
And we can just call it Sewel, so a function within this function and instead of returning back the

45
00:03:14,910 --> 00:03:23,310
hex value, we're going to return back the value of this with the hash in front of it and add in that

46
00:03:23,310 --> 00:03:23,810
value.

47
00:03:24,450 --> 00:03:29,630
And then within the function, within that function, we're going to return back the value of hex.

48
00:03:30,090 --> 00:03:35,300
So that's not really going to change a whole lot here of what's happening when we do get color.

49
00:03:35,820 --> 00:03:41,340
So launching that get color method, we're still getting that random color value, but we've got the

50
00:03:41,340 --> 00:03:42,150
hash in front of it.

51
00:03:42,270 --> 00:03:44,430
So that's all that's changed so far.

52
00:03:44,760 --> 00:03:49,050
And we do want to make sure that we always have at least two characters here.

53
00:03:49,410 --> 00:03:53,590
So instead of just returning back the hex, let's create a formula for that.

54
00:03:54,030 --> 00:04:02,220
So adding in a zero in front of it and using the string method, we can turn and make sure that this

55
00:04:02,220 --> 00:04:04,260
value is going to be within a string format.

56
00:04:04,740 --> 00:04:08,220
So that's just to make sure that we are getting a string format.

57
00:04:08,400 --> 00:04:15,810
And because it's string value, we can use a string method to it and that's substring.

58
00:04:15,960 --> 00:04:22,350
And what substring does is it returns all of the characters in the string from the beginning location.

59
00:04:22,560 --> 00:04:30,230
And if we do some string of minus two, it will return back both of those characters.

60
00:04:30,450 --> 00:04:35,190
So in a sense, we're not going to see a whole lot different there, but we're always going to be sure

61
00:04:35,190 --> 00:04:37,410
that we're returning back at least two characters.

62
00:04:37,590 --> 00:04:43,710
And if we don't return back to characters such as in this case, we got to it with a zero in front of

63
00:04:43,710 --> 00:04:43,840
it.

64
00:04:44,070 --> 00:04:45,990
So in this case, this would have just been nine.

65
00:04:46,080 --> 00:04:50,250
But because we padded the zero in front of it, we see that it's a zero nine.

66
00:04:50,460 --> 00:04:56,460
And one last thing that we need to do is that we've got only that one hex value.

67
00:04:56,550 --> 00:05:04,470
And we know that all colors have the five the three different colors to it so we can add multiple values

68
00:05:04,470 --> 00:05:04,850
to it.

69
00:05:05,130 --> 00:05:11,670
And now when we do get color, we're returning back a random color value and we can use that within

70
00:05:11,670 --> 00:05:13,690
our formula.

71
00:05:13,740 --> 00:05:18,670
So instead of returning back red, we can simply launch our function to get color.

72
00:05:18,900 --> 00:05:26,040
So going back into our display area now, we should have different colors for all of these shapes that

73
00:05:26,040 --> 00:05:26,890
are showing up.

74
00:05:27,510 --> 00:05:30,540
So I know this was a fairly long and intense lesson.

75
00:05:30,780 --> 00:05:32,940
I do want you to try this out for yourself.

76
00:05:32,940 --> 00:05:38,790
And as mentioned, there are a number of ways to generate color values within JavaScript.

77
00:05:38,880 --> 00:05:44,280
So this is one that's fairly straightforward, where we're generating the hex value and then we're just

78
00:05:44,280 --> 00:05:50,730
padding it with the zero, using substring to make sure that all of these are two characters long at

79
00:05:50,730 --> 00:05:51,150
least.

80
00:05:51,770 --> 00:05:53,700
So go ahead and try this out for yourself.

81
00:05:53,970 --> 00:05:59,460
And coming up next, I'm going to show you how we can create some interaction and also set up a timer

82
00:05:59,610 --> 00:06:02,020
for when these shapes are showing up.

83
00:06:02,400 --> 00:06:04,180
So that's still all yet to come.

84
00:06:04,440 --> 00:06:09,870
Go ahead and add in the color generator function of this application.