I've got one more challenge for you in this lesson, we're going to create a background color changer,
so that means that we add a button to our page and then when the button gets clicked, it's going to
change the body, background, color, using what we've learned in the earlier lessons.
And we're also going to be using math random in my floor in order to accomplish a random number.
And as we know with rugby, there's zero to 255.
So red, green, blue values.
And in order to set a random one, we're going to use this random function that's shown over here so
you can pause the video, try this out and I'll show you the solution coming up.
So first thing we want to do is add a button to our page.
And the button that we're going to add will give it a class so that we can select it and this button
will change background color.
And I'm actually going to move this up on the page.
So just under the H1 refresh, we can see we've got this button added in.
So now let's make the button active.
So selecting the button, we can use documents, query, select RPG and let's check the element to make
sure that we have the correct one.
So we do have the correct one.
So now we can add an event listener to it.
So button add event listener and that that we're listening for is a click and when it gets clicked that
we're going to invoke a function and for now the function will just have a value of console log color.
So we click it, we see color shows up.
Let's open this a little bit bigger and we're going to quickly go through how math works.
So math is a method in JavaScript and we can use math dot random.
We return back a value that's zero dot nine seven.
So every time we run math random, we're going to get a different random number.
So it's going to always be zero decimal place and a number of digits following that.
So this is the random number.
In order to get a usable number, we need to use math random and we multiply it by the number that we
want to use.
So let's try that again and would do math random.
And this time we're going to multiply it by a value.
We can multiply it by 255 or if one of zero to three, we get a random value anywhere from zero to two
point nine nine.
And if we use math flaw, so that's another option with math, it will floor the value to zero.
And that's why you typically see this combination where we've got our math random and our math flaw
is wrapping around it and then multiplying by the value.
Let me clear that and take it like this.
So we see we get math and we can return back a different value each time.
So it's going to be anywhere from zero one or two.
So it never hits three because remember, again, we're doing a math flaw which rounds it back down
to the nearest four number.
So we're moving at the decimal places.
So if we want a number from zero to 255, we can multiply it by 255 and we get this that value number.
So this is the way that we can get a random color because the color values can be anywhere from zero
to 255 and we can return back those numbers and use them to generate random values.
So let's try that out and we're going to create a function in order to do that.
And we can call this function, call it random.
It's going to take in a number.
So this is the number that we're going to randomize and we're returning back math floor.
So just as we saw in the example and then math random and then taking that math random, we're going
to multiply it by whatever the value of NUM plus one is and we're adding one to it.
And this will allow us to count for zero.
And this is still within the math floor.
So it's not going to take the consideration and it will still floret.
So if we pass in a value of 255, it will be like passing in 256, but it will turn back a number from
zero to 255 and that actually should say function.
So let's try that random and passan parameter.
So random two.
So we see we get anywhere from zero to two by doing it within this formula.
So now we can pass in that random number.
And going back to our ADD event listener, we need to generate a random color.
So my color and setting RGB with a bracket and then adding in the random and we're going zero to 255
and then comma, separate that out.
It's random 255 and random 255 and then we can close the rounded brackets and that's going to give us
a random number, random hex, which we can log out to the console.
So every time we press the button we get a random RGV color and then we can use that to update the document
body object, selecting its style properties, updating its background color and we can equal the back.
Ground colour to whatever the value of my colour is, because this is a string value that we can use
to generate the colour.
So now every time we click it, you see we get different colours for the background.
So that's how you can really easily add this type of effect where it updates the background of a particular
element or in this case, the body.
So coming up, we're going to look at the event object in JavaScript.