So we now have two different things we can focus on.
The first one is changing the display up here to be green on the winning player and that one is pretty
simple.
And the second one is getting the reset button to work so that we can reset and play again.
So let's start with the color change and I'm going to do that by defining a class in a CSSA file.
So I need to make a C S S file and I'm just going to call that scorekeeper.
C Ss then I'm going to link to it instead of my HDMI file scorekeeper Dotsie SS and save.
Then I'm going to go to my CSSA file and define a class and I'll just call it winter and I'm going to
say color is green and that's all we need and will save.
And just to check that it looks the way I want it to.
Let's just add it to the span so will say class equals and we'll just give it a class of winner for
player 1 display from the get go.
And if I refresh you can see we get a green 0.
That's exactly what we want as an increment.
Of course we want it to start as black and only add the class.
When game is over so we need to go back to our javascript and get rid of this.
So it goes back to black.
Go to our javascript now.
So we'll just start for player 1 and we need to check if the player 1 score is equal to winning score
.
That means that player one has won.
So in here we're going to add to the player 1 display class list.
We're going to add the class winner and that's all we have to do.
So if we refresh you'll see as I increment player 1 score and get to 5.
That class has been added.
So if we take a look here I'll inspect it.
There is no class and I keep incrementing till we get to 5.
Pay attention right in here and we get class equals winner added When we get to 5.
So we'll do the same thing for Player 2.
So if player two scores the winning score will change the player to display.
Let's check increment this to 5.
Great.
Everything seems to be working just fine.
So the next piece is getting the reset button to work right now.
If we get game over it's always set to be true.
There's no way to change game over.
So clicking the reset button needs to trigger a few different lines of code.
The first one you want to change.
Player 1 score and player to score back to zero.
We want to change the values here that are displayed in the player 1 display and player to display to
be zero and we want to remove this green class from whichever element it's on.
And then the last thing is we need to make sure that game over goes back to being false so that our
code and here can run again.
So the first thing we need to select the button we gave it id equal reset.
So we need to go over here and just select it.
So I'll do it with the other buttons so far.
Reset Button equals document dot and we'll do another get element by id and this time the ID is reset
and will save and then just to check that it works.
Do a constant log.
Reset reset button and refresh.
If we look in our console we get our correct button.
It's been cancelled got logged.
OK so we should start by adding our event listener for a click on that reset button so reset button
that event listener click at our callback function and all that we want to do to start again just cancel
that log reset clicked just to make sure it works and there we go our reset button has been clicked
.
So the logic though as we discussed we need to set.
Player 1 score and player to score back to zero.
So that's straightforward enough.
Player 1 score zero player to score is zero.
But if I run this right now where I only change player 1 score in player to score to zero and increment
so that player one wins and then click reset.
Nothing appears to happen and that's because we only change the score in javascript.
We never updated the scores on the page so those are the P1 and P2 display variables that we need to
update.
So we'll want to do one display text content and we can just set it to zero.
We could also set it to be 1 score.
They should both be zero.
So same thing Pete to display text content is zero.
If we refresh now and we get to 5.
They both go back to zero.
So let's get a closer game.
And click reset both go back to zero.
Next up let's remove the winner clause.
Will this do it the easy way by removing the winner class from both.
So we won't even check which one has it.
We'll just remove it from both.
It's just a matter of one display.
Class lists remove winner.
So that will get rid of the clause and will also do it on to display.
So whichever one has it it doesn't matter because we're removing it from both.
So now if we play a game we get a winner.
I click reset.
They both go back to just a blank plain text.
But as you can see I get to five.
I click reset button still don't work.
And that's because game over is still true.
And so none of our code instead of these events is going to run.
So the last thing we need to do is set.
Game over back to false and that should enable us to keep playing.
So I will refresh incrementals.
Let's get a game over.
There we go.
I can't play anymore.
I click on reset and now game over it's back to false and I can play again and then keep going.
So that's the core functionality here.
We have almost everything done the very last thing is getting the playing to number or the winning score
to be a variable.
So it's not always just five.
So we have this input and we want to use this so that when I change this to be seven this says playing
to 7 and our maximum or our winning score is seven rather than five.
So we have a few steps to get there.
The first thing we need to do is select this input as you can see we have input type equal to number
.
It's the only input on the page.
So we don't necessarily have to give it an ID or anything.
So I'm going to go over here and just select it with my other selectors var.
Let's just call it no input equals document and there's a lot of ways of getting it can do document
that query selector input.
We could also specify only where.
Type is equal to number because there could be other inputs.
In our case I'll keep it simple.
There's only one input.
So this will work just fine.
OK.
So we have that input selected.
So now let's add an event.
So what we want to happen is that any time this changes the value or that number changes we want this
to update and we want the winning score variable to update as well.
So what we need to do is add an event.
So we'll just go numb and put Dot had event Lessner click just do it this way here.
Function and all do an alert.
Clicked the input and what you'll see is that actually a click listener is not the best tool for this
job.
Because yes we can change the value with a click like I just did there.
But I can also hit delete and type a number myself and no event was fired because I didn't have to click
.
So if I use the little buttons here a quick event fires.
Otherwise if I just use my keyboard we don't get a quick event.
So there's another type of event that's much better in this case which is called change.
So a change event will run any time the value changes and it doesn't matter how that value changed.
If it was because I clicked or hit the delete key.
So let's actually change the alert here to say changed the input and then refresh.
And if I click here to change it it tells me you changed the input.
But if I delete and I type a number which doesn't involve clicking it also tells me that I change the
input so that's great.
This is the event we want to use the change event any time the value changes we want to update this
number here and we also want to update our winning score so that our game continues to go until we hit
that new winning score.
Hopefully this is not our actual winning score.
Definitely long game of rock paper scissors.
So the first thing is updating this value here.
So just like before we need to select it which it's a paragraph.
So we need to select our paragraph and I'll just do a VAR paragraph equals document that query selector
tag.
And then in this quick event we'll just change that text content and we'll just start by just changing
it to say clicked or let's say value changed.
Just like that and refresh.
Now if I change the value that paragraph changes to say value changed but this is our same problem we
ran into earlier with the H-1 we don't want to change the entire paragraph.
We only want to change this small portion.
So what we want to use is actually another span.
So we'll go back and we'll add a span around the number.
And this is a perfect use for a span where again we can use it to target just a small portion of an
element not the entire thing.
And I'm actually not going to give it an idea this time just to show you another way of selecting it
.
So just remember it's a span instead of a paragraph.
And it's the only one like that on our page.
So we'll go back.
So rather than selecting the paragraph let's create a new variable and we'll call it winning score display
and it's going to be document queries selector.
But rather than just span because there are other spans on the page we want to select spans inside of
paragraphs.
So that's all we have to write.
P space.
Span.
And we'll save.
And now let's go ahead and update the winning score displayed on here instead of paragraph.
So winning score display like this.
And it's still not going to be perfect.
It's only going to update value changed every time but at least it's not updating the entire paragraph
.
So the next step is getting it to update to display the number that's inside the input so that the values
are sync together.
So we haven't actually seen how we get the data from an input.
How do we get the current value.
I'm going to show you here by selecting the input.
So document that query selector and we're going to do it in the console input and I'm going to save
it to a variable so call it var input document taqueria select your input and then we'll do an input
daat value.
So that value is going to be a string of whatever is contained in this input whatever the value is.
So if I change this to 7 and I run the code again I get 7.
If I make it a huge number and this time I do it again it reflects whatever value is inside of this
input.
So we're going to make use of that by changing this instead of to the string value changed.
We're going to change it to be Nahm input dot value so that will take the value from here and change
the winning score displays text content.
So we refresh and I update this and you can either now in sync together.
So as I update this to be one to three my playing to or the winning score display also updates to 1
to 3.
So of course we're not playing to 123.
We're still playing to five.
And that's because our logic isn't reflecting this new input value all that it's reflecting is our original
winning score of 5.
So we also want to change down here are winning score to be equal to numb input value and save.
And now let's try changing this so we're playing to three and we click and you'll notice we get some
weird behavior.
So it didn't even stop at five.
It just keeps going forever.
So this is a fun bug that has to do with different types of data strings and numbers and comparing them
double equals versus triple equals.
So to get to the bottom of it let's do some cons. logging.
So we know that the crux of all of this is this line here or this line here where we're checking if
the player has one if the player's score equals the winning score.
That's when we set game over to be true.
And that's not happening right now because game over.
If we change the score.
Game over is never changing.
It's always false.
So something's going wrong with this line.
So let's do a canceled out log and we're going to do two things.
Let's just print out the player 1 score and we'll print out the winning score and we can separate them
by commas and they'll just print them on the same line.
Just a quick note using Comstock logs is how we're going to debug for now but we will be talking about
more advanced ways of debugging later on.
So I'll refresh and if we start we take a look at increased player 1 score and you can see that we get
three and we're comparing it to the number five.
So player 1 score is three winning score is five.
But as soon as I change this to be let's say 7 and now I click.
Player 1 we're now comparing player 1 score which is the number four to winning score which is the string
seven.
So refresh again if I just start with five.
It works just fine.
But if I change this and now we compare it to number and the string and that's not going to work for
us because we're doing triple equals here.
So we could do double equals but you know I'm not a fan of that.
So what we're going to do instead is go down here and just take this and put that value and turn it
into a string.
So number just like that capital and number and then pass in and put value which will then turn it into
a string and set that to be winning score.
So we were fresh.
Now this works just fine.
We get to five but if we also change this to be to our game is over at 2.
There is one small issue we need to focus on which is if we're playing a game to five which is what
we started out doing.
And if I decide halfway through that I want to change the winning score at the maximum score.
Our code right now doesn't handle that very well because if I change this now we're only playing to
three.
We have two different ways of handling this.
The first one is resetting the score and everything back to zero.
And the other one is continuing to play to five.
But what's actually happening is that we're playing to three but we've already passed three.
So because we already passed it our code doesn't really work anymore because we are lying it's just
checking is player to score equal to the winning score.
It's not checking if it's greater than the winning score.
So if we could change that.
So it says if it's greater than the winning score then game is over and that's fine.
But I think the better solution is to reset to zero whenever we change the maximum score because we
had never really changed the maximum score halfway through a game anyways we would want to start the
game over and the other reason that I want us to do this is it's a good use case for a short refactor
.
So when we change the score here are the winning score.
We want to reset the game which is the same logic that we're running in here.
So we'll do that very simply just going to copy this code out and make a new function called reset.
So function reset just put all of this code in there and then once the number input changes we're just
going to run reset.
So you'll see I reset here playing to five.
This works fine.
We get to five.
I click reset and we haven't called the reset function inside of this event listener so we need to add
our reset function call.
And now if we refresh we get to 5.
I click reset.
That's all good.
And now if I'm in the middle of a game and I change the score it also resets us and now we play to 1
.
And it works.
Or if I change.
So we're now playing to 7.
It resets us back to zero.
So if I decide you know this is actually a game going to 2 instead it changes the spec to zero.
And we don't have to worry about how to handle it.
If we change halfway through.
So what we're doing is just resetting made a separate function to dry up the code rather than duplicating
this here and down here.
So that's it for now.
That's all we need to do.
Some of you may be wondering if this code is really the best way that we could possibly do this.
The answer is No.
And if you take a close look you'll see that it's extremely similar.
It's basically the same except we're doing one up here and P2 down here.
But every other word is the same.
So there are more advanced ways of refactoring this of making this a little bit better.
But I'm not going to do that here because all I want to focus on is conceptually how we can take javascript
event listeners selectors dominant relation and interactive HD IMO and that's what I want to focus on
.
But just know that we will be seeing ways to make code like this look a little bit better be a little
bit shorter.
There is one thing that we could do down here and put that at event listener.
We could just replace numb input here with the word this is a minor change but we can do that and just
shorten it up the code a little bit.
So if I change this we're now playing to three.
Everything still works exactly the same.
I just used the keyword this which refers to whatever the event was listening on which was number input
.
All right so that's it for this lesson.
As I mentioned in the next project we're going to build something more substantial and I promise it
will look a lot better than this did here.