OK we'll come back in this video.
We're going to work on a few new features.
The first one is when I win the game.
It tells me correct.
And then I can click play again to get new colors and if I haven't won yet.
But I also want new colors because for some reason I don't like the colors that I have.
I can also click that new colors button.
So basically we need a button that will reset the game pick new colors pick a new random color appear
out of the six random colors and we'll come back to the easy and hard mode last.
So this button it does the same thing.
The text changes though if we've won the game and it asked if we want to play again so we can click
play again and that will reset it.
But I can also click new colors and that will also reset it.
So that's what we're going to focus on.
And to start I'm going to go ahead and add in the button and add that stripe that goes across so that
stripe will contain this button for a new color or for play again.
And it contains the message that we already have.
And then the two buttons that we'll do later.
So if we go the first thing we need to do we already have a div I'm just going to give it id of stripe
and then we can use that.
And then we already have our span inside that will show something like correct or try again.
And inside here we'll just add our button and this button will start by saying new colors we can save
we refresh.
OK that looks about just as bad as you would expect.
Let's go ahead and add the white background color and center everything in this div So our div is called
stripe.
Let's go to our C Ss and we're going to select Strype which is an ID.
So we need to use stripe with an afterthought.
And we're going to set a background color background to be white.
I'm going to set the height to be 30 pixels so that we have a nice and tall div are relatively tall
div and I'm going to set text align to be Center.
And now if I refresh you get a white div goes all the way across.
It's a little bit taller than it was.
We have a button in here just in to anything.
And if I win or lose or get the wrong answer there's a span you just can't see it.
And that's because the text from that span is white.
So what you might think about doing is going into our stripe the div and saying the text color should
be black but unfortunately that doesn't work.
And this is an issue of specificity because we're saying that with this line right here everything inside
the thing with the idea of stripe should be black text color black and you would think OK that's snidey
that is super specific if you can think back to our early C S S specificity lectures and ID is very
specific.
The thing is though this is setting the colors to be black on the div with ID stripe.
And then we're setting all spans so you can see here to be color white so that setting this to be white
and that makes it more specific because we're actually targeting the element itself rather than the
parent and having it inherit the color.
So we have a few options.
What I will do is actually just get rid of this for now.
We're not going to set the color to be white anymore and we can refresh and you'll see that this doesn't
change color it's still a white span even though we got rid of the line that said all spans are white
and that's because it's inside of an H1 and it inherits the H1 text color which is white.
Same way that this span here is black.
It inherited the text color of black or just regular colored black from the stripe div that's around
it which you can see here color black.
And that's our striked it.
OK.
So let's now work on getting this button to reset the game so to start we need to add an event listener
.
And before we can do that we need to select that button.
So I'm going to give that button and ID here we'll just call it ID equals reset and then we'll select
that reset button instead of a Javascript.
So var reset button equals document that query selector with our octave or reset.
And then as always I'd like to add my simple test event listener.
So reset button does add event listener.
Click and when we click all that we'll do is do a simple alert quick reset button just like that be
refresh.
And if I click on this I get my alert and that means we're good to go.
So next up we can actually work on the logic to reset.
So what we need to do let's write the pseudo code.
When you click on that button need to generate all new colors.
We need to pick a new random color from array and then we need to change the colors of the squares on
the page.
So to generate all new colors we actually already have that function existing generate random colors
.
So we'll just say colors is now equal to generate random colors of six.
And then we'll pick a new random color so pick the color is now equal to pick color the method or the
function that we defined.
There's one more thing we actually need to do which is change this display color to match the new picks
color.
So we'll just say change
color display to match picked color so that one is simple.
All we need to do is say color display dot text content
equals picked color and if we refresh our page and we try clicking new colors what it's doing is generating
six new colors.
We're not seeing them yet because we don't have that code.
And then it's picking one of those as picked color and then changing what we see here to match picta
color.
So it gives us a new random color up there and six random colors behind the scenes.
So the last piece is to reflect those six new colors on the page and we've done that before.
Down here we're looping through all the squares and we're changing squared up style that background
to be colors.
I so I'm going to start by just duplicating all of that here and we will refactor this.
But to start to put it all here.
So loop through all the squares squares to outflank I plus plus and then all we need to do is say squares
I style that background equals colors.
I will save.
And if we refresh and we click on new colors it generates 60 random colors.
It picks one.
It updates the display to reflect the picture color and it changes all the six squares to match the
new six colors.
So let's try it out and see if our previous logic holds up as well.
OK.
So this one is decent amount of red.
Very little green and a decent amount of blue.
Let's try clicking on some that we don't think are right.
And now let's go for one of the purples.
So it looks like a little more red the blue.
So I'm going to guess this and we're right and it looks like things are still working just fine.
Quick new colors again.
We want to reset this.
That's a really minor cosmetic thing.
But when we click on new colors we should reset the display here so that it goes back to black or to
this dark gray color.
The other thing we want to do is that when we when we want it to say play again as you can see here
so I'll win here.
This one is a lot of green.
I win and it tells me play again and it does the same thing.
Functionally it doesn't really change it's just us and different text.
So that's simple to do.
All we need to do is find where the code is to check if you win.
That's right here.
And then we just want to change the text content of that button.
So the button was called reset button.
So reset button that text content equals play again with a question mark refresh it says new colors
.
Now let's try playing one of these.
So this one is a lot of red and a lot of green and a little bit of blue.
So a lot of red and a lot of green is going to give us a yellow color.
So let's narrow down some of them.
And then a little bit of blue is going to make it lighter and brighter.
So if we try one of these like this or this one you'll see that they're not quite right.
And this is our answer here and it tells us play again.
And real quick and it does the exact same thing.
The last thing as I mentioned is changing the background color back.
So right here we can just do that at the end of the reset button.
We're just going to select that H-1.
It's one dot which we selected here.
That's dial up background.
UPS equals.
And it's that hexadecimal 2 3 2 3 2 3 which is if you forgot about that you could go look in SEE assess
the body background color.
Or we set it down here when we eliminate one of the colors if you pick the wrong color.
We change the background color to be the same as the body.
OK let's refresh new colors.
Let's win now.
Just quick randomly just for the sake of time we click on play again and it changes back to a black
background.
Or the dark gray background.
OK so that's all for this video.
Next up we're going to add the buttons to pick between easy and hard mode.
And then lastly we're going to style things so that they look nice