Welcome back.
So up until now everything we've been doing around events and event listeners in the dorm and dominant
relation and dumps the letters we've just been doing one off quick exercises that don't really amount
to much.
And that was just to kind of show individual pieces how they worked.
Now we're going to see how they all fit together and make a somewhat substantial app.
So as you can see this is not the most beautiful app that's coming.
We're just focusing on how conceptually the pieces fit together here how we take events how we select
elements how we write aged him how and how those all fit together.
Styling is just extra.
At this point but in the next project we make.
We are going to place a lot of focus on styling and making it look nice.
I promise.
So what we're going to make is a simple scorekeeping app.
So I want you to think back to all those times that you've been playing rock paper scissors with a friend
or ping pong or tic tac toe and it's just so tiring to keep track of the score and so difficult to know
who's winning when this app is for you the way that it works.
Two players player 1 score player to score.
You load up the page and it tells us we're playing to five.
And so all we do is add a point by clicking on a button.
So to add a point to player 1 we click on Player 1 if we want to add a point player to click on Player
2 and then whoever gets to five.
You notice it turns green.
And if I try and score again I can't.
That's because the game is over.
So I can reset by clicking the reset button.
And now a top player two totally sweep and that's it we can't play anymore.
And that quick reset.
So one more feature is that we can also specify what we're playing to.
So if you want to have a game that goes until 7:00 I can use this number input here and then all I have
to do is let's make this a closer game and player one just sneaks by at the end 4:53 and the game ends
at 7 and player 1 turns green and we can't add any more points and then we can reset again.
So that's what we're going to focus on building here.
So the first thing we want to do is get our file set up and then create the H team L structure and then
we'll go in with javascript and make things work.
So let's go ahead and get started.
So I have a blank I'll document.
I'm calling it scorekeeper dot h Timo going to add in our boilerplate and give it a title just like
that.
I then must start by talking about what we're looking at here.
So this isn't H-1 H1 and we will be changing this eventually.
We don't want it just to be a solid h one because there's two things inside of this H-1 it needs to
be like Player 1 score 2 player to score but we need to be able to select this separately from this
.
So we do want a way to divide this H1 into smaller pieces.
So we'll see how we can do that in just a little bit.
So next this is a paragraph you're playing to.
And let's just right playing to seven to start.
Or let's do five.
I think that how had it.
And then we have an input here.
This is input type equals number.
So input type equals number and that's all we need.
And then we have our first button.
Player 1 or second button player 2.
And our last button reset.
So if we refresh this page and now we open up our own page that we created.
Let's take a look.
They look pretty much the same.
Zoom in a little bit on this one that looks just right.
Of course nothing happens when we click on anything.
So now let's go in at our javascript in.
So I'm going to create a new file I'm going to call it scorekeeper J.S. and like I always do or add
my alert here that is connected.
Then I'm going to go over to scorekeepers or h t m l and include my script and I'm going to do it at
the bottom here to start.
So script type calls javascript source equals scorekeeper.
Yes just like that.
Now if we refresh.
This is my version of the page it tells me javascript alert connected.
All right.
So we have our e-mail set up.
It looks great.
What we need to do now is get some javascript code that actually add some functionality.
And as always we need to start by selecting the different elements.
So let's start by selecting the buttons and let's just do the player one and player or two buttons and
the first feature we'll focus on is when we click one of these buttons the score should increment up
here.
So all we need to do is start by selecting that player one button and if we look it's just a button
we may want to add in ID so we'll call this one and done here we'll add one for P2 and then we can also
add one for the reset that we'll just call reset.
So we have three ideas now.
So it's much easier to select.
We'll just call it VIP one button equals document query selector.
Or we could do get element by ID.
I will mix them up here so the first one will do with query selector P1 and then P2.
Button will be document dot and we'll do get element by id and we don't need that Octa Thorpe anymore
.
So that gives us the two buttons.
And let's just set up our first listener when we click on this first button will alert or cancel that
log something.
So we want to write P1 button and add event listener on click and then we add our function here.
And inside that function we're just going to alert alert clicked and that's it.
So if you refresh our page and retry clicking great that tells us we selected correctly and we added
our listener for the Click event correctly.
Player 2 though doesn't do anything because we only added that to the player 1 button.
So now let's talk about how this will actually work.
When I click here we need to have some variable that's called Player 1 score or something that keeps
track of how many points.
Player one has and I click it should add one to player 1 score and then the last part is updating this
here to reflect player 1 score.
So I'm going to make a variable let's just call it 1 score and set it to be zero to start.
And then all I want to do is when we click we'll start but just always adding one to the player 1 score
.
So that will just be the one score plus plus.
Just like that.
And we refresh and we didn't see anything because we should probably cancel that log.
He won score first rather than alert.
It gets very annoying very fast if we refresh now and open up the console and McCook player 1 score
and see how it goes.
One two three four five and it's going to keep going.
So there's a few problems.
One is we're not displaying the score here and two it says we're playing to five.
And that's obviously not the case because we're just incrementing it as much as we want.
So we need to have some logic that says if greater than five game over or something like that.
But let's start by figuring out how we can update this H1.
So what we could do is just select the H-1 to start.
So let's just call it far.
H1 equals document that queries selector H-1 just like that.
And then inside of here we'll just say H-1 dot text content equals one score just like that.
So we're going to take this one and change the text content to be whatever the score is that we were
without logging.
And if I score here well that sort of works but you can see that we completely overrode everything that
was inside of each one.
We want to keep the two and the other score.
We just want to change this one number.
So there's a way of doing that using some extra h to a male that makes her life a lot easier if we go
back to our scorekeeper but each time l we're going to introduce a span element.
And the way that the span will work is that it will only wrap around the number the score.
So what that means is we can now if I inspect this.
Nothing looks like it changes and that's the point of a span.
It's just day nonintrusive if you will it's just a way to wrap something with some tag that you can
then use later or styled differently or select with javascript which is exactly what we'll do if we
look for H-1 but right here we now have a special span wrapping that number.
So if we select that span and change that span only We'll still have the tío and our spacing correctly
and the other score.
So we want to select that span and going to again just do an ID here.
So span and we'll just call this P1 display just like that.
And now we need to go to our scorekeeper J S and change a few things.
So we don't need to select the H-1 any more to get rid of that.
We're going to select far one display equals document get and let's do query selector just for variety
again Query selector.
And we call that P1 display so that will just give us the span and if we wanted to check that that was
working.
Why don't we just do a concert vault log right here.
Won display just to see when we load the page refresh it should print out OK.
Selected our spand correctly.
OK.
So now what we want to do and get rid of that is add one to the score.
We can get rid of our other cons. But log in rather than changing the text content on the whole H-1
.
We just want to change it on our P1 display which is this little span right here.
And if we refresh Now there we go.
So we get that player 1 display updating player 2 still doesn't do anything but we have this feature
working.
So let's do the same thing for player 2.
So I'll go back add in another span around our zero span ID equals to display and then move to zero
in between.
We refresh nothing should look different but we now have two spans.
So you can see then let's go back to our scorekeeper J us and let's add in two new variables.
So we need to display span for player to need to select it with that ID.
I'll use query selector again.
And then we need a variable for the score player to his we don't want them just to be the same score
.
Obviously we need two separate ways of tracking their values.
So the first thing that I want to do is test that our player to button is selected correctly.
So I'm just going to do a concert vault log player to button and just see what it prints out.
And if we refresh and we look at the cons. You can see something's awry.
We selected the player one button not the player two button.
So something is wrong with our selector.
You can see here we're selecting element by id P1 which is the same as what we had up here.
So we need to select P2 instead.
Ok so now that that's taken care of if we refresh we get button ID P2 which is great.
Now let's add in our listener.
So Pete to button that ad event listener click and I always like to start by just printing something
out or alerting something a log P2 click just like that refresh.
And we get P2 clicked our player one still works and P2 is running some code.
Now we just need to put the right code in there.
If we take a look at what we did for the player 1 button we need a player to score a variable increment
to start.
So far P2 score.
And that should start at zero as well.
And then we'll just come here and just change this to be P2 score plus for us and then we need to update
it in the display which we haven't yet selected.
So we also need to select that span.
Remember the span right here ID of P2 display.
So we're going to do that.
She's going to copy that line and change it to display document Duckery selector P2 display and then
we'll just change the display on to the text content to be equal to the player to score.
So let's take a look.
Click on player 1 that still works.
How about player 2 that works as well.
OK.
So there is no end to our game right now.
This would just keep going forever.
So we need to work on adding that functionality.
And the way that we're going to do that is with a variable that's going to keep track of the state of
our game.
So our game has two states.
The first one is the normal state right now where I can click where I can play the game.
And the second state would be what we might call game over where someone has one.
So we need two states and we can use a boolean to model that just that true or false.
And I'm going to call it game over so far.
Game over and it starts this false because game over.
Not true at the beginning of the game.
And then what we'll do is we'll update game over to be true or false depending on if someone wins.
So if someone gets to five game over should now be true and that should mean that we can no longer update
the score and that we have to hit reset and reset should then make game over false again and start everything
over.
So let me show you what I mean.
The first thing we want to do is add another variable.
I'm going to call it winning score.
And that's just going to be equal to 5.
So that variable is what we're going to compare player 1 and player to score 2.
So we're going to check as a player 1 score reached the winning score if he or she has.
Then we need to say game over is true.
So the logic will look like this.
Going to have an if statement and it's just going to look like if game over is not been reached yet
.
So if not game over then we're going to let you add to the score just like this.
When I run this right now you won't notice anything different.
It will work exactly the same way for player 1 and that's because game over is always false.
It never changes.
So when would we change it to be true.
Well when there's a game over.
And when that happens is when the users score so when player 1 score is equal to the winning score.
So after we add one to player 1 score we'll just check if let's do one score triples equals winning
score.
So if they're equal to one another then let's start by just saying Contador log.
Game over.
Just like that.
And if we refresh and review our Consul and I tried changing this so far this is not true so this never
happens.
This time though I add one player one score goes to five.
We're checking if player 1 score is equal to winning score and we get game over down here.
So rather than just cancel the locking game over we actually want to change this state or now.
Game over is true.
So what that will do for us I'll show you if I refresh it will prevent us from adding more to the score
because game over is true.
This little check appear.
It checks.
Is it game over yet.
And if it is game over none of this code runs.
So let's try that.
I get to five and I'm stuck.
I can't increase it anymore.
However I can go to player 2 and increase that score because our logic is only for player 1.
We'll want to go over to this player to button out event listener and add in the same logic.
So if it's not game over then we'll let you increment the score and update the display and then we also
need to check if the new player to score is equal to the winning score then it is game over.
Game over is true which means that the user neither user or player one or player two can continue to
increment the score any more.
So let's check that this works refresh.
OK we can get to five here and we're done.
Player 2 doesn't work or we can get to five over here and we're done.
And player 1 doesn't work either.