So we're in good shape here.
What we want to do next is make it so that we don't use the same six colors every single time.
Instead we want to generate six random colors and fill this array with those six random colors and then
pick one of those to generate those colors.
I'm actually going to write another function to help us out.
So our function Nener our race the hardcoded array and I'm going to set colors equal to our function
call which we'll call generate random colors and it doesn't exist yet and it's going to take a single
argument that decides how many colors to generate in the array.
So if we want an array with three items which we will want eventually when we get go to easy mode versus
hard mode we want 6.
So we'll start with 6.
That's what we want when the page loads.
Then we need to create the generate random colors function that takes a number and returns X number
of random colors instead of an array.
So I'll do that down here.
Function generate random colors and that should take a argument that we'll just call numb and then instead
of here.
All right my pseudo code.
So I'm going to make an array.
I'm going to add some random colors to array and then I'm going to return that array at the very end
.
So to start this is the easiest part.
Make an array just an empty one.
So we'll call it a r r just an empty array and then at the bottom we're just going to return the same
array.
The hard part is the logic that goes in between.
So in here we need to add knowm random colors.
So what that means is we need to repeat something knowm number of times.
So six times or three times.
So we'll use a loop to do that.
So we'll start with our loop for of our equals zero.
I is less than numb I plus plus.
And it doesn't matter if we start at zero or if we start at 1 and we make this less than or equal to
because we're not actually going to use I it's just a way to loop through three times six times Nahm
times.
And then in here we're going to actually get random color and push into array.
So this line is actually just repeat numb times.
So I'm going to make a separate function actually that will generate the random color for us and I'm
just going to call that one random color.
So function random color and what you're seeing is that I have a function here.
Generate random colors that I call inside of that one I'm calling another function just called random
color and that's really just to break a code up.
Make it clear modular what does what we could have everything in no functions at all it could just be
what people would call spaghetti code it's all over the place.
So we're going to add some functions here to add some structure.
And again at the very end of this project when we have it completed it looks good all the functionality
is there.
I'll have an optional video on refactoring it and I'll talk about how he can change things around make
them a little cleaner a little prettier but it will work exactly the same way.
So to start random colors to make a random color we're going to need to pick a read from 0 to 5 5 reps
from 0 2 to 5 5 and then we need to pick a green from zero to 2 5 5 and then a blue.
And so to pick any number from 0 to 255 we also need to use math not random.
So it's going to be math not random.
That gives us between 0 and 1.
It doesn't include one.
We need to multiply by 256 because remember we're rounding down.
So we want 255 to be the greatest number possible to many to multiply by one more 256 and then we need
to floor that math floor.
So go to my counsel and paste in this code you can see if we get a random number between 0 and 255 and
you probably won't see that it actually goes to 255.
We'll just have to trust me on that one.
But you can see at least it gets close.
I think we saw 253.
That's good enough for now.
And you also see all the squares went to purple and that's because our generate random colors doesn't
return anything.
So it just returns an empty string.
So we're not actually looping through and giving a color to each one.
So it's just taking the default purple from C Ss just a side note there.
So this will generate a number from 0 to 255.
We'll save it to a variable called R and then we'll do the same thing for green and for blue so just
like this space this correctly and change the names so G and B that will give us three numbers from
0 to 255.
And the worst part is synthesizing them into this big string that follows the format of R.G. B parentheses
and then the numbers inside R G and B.
And that means a lot of opening and closing strings and plus signs.
So let's start with what looks like this.
We're going to have our G-B and then opening parentheses and then plus the red channel.
This number from 0 to 2 5 5 plus a comma plus the value of G plus another comma plus the value of B
plus our closing parentheses.
And we should be good to go now.
This big string.
And what we want to do is actually return that string just like that.
So return this big string and that will generate one random colors.
So it's a lot of work for one color.
Three different numbers 0 2 2 5 5.
We put them together with commas between them parentheses around them the letters R.G. B.
And then we return that so we can use it up here.
And if we want to just test if that works let's go ahead and refresh the page go to our consul and just
try calling random colored and that looks good to me.
We're getting a random color.
Parentheses are correct.
The commas are all good.
Let's go now and use that up here.
So we're going to call that random color and we're going to push that into our array.
Here they are.
So our DOT push and we don't have to use push but that's going to do here.
And this will now build us a nice array of colors.
So generate random colors 6.
We call this it repeats six times each time through.
It pushes in a random color to the array.
So I'm going to just move our comment up here.
There we go.
And to verify that that works if we refresh.
You can see now we get six random colors and not only that are random color that we pick the one color
that we picked from the array also changes.
So we didn't break that.
Everything still works or does it.
Let's see.
So if I click on some of these colors try again try again try again maybe I just have really bad book
but no something's wrong.
So the problem's a little bit tricky.
It's a little similar to the bug that I brought up when we did the score keeper game when we were comparing
things right here.
If we're checking if the user is right if they pick the right color something was going wrong before
we had a number.
And we were comparing it to a string.
In this case it's a little bit different.
So let me show you just going to do another con. belt log click to color and then pick the color.
And let's just see what they look like maybe they're slightly different.
Let's refresh the page and open up the con. And let's start clicking.
So this one is medium amount of Fred a little green and quite a bit of blue.
So let's click on some.
And notice the numbers on the left the string RGV and the one on the right.
And of course these ones don't match.
But if you click on the right one you can see that when they do match it still thinks that we're wrong
.
It says try again.
And if you compare the two strings here this one is the clicked color.
This is what's coming back.
When we click on an element and we ask for this dot dialed up background and this is the color that
we picked from the array.
So somehow they're slightly different.
And what happens is that when we actually set the background color of an element the SS automatically
adds in the dorm automatically add 10 spaces between.
So to fix that what we want to do is just add spaces here between our numbers so after the comets and
if we do that they'll then compare and be equal to one another.
So that's kind of a tricky bug.
It just has to do with the way that we're comparing things with triple equals and it's not that double
equals would fix that anyways.
Double the calls doesn't ignore spaces or anything but it's just a problem with how we generated the
colors.
So if we try this again and refresh.
Now let's just click around.
You can see that our spaces are here and these definitely will match.
Once we click the right color which is the very last one and we get our correct.
So definitely a tricky bug there to wrap up.
Let's just try playing a game and a full screen and get rid of the console and refresh and admire our
random colors.
The last thing that we could do is when we get it correct we could also change the H-1 background like
I did here.
So when you guess the right color it changes the background color as well.
And that's a simple change.
All we need to do is select the H-1.
So H-1 and we can just select it this the only H-1 on the page.
So up here I'm just going to select at the bottom var H-1 equals document that query selector
H-1 save that.
And then when the user guesses correctly which is right here we're going to change H-1 DOD background
or style that background.
And that should now equal collect color and we'll save that go to the correct version of our game refresh
and let's try clicking.
And there we go definitely we have a ways to go with our styling compared to this but we're getting
there with the logic.
So you guess incorrectly that disappear by just changing the background color.
And if you guessed correctly they all change color and the H-1 changes as well.
In the next video we're going to add the play again functionality and we'll add a little bit more styling
.