1
00:00:00,180 --> 00:00:05,010
I've got one more challenge for you in this lesson, we're going to create a background color changer,

2
00:00:05,310 --> 00:00:10,050
so that means that we add a button to our page and then when the button gets clicked, it's going to

3
00:00:10,050 --> 00:00:15,180
change the body, background, color, using what we've learned in the earlier lessons.

4
00:00:15,360 --> 00:00:22,320
And we're also going to be using math random in my floor in order to accomplish a random number.

5
00:00:22,470 --> 00:00:27,590
And as we know with rugby, there's zero to 255.

6
00:00:27,780 --> 00:00:30,390
So red, green, blue values.

7
00:00:30,600 --> 00:00:36,090
And in order to set a random one, we're going to use this random function that's shown over here so

8
00:00:36,090 --> 00:00:41,260
you can pause the video, try this out and I'll show you the solution coming up.

9
00:00:41,280 --> 00:00:44,880
So first thing we want to do is add a button to our page.

10
00:00:45,090 --> 00:00:51,030
And the button that we're going to add will give it a class so that we can select it and this button

11
00:00:51,030 --> 00:00:53,310
will change background color.

12
00:00:53,400 --> 00:00:55,890
And I'm actually going to move this up on the page.

13
00:00:56,130 --> 00:01:00,780
So just under the H1 refresh, we can see we've got this button added in.

14
00:01:01,530 --> 00:01:03,690
So now let's make the button active.

15
00:01:04,570 --> 00:01:11,190
So selecting the button, we can use documents, query, select RPG and let's check the element to make

16
00:01:11,190 --> 00:01:12,240
sure that we have the correct one.

17
00:01:12,600 --> 00:01:13,830
So we do have the correct one.

18
00:01:14,190 --> 00:01:16,560
So now we can add an event listener to it.

19
00:01:16,590 --> 00:01:23,340
So button add event listener and that that we're listening for is a click and when it gets clicked that

20
00:01:23,340 --> 00:01:29,760
we're going to invoke a function and for now the function will just have a value of console log color.

21
00:01:30,030 --> 00:01:32,020
So we click it, we see color shows up.

22
00:01:32,070 --> 00:01:36,500
Let's open this a little bit bigger and we're going to quickly go through how math works.

23
00:01:36,900 --> 00:01:42,260
So math is a method in JavaScript and we can use math dot random.

24
00:01:42,450 --> 00:01:46,640
We return back a value that's zero dot nine seven.

25
00:01:46,650 --> 00:01:51,350
So every time we run math random, we're going to get a different random number.

26
00:01:51,630 --> 00:01:56,430
So it's going to always be zero decimal place and a number of digits following that.

27
00:01:56,460 --> 00:01:57,930
So this is the random number.

28
00:01:58,200 --> 00:02:04,080
In order to get a usable number, we need to use math random and we multiply it by the number that we

29
00:02:04,080 --> 00:02:04,620
want to use.

30
00:02:04,980 --> 00:02:07,800
So let's try that again and would do math random.

31
00:02:08,550 --> 00:02:12,030
And this time we're going to multiply it by a value.

32
00:02:12,300 --> 00:02:20,460
We can multiply it by 255 or if one of zero to three, we get a random value anywhere from zero to two

33
00:02:20,460 --> 00:02:21,200
point nine nine.

34
00:02:21,750 --> 00:02:28,940
And if we use math flaw, so that's another option with math, it will floor the value to zero.

35
00:02:29,250 --> 00:02:35,730
And that's why you typically see this combination where we've got our math random and our math flaw

36
00:02:35,730 --> 00:02:39,150
is wrapping around it and then multiplying by the value.

37
00:02:39,180 --> 00:02:41,670
Let me clear that and take it like this.

38
00:02:41,670 --> 00:02:47,040
So we see we get math and we can return back a different value each time.

39
00:02:47,310 --> 00:02:50,280
So it's going to be anywhere from zero one or two.

40
00:02:50,460 --> 00:02:55,920
So it never hits three because remember, again, we're doing a math flaw which rounds it back down

41
00:02:55,920 --> 00:02:58,020
to the nearest four number.

42
00:02:58,110 --> 00:02:59,670
So we're moving at the decimal places.

43
00:02:59,910 --> 00:03:07,710
So if we want a number from zero to 255, we can multiply it by 255 and we get this that value number.

44
00:03:07,740 --> 00:03:13,950
So this is the way that we can get a random color because the color values can be anywhere from zero

45
00:03:13,950 --> 00:03:19,730
to 255 and we can return back those numbers and use them to generate random values.

46
00:03:20,190 --> 00:03:23,580
So let's try that out and we're going to create a function in order to do that.

47
00:03:23,580 --> 00:03:25,940
And we can call this function, call it random.

48
00:03:26,370 --> 00:03:27,600
It's going to take in a number.

49
00:03:27,610 --> 00:03:32,970
So this is the number that we're going to randomize and we're returning back math floor.

50
00:03:32,970 --> 00:03:39,600
So just as we saw in the example and then math random and then taking that math random, we're going

51
00:03:39,600 --> 00:03:45,810
to multiply it by whatever the value of NUM plus one is and we're adding one to it.

52
00:03:45,990 --> 00:03:48,210
And this will allow us to count for zero.

53
00:03:48,360 --> 00:03:50,850
And this is still within the math floor.

54
00:03:50,940 --> 00:03:54,240
So it's not going to take the consideration and it will still floret.

55
00:03:54,660 --> 00:04:01,470
So if we pass in a value of 255, it will be like passing in 256, but it will turn back a number from

56
00:04:01,470 --> 00:04:04,810
zero to 255 and that actually should say function.

57
00:04:05,310 --> 00:04:08,730
So let's try that random and passan parameter.

58
00:04:08,880 --> 00:04:09,780
So random two.

59
00:04:09,990 --> 00:04:15,010
So we see we get anywhere from zero to two by doing it within this formula.

60
00:04:15,330 --> 00:04:18,210
So now we can pass in that random number.

61
00:04:18,480 --> 00:04:24,030
And going back to our ADD event listener, we need to generate a random color.

62
00:04:24,180 --> 00:04:31,660
So my color and setting RGB with a bracket and then adding in the random and we're going zero to 255

63
00:04:31,710 --> 00:04:33,330
and then comma, separate that out.

64
00:04:33,350 --> 00:04:40,320
It's random 255 and random 255 and then we can close the rounded brackets and that's going to give us

65
00:04:40,320 --> 00:04:45,120
a random number, random hex, which we can log out to the console.

66
00:04:45,270 --> 00:04:52,380
So every time we press the button we get a random RGV color and then we can use that to update the document

67
00:04:52,380 --> 00:04:59,810
body object, selecting its style properties, updating its background color and we can equal the back.

68
00:04:59,930 --> 00:05:04,670
Ground colour to whatever the value of my colour is, because this is a string value that we can use

69
00:05:04,670 --> 00:05:05,600
to generate the colour.

70
00:05:05,930 --> 00:05:09,680
So now every time we click it, you see we get different colours for the background.

71
00:05:10,190 --> 00:05:15,740
So that's how you can really easily add this type of effect where it updates the background of a particular

72
00:05:15,740 --> 00:05:17,960
element or in this case, the body.

73
00:05:18,110 --> 00:05:21,620
So coming up, we're going to look at the event object in JavaScript.