In this video there's a few small changes that I want to make and then I'm going to talk about how we
could refactor this a little bit.
So the first change is that when we win this game.
So let's win here.
There we go and I get this correct message and I click on play again.
It still says correct.
And we want that to reset which is a really quick change.
All we need to do is find the code that runs when we click on play again then we need to change the
span that we have here and make it just empty.
So let's go find that make this full screen.
So when we click on that reset button which is right here.
All we need to do is change our display which we called message display.
So we'll do that down here just anywhere.
Message display text ups text content equals empty string.
And let's see how that goes.
Refresh.
OK let's just click until we win.
OK so it says correct here.
And if I click on play again that goes away.
The other slight change that I want to make is that this button should only say play again once the
user wins.
So I'll refresh the page and it says new colors which is how we want it to work.
Then if I win it asks me if I want to play again.
And then if I click play again we want to change the button text to go back to New colors.
So really slight difference but I only want to show play again if the user just won.
So go into our code and we need to find the place where the user wins the game which is right here when
the user clicks on the picked color.
So when the user clicks on the right color we change the reset button text to say text content but then
what we want to do is when the user clicks on the reset button we're going to change that.
This dot text content to go back to New colors and we could also write a reset button.
But it's easier to do this because we're inside of the event listener for reset button.
And that should be good if we refresh quick until we get the right one.
We want to play again.
Sure.
Now it goes back to New colors and every time it just says new colors over and over and if I win it's
the only time that it says play again.
So one really minor thing but I find it really distracting is that when I click on one of these buttons
it has this annoying outline around it.
And this is actually our browser doing that.
And we can turn that off.
I don't know if you can see that on the screen cast but there's a blue outline.
It's pretty of noxious.
So to get rid of that we go to our style sheet and if we select our buttons just down here we can just
write outline none and go back and refresh.
Now if we click we don't get that blue outline around it.
So that's all I wanted to do for the game logic.
Now we want to spend a little bit of time refactoring your code.
So let's go back.
The first thing that jumps out to me is this code here where we have a hard button an easy button and
the listener for each one.
And they're very similar in how they work.
Except one of them will work with three squares.
The other one works with six but otherwise they do basically the same thing.
So we can actually reduce that duplication.
And rather than giving each one an idee what we're going to do is get rid of those IDs and give them
a class and they're going to share the same class.
So the class is going to be called mode.
So we'll give them class mode.
Remember a button or any item can have two classes.
They just need to be separated by spaces.
So this has class mode and class selected.
OK.
So now we'll go and delete these two buttons here and make a list of buttons called mode buttons and
that's going to be a document that queries selector.
Paul datt mode.
So that gives us two buttons.
Then we're going to loop through mode buttons.
So we need for var equals zero.
Less than mode button startling.
And what this also will let us do is if in the future we want to add a medium or normal difficulty mode
or a super hard difficulty mode.
We don't have to add extra listeners because we're selecting all of them and then using a loop versus
Here we have to manually write one for every button that we add.
OK.
So finish the loop here.
Plus plus.
And what we're going to do is add a mode buttons I dot add event listener click and they'll just leave
it at this for now.
Before we go any further I'm actually going to comment out the code just so that we can tell what's
running from our new code and what we want to happen when we click on one of those buttons.
The first thing we want to happen is for that selected class to be applied.
So right now it's only when we hover.
We get that color I want it to be when we click.
So we need to do this dot class list dot add selected just like that which is what we have down here
except we are doing it to easy button and hard button.
We can just do it to this which refers to what was clicked on.
The only issue is we need to turn it off the original one as well.
And to do that we're just going to hard code this a bit and write mode buttons zero dot class list dot
remove selected and then we'll remove it from the other one as well.
So because there's only two buttons.
This isn't an issue.
What we're doing is removing it from both buttons just to be safe and then adding it to the one that
we just clicked on.
So now if we test this out and refresh.
You can see that it only is added to the one that we just clicked on and it's removed from the other
one.
So what we need to do next is add the bulk of the logic here for these buttons.
So we need to figure out how many squares to show pick new colors and then we need to pick a new pick
to color which is the color we're trying to trying to click on.
And then lastly we want to update page to reflect changes.
So to do all of this I'm actually going to make a new function and that function I'm just going to call
it reset and this is something we're going to use in a few places because we're repeating these steps
a lot picking new colors picking a new picked color from the colors array and then updating the page
to show the new colors and updating this display here.
We're doing that all the time so I'm going to just put that all on a function.
So what we need to do inside this function is I'm actually just going to copy it from down here.
We've already done this here.
I was going to copy all this in into our Reset just like that.
And let's take a look at what's happening.
So instead of reset or generating the random colors depending on the numb squares variable and then
we're picking a new color we're changing the color displays content.
We have this text content equals new colors.
And that actually won't work because this used to be referring to the reset button.
And that was inside the event in the center for reset button.
We're now instead of a separate function called reset.
So we need to hard code that as reset button.
And then we're changing the message display to be empty.
And then we're looping through all the squares and we're updating their color.
And then we're changing the background of the 8:1 back to the blue.
And if we just call that instead of here we just run reset.
There's one small problem which is that we're never updating numb squares.
So when I click on the easy button you want to change the squares variable to be three.
When I click on the hard button you want to change it to be 6.
So to do that minute go right here and add an if statement and all we can do is write if this text content
.
So the button that was clicked on if the text content is equal to easy.
What we're going to do is say numb squares is equal to three L's number squares is equal to six.
And then we'll call the reset function which will use the numb squares as you can see here in our reset
function.
We're using some squares to call our generate random colors function.
So we need to have some squares updated which we're doing right here.
There's actually a shorter way of writing this that some people are big fans of.
It's called the ternary operator.
So I'm going to write it first and then I'll talk about how it works.
So this text content equals equals equals.
Easy question mark.
Numb squares equals three colon numb squares equals six.
So this one line here does the exact same thing as these four lines right here.
These five lines.
So it's called the ternary operator.
There are three parts to it.
The first thing is the condition.
So you can read this as if this text content is equal to easy then no squares is equal to 3 Otherwise
no squares is equal to 6.
So it's just a way of writing this.
And I'll keep it like this.
Usually if we just have quick one line if statements where we're setting one value to two different
possible options it's a good use case for the ternary operator.
We still have a problem though which is we're never actually hiding.
Or showing the correct number of squares.
So what will happen if I refresh.
We start on hard mode.
That works fine.
Everything works the same.
If I click on easy though we still have six squares here and you'll see the bottom three just don't
change colors because we only generated three colors.
So what we need to do instead of our reset function we need to account for that.
So right here instead of this loop where we're changing the color of the squares to match the color
from the colors array.
If there's only three items in the colors array what we actually need to do is hide the other three
squares.
So I'm going to write that with an if statement and I'm just going to check if there is a color to paint
.
I also do something else.
So if there is a color we're going to paint or change the background color of squares.
I to be that color otherwise we need to change squares I display to be none.
And that needs to be styled to display just like that.
And so that will then hide it for us.
So what happens if I click on the easy button I have an array of colors with three items were looping
through six squares and rechecking.
If there is a color that matches that square and for the first three there will be.
So we set the background color to be the color from the array.
But the last three colors I is going to be no.
Or actually will be undefined.
There won't be a color there.
So that is false.
And what happens is then we set the display to be none.
So I'll show you how that works refresh.
If I click on easy the bottom three disappear.
Keep clicking on easy we get three new colors.
Let's play the game.
There we go.
We do have a problem though which is if I click on a hard we're changing all six squares to have a new
Bactrim color but we're not hiding the bottom three will do to get around that is right before we give
a new background color to the squares.
I'm going to go ahead and re show them.
So it's going to be squares I thought style display equals block.
So that's how we bring them back.
And we're just going to do that to all six.
It's not a big deal.
So if we give them a background color we're just going to always make sure that they're visible first
.
So now if we refresh and they go to easy we have three play a game.
I click on hard.
Now we get six callers.
Let's play a game.
There we go click on easy and we go back to three.
All right.
So you can see we cleaned up a lot of code here.
This used to be a lot longer.
It is like three times long at least.
And two different clicked listeners and now our code is relatively versatile.
If we wanted to add a medium difficulty button all we need to do is change this line here where we would
have a nother number squares.
Maybe we want 5 squares or we want a super difficult level where we have 10 squares we just need to
change number squares and call our reset function to get the next place that we can use our reset function
is actually when we click on the reset button.
So all that we need to do there is replace everything instead of the reset button click Lisner with
just reset just like that.
So that drives up our code a lot.
We just got rid of 10 or so lines.
So let's go back save without parentheses.
Let's go to the browser and make sure it still works.
So let's play a game.
Click on play again and it resets just fine.
Let's click on easy play another game and also resets just fine.
All right.
So we drive up our code quite a bit.
They're going to get rid of these two just so you can see how much we shorten everything