Hey, since you did so well on the earlier challenge, I've got another challenge for you and this challenge
is going to be a little bit easier.
But we're using Amarth random as well as string values, string manipulation within this exercise.
So the objective is to select a random color.
So using both random and the color is going to be a hex value.
So Hexis base 16 C could have all the digits all the way up to zero to nine as well as ABCDE PEF.
And if you're familiar with hex colors in the Internet, those are with a hash and then they've got
six characters and we're going to generate this randomly using Amarth random and then substring to select
the color.
So let's try this.
So pause the video here and I'll walk you through the solution.
And this is going to be a really useful function.
Now you're going to use all the time, especially gendering around.
This is going to be surprisingly simple.
So at first we'll work through the math part in the console.
So using math random and we saw it math random does is it returns this number zero decimal and a whole
bunch of digits.
After that we can convert it to string and that's going to turn it into a string.
So we see that we got the quotes around that and we could also use substring and do a negative six and
that will return back six characters from the end.
So this is a substring negative six.
So this will always produce a random value.
So random six character number and turning it into a string and we have to convert it to string in order
to utilize the string method.
So there isn't anything in number that we can get a substring.
So that's what we're converting it and divert string into hex format.
We can use base 16, so that's going to convert it into XML format.
And as you can see now, we're returning back a hex value that's got six characters.
And this is actually exactly what we need in order to generate a random number.
So let's create a random color.
So let's create our function for random color.
We don't need to pass in any parameters and we can just create a temporary variable to hold this formula.
And then we're returning back, whatever the value of that is.
And we don't actually need a variable.
We could just go directly to even shorten it even more.
We can return back that value.
So when we refresh and let me clear that.
So now if I do a random color, there is something missing.
For those of you that work with colors, what's missing?
We're missing the hash.
And this is easy to add in because, of course, this is a string.
So all we have to do is add the hash, concatenate it to the result.
And when we refresh and we put the random color again, you can see that the random color is being output
there.
So now next thing we want to do is update the color of the background randomly, of course.
And we can also even tie it to a button if we want to.
So we've got that button on the screen.
So using documents and query selector, selecting the button element and adding an event listener,
you don't have to do it this way.
You could just simply generate the random color.
And we've got an anonymous function.
So whenever this button is going to get clicked, we're going to use the document body, apply a style
to it, and the style is for the background color.
And this value is going to be whatever gets returned back from random color function.
So refresh.
And now whenever we click the button, we can generate a random background color that's going to get
applied to the elements, to the body.
You can see that that number is always going to be changing.
And the reason are going to be is because whenever we're passing that hex into the dorm, then the DOM
is translating into RGB and then updating the color, the style property color.
So that's where we're getting all of that random background color being generated.
So try to.