1
00:00:00,390 --> 00:00:05,910
Having them all green is a little bit boring, so let's add in some color into those elements as we're

2
00:00:05,910 --> 00:00:12,930
generating them and we can update those colors here so we can call it random color and invoke a function

3
00:00:12,930 --> 00:00:13,970
called random color.

4
00:00:14,370 --> 00:00:16,870
And then down here, let's create that function.

5
00:00:18,000 --> 00:00:19,880
So this is our function, a random color.

6
00:00:20,070 --> 00:00:22,980
And what we're going to be doing is we're going to be returning back.

7
00:00:23,460 --> 00:00:28,440
So it's going to be a hex value and we need to generate several.

8
00:00:29,580 --> 00:00:38,700
Hex color values, so these are essentially numbers from zero to two fifty five, so setting up a function

9
00:00:39,750 --> 00:00:42,490
in order to do that so that we can call to this function.

10
00:00:43,140 --> 00:00:47,850
So let's create our hex using math.

11
00:00:49,340 --> 00:00:56,120
Floor seats are going to generate a random number from zero to 255.

12
00:00:57,780 --> 00:01:03,270
Then we're going to convert it to string and convert it to a hex value.

13
00:01:04,680 --> 00:01:09,760
We can return back that Hecks here and we can try this one out.

14
00:01:09,960 --> 00:01:14,730
So now when we go over and we refresh, can see that's generating these colors.

15
00:01:15,000 --> 00:01:17,130
And sometimes there are some issues.

16
00:01:17,140 --> 00:01:22,560
So if we do an inspect on this, you can see that it generated a color on it.

17
00:01:22,590 --> 00:01:24,000
Let me get this a little bit bigger.

18
00:01:25,400 --> 00:01:30,170
You can see that it generated a color, but there was a problem there because it didn't generate a proper

19
00:01:30,170 --> 00:01:30,600
color.

20
00:01:30,830 --> 00:01:36,200
And that's because sometimes when you generate things randomly and you need two characters, you need

21
00:01:36,200 --> 00:01:38,850
to make sure that you are getting those two characters.

22
00:01:39,170 --> 00:01:45,370
So the way to do that is to take our value of hex and we're going to update it.

23
00:01:45,410 --> 00:01:47,840
So we're going to add a zero to the front of it.

24
00:01:47,840 --> 00:01:54,320
So we're going to add whatever the value of it is and convert it, make sure that hex is a string value.

25
00:01:55,500 --> 00:02:02,610
So adding a zero to it and then using JavaScript substring, which returns a specific number of characters

26
00:02:02,910 --> 00:02:06,180
from the beginning of a location or from the end of the location.

27
00:02:06,220 --> 00:02:08,760
So in this case, we're doing the end of the location.

28
00:02:09,000 --> 00:02:13,540
So now Hex will always be at least two characters long.

29
00:02:13,710 --> 00:02:16,010
So we don't we don't run into those issues anymore.

30
00:02:16,020 --> 00:02:22,140
And as you can see now, we're generating all kinds of nice, colorful elements as we click.

31
00:02:22,470 --> 00:02:23,800
So we don't have that problem anymore.

32
00:02:24,330 --> 00:02:31,410
So now go ahead and add this into your project, add the ability to generate colors and random colors

33
00:02:31,410 --> 00:02:32,280
of those elements.

34
00:02:32,580 --> 00:02:35,520
And coming up next, create a garbage area here.

35
00:02:35,640 --> 00:02:41,970
So in case we've created something we want to get rid of, them will create an element that we can essentially

36
00:02:41,970 --> 00:02:45,090
act as a garbage pail where we can dump these elements.

37
00:02:45,240 --> 00:02:49,650
So whenever these elements are on top of that, they're going to simply disappear off the screen and

38
00:02:49,650 --> 00:02:51,030
we can remove those elements.

39
00:02:51,330 --> 00:02:53,210
So that is yet to come in the next lesson.

40
00:02:53,700 --> 00:02:55,350
So go ahead and add in the colors.