OK so we're going to pick up where we left off.
We're going to start adding in some of the behavior for when you click the right color and when you
click the wrong color.
So let's start with when you pick the wrong color.
What we want to do is fade this out so that it matches the background color here.
So that's actually pretty straightforward.
It's just a matter of writing this dot style that background equals and then we just need to match the
color that we set in our C Ss looks like that.
So we'll paste that in and save.
Let's test it out.
Let's click one of the wrong ones.
You can see it fades out and if I clicked the right one we still get our alert.
OK so I'll refresh.
So that's what we're going to start with.
And the other thing that we want to happen though is we want a display so you can see here right here
.
There will be a display so if I click on one of the colors and it says try again.
And if I get it right like here it displays correct and then will focus on the other things like changing
the color.
Once we get that first part.
So let's add in this paragraph or the span actually is what it is and have it display the correct message
.
So we go back to our HMO and we're going to add another div in and we actually have three or four different
pieces that will go here eventually.
For now it's just going to be a little span that goes inside that div.
So as I mentioned it will be more.
For now it's just the span it's going to be empty to start as I refresh the page you can see there's
no message here.
So we're going to go here I have an empty span and let's give it an I.D. and we'll just call it message
.
And that way we can select it from instead of our Javascript.
So let's go to our javascript now and select that.
So up here we'll call it Farm message display equals document and we'll do a query selector query selector
and that we call that message.
We need the ID.
So we need the arc to Thor.
And then if the user guesses wrong.
All we need to do is write message display dot text content equals try again.
And if we refresh and you click the wrong one it's really hard to see.
So we should change the background color or the text color.
We can just do that over here.
We'll just say all span's should have color white and if we are fresh.
Now I clicked the wrong one.
It tells me try again.
OK.
And we keep getting that until I get the right one.
And we still get this alert.
So if we get the correct one what we will want to do is change what we display in that message display
.
We want to change it to be correct.
So message display that text content
equals correct.
Just like that.
And now if we try this we get it wrong and just try again.
We get it right and it tells us correct.
OK.
So we have that basic logic in there now where we're checking if we're right or wrong and we're displaying
something.
The next thing we could do is add the feature where when you get the right answer all the squares change
color to match that answer.
So here you click the right answer they all change degree.
And then we can also do the background of this H1 as well.
So the first thing we need to do so to make this work.
I'm actually going to write a separate function to do it for me just to keep my code a little bit more
organized.
Change colors and it will take a single argument a color string and then inside of here we need to loop
through all squares change each color to match given color.
So to loop through all the squares we've already done that just a matter of four VAR I equals zero is
less than color dot length or colors that length plus plus.
And then inside is where we'll need to change each color and we've done that before already.
It's just a colors.
I got style tough background equals color which is what we provided technically our code will change
every single square to match the color.
So including this one which is the correct color.
It will just overwrite it and change it to the same color that it already is.
We can add some code to fix that but let's just start with this and then we need to call this function
change colors and we need to pass in the correct color which is the variable we created up here which
is the styled background of the color that was clicked.
And we're doing this.
If they guessed it correctly.
So if we save and refresh see if we have any errors.
Nope.
And now it's quick.
Wrong.
Correct and we have a problem when you click on the correct tells us cannot set property background
of undefined if we look at what it's talking about colors I style the background.
Of course we have a problem here because I'm doing this to our colors array and this should not be our
colors.
This is our colors array.
It should be on the squares array which is the squares that we're trying to change.
What I was doing was the colors array just the strings.
So squares out length and now it should be good to go and they all change to the color that was picked
just like that.
All right.
So next up let's focus on getting the random colors in the array and then picking a random color from
that array.
So I'm going to start with the second thing which is picking a random color instead of just automatically
making it colors three to help us pick a random element from this array.
I'm actually going to make a function.
And the reason I'm doing that is one to clean up our code but to we're actually going to use that function
later because every time that we start a new game we have to pick a new color.
So it's something we're going to have to call a few times to make that work.
I'm going to start by calling the function that doesn't exist just yet.
So I'm going to say pick's color equals and let's name it.
Pick color and then we need to define pick color.
So I come down here just do it at the bottom for now function pick.
Color in this function we need to do two things.
One is pick a random number.
So something like 0 or 1 or 2 all the way to the last index of this array.
And then we need to use that number to access the color out of this array and return that color.
So we'll start by picking a random number.
And the way that we pick a random number in javascript is using math random and math out random will
pick a number between 0 and 1 and it doesn't include one.
So let me show you that math not random
and it's a long long decimal.
So if we wanted to generate a number between 0 and 6 for instance to mimic a Dayrell we would do math
at random and then multiply it.
In our case if we did just dime 6 we actually would never get a number above five point nine nine nine
nine.
So if we want that number to go from one up and tell six we could multiply it by six and then add one
at the end.
Now we can get as high as six point ninety nine and to get a whole number.
We then need to chop off that decimal so we can use math top floor which is another method and that
will just take whatever is returned from math out random multiplying by 6 adding 1 and then remove everything
after the decimal point.
And that gives us random numbers between 1 and 6.
As you can see but we don't necessarily want just between 1 and 6.
This array eventually might only have three items.
As you can see when I go to easy mode there's only three colors.
So it might have three and might have six.
So we're going to just use the length of the array to generate our color so it will look like this math
thought random we're going to generate a number between 0 and 1 and then multiply it by the length of
the array and that's OK because remember that it's not inclusive.
So even though the length of the array is one more than the highest index.
So the length is six.
But the highest number we want is five.
Because random number only goes between 0 and 1.
But it doesn't include one we're in good shape.
So we're going to generate that and then we're going to do math that floor of that whole thing which
will chop off the remaining decimal point and then once we have that done that gives us a random number
.
The next thing we need to do is save this to a variable and then use that variable to access an element
from the array at that index.
So then we're going to say return colors random.
So this picks a random number like three and then it returns colors of three.
All right.
So let's test this out.
We have pick color.
We're calling pick color up at the top here.
So if I refresh we should expect this to change and it does change as I refresh.
You can see sometimes you get the same one because there's only six and they never change but it changes
almost every time.
Now let's check if our quick logic works the same way.
So if I click this one is zero red zero green and all blue.
So let's try clicking on red cyan.
Good.
If I click on blue it's correct