In the earlier lesson, we saw how we can create elements and we can position them randomly at in some
style and they are a little bit boring, they're all red in this lesson.
We're going to fix that and add some color.
And that's because we're setting background color to red.
Let's create a function that's going to generate and return back a random color.
So the color is going to be within a hex format because, of course, we can't do all the different
named colors, such as red, blue, green and so on.
So we want to just generate this as easily as possible.
So we call it get color.
And within this function, we're going to return back whatever the value of the color is.
So it's going to be a hex color so we can simply return back the hex value and now let's generate the
hex.
So creating that hex value we want to use.
Now, there's a number of different ways online that you're going to find, and some of them are really
short to generate random colors.
We know that colors are anywhere from zero to 255 if we've got a hex.
So if we do random 255, we're going to get we can do the AGA colors or RGB colors within this type
of format.
So we're returning back a random value anywhere from zero to 255.
So if we save that and let me open up the console, we'll type in and get color.
And we see that we get this random value back so 63, so it's not helping us because we want to turn
into a hex and bring it all together and that's where we can use to string.
And what's to string does is it allows us to update the string value to return back within a hex format.
So now when I refresh and if I do get color again, so let's refresh that we get a hex value back so
it can be anything.
It can be 75.
It can be for a.
So these are all hex values and you can see the way that the string prototype works again on the Mozilla
developer network.
When we run this we can generate using two string.
So basically that gives us a base 16, which is a hex number and hex value.
So it's how we can generate random hex values that are within a hex format that are values from zero
to 255.
Now, we need to use that and there's also one other thing that we want to make sure so in cases we
have a value that only has one character.
We want to fix that.
And the way to fix that is to make sure that our string and we're going to get a substring of minus
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
it.
And then we've got our value here that we need to turn into a string.
So this is actually getting fairly complicated.
So the way that we're going to do it is we're going to set up a function in order to do that.
So function.
And we can just call it Sewel, so a function within this function and instead of returning back the
hex value, we're going to return back the value of this with the hash in front of it and add in that
value.
And then within the function, within that function, we're going to return back the value of hex.
So that's not really going to change a whole lot here of what's happening when we do get color.
So launching that get color method, we're still getting that random color value, but we've got the
hash in front of it.
So that's all that's changed so far.
And we do want to make sure that we always have at least two characters here.
So instead of just returning back the hex, let's create a formula for that.
So adding in a zero in front of it and using the string method, we can turn and make sure that this
value is going to be within a string format.
So that's just to make sure that we are getting a string format.
And because it's string value, we can use a string method to it and that's substring.
And what substring does is it returns all of the characters in the string from the beginning location.
And if we do some string of minus two, it will return back both of those characters.
So in a sense, we're not going to see a whole lot different there, but we're always going to be sure
that we're returning back at least two characters.
And if we don't return back to characters such as in this case, we got to it with a zero in front of
it.
So in this case, this would have just been nine.
But because we padded the zero in front of it, we see that it's a zero nine.
And one last thing that we need to do is that we've got only that one hex value.
And we know that all colors have the five the three different colors to it so we can add multiple values
to it.
And now when we do get color, we're returning back a random color value and we can use that within
our formula.
So instead of returning back red, we can simply launch our function to get color.
So going back into our display area now, we should have different colors for all of these shapes that
are showing up.
So I know this was a fairly long and intense lesson.
I do want you to try this out for yourself.
And as mentioned, there are a number of ways to generate color values within JavaScript.
So this is one that's fairly straightforward, where we're generating the hex value and then we're just
padding it with the zero, using substring to make sure that all of these are two characters long at
least.
So go ahead and try this out for yourself.
And coming up next, I'm going to show you how we can create some interaction and also set up a timer
for when these shapes are showing up.
So that's still all yet to come.
Go ahead and add in the color generator function of this application.