Welcome back.
In this video we're going to focus on adding the easy and hard buttons here that will impact the difficulty
of the game.
So when we load the page up hard is already selected and we see six different buttons here or six different
squares.
And then I can click on easy and that remains selected.
And we only have three squares to pick from.
And then I can go back to heart.
We're going to start by adding in the two buttons that we need.
So I'm going to go into my HMO and add in two buttons.
The first one we'll say easy.
The second one will say hard and will refresh.
OK.
And that looks fine for now.
You'll notice our span isn't taking up any space yet.
And I see there's some text shows up.
It pushes those buttons away will focus on the styling later but there is one element of the styling
that I do want to focus on which is making it look selected when the page loads or when we choose easy
or hard the corresponding button should stay blue.
And the way that we do that is using a class and turning that class on and off.
So I'm going to define a class here and it's going to be simpler than this style styling here it's just
going to be a color.
So our background color and the class is going to be called selected because that's what we're doing
.
We're adding the selected class to the button that is selected.
And it's just going to have a background set to you to start.
And then what we're going to do is just give the hard mode button class equal selected.
And if we refresh on our code you can see that hard is engaged.
It's hideous Yes but it at least shows us that we're on hard mode.
So then what we want to do is add the code that's a switch that when they click on easy and then the
trickiest part is showing the three colors when you click on the easy and the six colors when you click
on heart.
OK.
Let's get started here.
So to make these buttons actually work we need to select them in our javascript and then have some quick
listeners and do some and run some code when each of them is clicked.
So let's make it easier to select and I'm going to start by giving them each an ID easy.
DTN and then hard ETN and we will be changing this if you're seeing any red flags here or if you're
thinking we're using too many ideas.
We will be refactoring this in just a few moments.
But we're going to start with two different IDs.
Easy Button hard button.
Go to our javascript and select them.
So var easy ETN equals document doc query selector with Octa.
Easy ETN.
Make sure that we capitalize things the same.
There we go.
And the same thing for hard and I don't know if you caught that in sublime.
If you select the word easy and you hit Kamandi it will then automatically select the next instance
and I can keep doing that to select all of them but I just want these two and I'm going to type hard
instead.
So we have two buttons and then we can do something like this.
Easy PTEN add event listener.
Click and all we're going to do is just alert that the easy button was quit just like this.
Alert easy button clicked and make sure that that works.
So we refresh click on Easy OK says Easy button clicked and then we'll duplicate this for hard button
and we'll say that hard button was quit and refresh easy still works and hard but it tells us that the
hard button was clicked.
So rather than just doing that let's work on getting the class the selected class to reflect which one
is selected.
So if we click on the easy button all we want to do is easy button.
Doc class list add selected and if we refresh now I click on easy.
It has a selected class.
Easy but the problem is that it still remains on the hard button so that's easy to fix.
We just want to have a hard button doc Cross list dot remove it and now if we click on easy the hard
mode goes away.
But if we click on hard we still don't have that logic so we can fix that by just copying this code
over and we'll now have hard buttons classless that add selected easy button class list that remove
selected.
OK let's test it out.
All right.
So we now have the easier part done which is the two buttons showing which one is currently selected
and I refresh and hard is automatically selected because we do have six elements.
Next up we need to add the logic to actually change the difficulty not just the style of these buttons
here but to only show three elements or six squares.
So we need to do that next before we get started.
Let's check again on the solution to see how it works.
So if I refresh and I click on easy notice that we get new colors and we have to do that because there's
a risk that I have six colors here and the color that is selected here might be one of these three that
when I click on easy those three are removed.
So that could be a pretty game breaking bug.
So rather than deal with that we're just going to pick three new colors.
So the process is we refresh that.
So the process is when I click on the easy button we're going to generate three new colors for the colors
array are going to pick one color from those three.
We're going to update that appear with a picked color.
We're going to update the three squares here.
And the important part is that we also hide the three other squares so we don't delete them we just
hide them by setting display to be none.
And then same thing goes for hard.
We generate six new colors in the colors array.
We pick one to be our picks colored.
We display that up here.
Then we show the three squares at the bottom and then set each one to have a color.
OK.
So let's tackle this now.
First of all when we click on the easy button let's start there.
We're going to want to generate new colors so colors equals generate random colors this time 3.
And then once we have that done we're going to want to pick a new picked color so picked color equals
pick color just like that.
So once we have our colors and our picked color we can start by just changing the display up here to
show the new picture color.
So that's as easy as saying color display text content equals picked color.
And if we refresh I'm going to get some new colors here just to show you a few things.
When I click on easy as you mentioned before the color is changing and behind the scenes there is a
colors array that changes as well.
So let's look at what colors is right now and then I click on easy mode and I look at what colors is
again and it's different.
And it also picked color is different.
So now let's talk about how we hide the three bottom divs when we click on easy mode or we can hide
the top three.
It doesn't matter.
But I'm going to do the bottom three the way that we'll do that is by looping through and setting the
bottom threes display property to be none.
So let me show you how that works.
I'm just going to pick one of them.
So let's do a document query selector all square or a square and then work with the fifth one.
Well actually the sixth one with index of five and then set that style display to be none.
And you'll see that it disappears.
And then if I want it to come back which I will if we click on hard mode I just need to say style.
Display equals lock.
All right.
So let's go ahead and implement this in our code the way that will achieve this is by looping through
all six at first.
And for the first three we're going to give them a new color.
And for the bottom three we're going to hide them.
So rather than having two loops to do that we'll do it at once.
So for var I equals zero.
I just less than squares out length.
Plus plus we're going to take advantage of the fact that colors has three items in it.
So we're going to do something like this if colors I.
So if there is a next color so this will happen on the first three.
We're going to write squares I style the background equals color.
So for the first three in our case because colors only has three items we're going to loop through all
of the squares and check if there is a color at that index.
And if there is we're going to change the color of those first three.
So let's let's make sure that works.
I click on easy and you'll see only the top three are changing.
So we're close.
All we want to do now is hide the bottom three.
So we'll do that with else.
Squares I style that display equals none.
And if we refresh and make it full screen if I click on easy mode you can see that we lose the bottom
three and the colors of the top three are changing.
And let's try to figure out which one this is.
So hundred sixty three red 125 green and a little bit of blue.
There we go.
You can refresh try a few more.
We do have one small problem as I refresh some of these and I click on easy mode.
We're only generating three colors here.
But if I click on the new colors button so I'll show you what colors looks like right now.
It's three items.
If I click on new colors though and then I look at colors.
It's actually six items and that's because we're not keeping track of which mode that we're on.
So that code is right here on the reset button.
We're just saying colors is equal to generate random colors.
So we need to fix that eventually.
But before we do that let's get our hard button so that it sets us back to six squares and each one
has its own color to do that.
I'm going to just take some of this code and duplicate it down here which is always a bad sign.
And that's why we're going to refactor this in just a little bit.
So the first thing I want to do.
I'm just going to copy all of it into our hard button event listener colors.
It's going to be six colors picks color will be the same color display text content is the same.
And then we're going to loop through all of them in this loop.
We need to do two different things.
The first is to assign a new color to every square.
But we also potentially need to make sure that the three are unhidden at the bottom.
So we're going to get rid of the if statement for now and we're just going to set all the squares to
have a background color to be colors.
And all the squares will have a display of block.
So this is a little bit wasteful because we only need the last three technically and we're resetting
all of them to be display block.
But that's a really minor thing we can focus on later.
So let's just see if this works refresh tells us we have a syntax error on line 36 Let's see what we're
missing.
And we just have an extra curly brace here.
So if we save now and refresh we have six colors like we always have.
If I click on easy we get three.
If I click on hard I now go back to six.
I get a new color up here and let's just make sure that that keeps working.
So easy hard easy hard when I go to hard mode.
Let's click on new colors again.
Go back to easy go back to hard easy and hard.
All right.
And let's play this and see if it works.
So pick color is 196 170 57.
So a lot of read a lot of green and a little bit of blue.
So that's a lot of red and green is a yellow color.
So it's not going to be that one or that one.
That one is going to be this one real quick and that looks like it's working just fine.
If I click on easy again we go back to three colors.
The most pressing issue facing us though is when I'm in easy mode and I click play again this is going
to generate six colors not three and it's going to pick a random color out of six which may not be displaying
to us which is going to be problematic to fix that.
All we need to do is have a variable that keeps track of what mode that we're on.
Easy or hard or the number of squares three or six.
So we'll do that up here.
We'll have a variable called number of squares and that will start at 6 and we'll just declare that
up here and say colors equals generate random colors of number and let's make it number of squares or
squares.
It's a little easier
like that and save.
And then we need to replace that in a few places.
So when we click on easy mode you want numb squares to be three and then we generate random colors with
no squares.
And then further down when we click on the hard button we want some squares to be 6 so numb squares
equals six and then generate random colors squares and then there's a few other places right here when
we click on that reset button.
We want to generate the correct number of colors which would be Nahm squares there as well.
So that should take care of it for us if we go back and refresh.
We go to easy mode and let's win this one.
So mostly red a little blue.
Not this one.
Not that one.
There we go.
And if I click on play again let's make sure when I type colors we only see three colors.
And if I looked at picked color hopes picked a color you can see it's inside of the colors array.
So we don't have to worry about that anymore.
Our logic now works