All right, everyone.
So now let's add life to our project, and let's build a logic
for changing the values and changing
the behavior of the scores.
Violate press buttons.
So if I press them now, they won't do anything.
So now let me just create a JavaScript file so that when we script ideas.
And let me just add it to my HDMI.
And so inside, after this do, I will be giving a script
and basically I need the source tag as well.
So we have it for a script.
I think as see R.i.p.d.
as source, I just forget it, I can't remember it.
So let me just and I did like script and as has r C
and so this would be script for days
or days and that's fine.
Now let's date in our JavaScript.
So the first thing that we need here is
we need to select all of these buttons.
So whenever I click this way, then we are making some changes.
So first of all, we are selecting the first button.
So we went for the first button and this will do like,
we need to select using query, select as a document
or a query selector
selector and how we are selecting using it.
So the idea for the player and button is beyond B.
So this is it.
This is going to take me a lot of time to write
so you can what you can do is you can create your own custom snippet.
We are learning how to create custom snippet.
You can make this a tab stop and you can make this a tab stop.
And that would be very easy then, to write these kinds of statements
for documentary selector, you can set the pretext to be devtools.
So that would be assignment for you and you can show me how you have written this.
So now let me select the other button.
So Konst and PETA and document dot select selector.
So basically I will be fast
forwarding this thing because I am doing it again and again.
boy, I have just finally done it and I have selected
all of the things that will be changing their value.
So the first within the second button, the reset button on the player one score,
this is the player and score the player to score and the winning score.
Now what we need to do is we need to see the first event listener
that our player can select, the first even listener
that someone can select as the winning score.
So we need to add even listener.
But before that we will be specifying some values.
Like we can specify the current player one score.
So B1 score
really determined the current player score and initially this will be zero.
The P score will determine
the current player to score and this will also be zero initially.
And the winning score.
We need to give it our default winning score.
If someone does not select a winning score,
then the default winning score will be something like five.
And now we can also set up a variable like a late letter,
and now we can also specify our variable,
which will determine whether the game is finished or not.
So this would be like is game over
and we can initially set it as follows because the game is not over
and now we can add our event listeners.
So the first event listener should be for this winning scoreboard selector.
So let me add it as a winning score and the evolution
will be add event listener and on change we are going to do something to this.
So on change we need to write the function.
I will be doing arrow function here and we are setting now
winning score because on change we will be getting the winning score
and the actual winning score.
So let's set the winning score as our value that we get from it.
So the value that we will be getting is a setting and we need to change it to end.
So I will be using bars and, and the value that we get from it.
So when s and value will give us the value for this,
and after setting the value, basically after suppose second or third trial,
you have this a score something like five or ten
and awesome one would be winning and someone would be losing.
So we need to reset the things and we need to write a function for it.
So let me just declare it as it
said, fun, and we will write the function for the same a bit later.
But before that, let me add the event less note
for my player and and player to button.
So player one B When is that player When Bonanza.
Player one And what activity?
Listener And here on the click I will be adding a scores
so I will be writing a function here and on click
what this will be
doing is it will send the player one score.
So P1 score would change so I can write a function
like said a score and this will change
or this will give a value to this player and score.
So I will be passing the current player.
One score to this function as a parameter.
And let me write if statements that if the player and score
is equal to winning score and then the player win will win.
And if it is not, then we can keep on adding the scores.
So if player one score is triple equals
or P1 score as Republicans to winning score
winning score, and then what we can do is all we need to.
First of all, let me show you how we need to make it
the winning winner to be all we need to make the winner to be green like this.
Let me show you.
We need to set a value.
Three We need to make the winner R to
show green color and loser to show a red color.
So how we can do this is we can add a class list here.
So we can add a class list or something like I like
we can define a class in our cases file and let's say the class says winner,
and here in the winner
we will have a color of red.
And here we can also define the class as a loser
and how in the loser we can and the color of our basically,
we need to add a color of green for winner and a loser.
Right.
So now let's move to the skip file
and we will be adding the winner class list for this.
So winner I think I have named it correctly Winner
and we need to add the loser to be two.
So p do as well.
And this is player one school because we need to make this to be
red and green.
So we have said we want as to be player
one score and B to ask to be player to score.
So B-2s was classless and we can add the class of loser
to this.
Yeah, so far so good.
So now we have to do the similar thing for player two.
So what I will be doing is I can simply copy this line of code and I
can paste it here and I can effect the I can change point went up to here
and the P1 score, not B to score and B to score here.
And P2 score is equal to winning score and we will add
B to class list as winner and P1 class list as loser.
Right now we need to
add our functions here.
So the first function that we will be adding is the said score function.
So let me write this function.
So let me write it as an added
function commands said score.
And here we will be passing a parameter of score
to this and inside this function on the wave.
If all we will specify if the game is an Aldo post.
So if the game is over then we don't have to change the scores.
So the game is not or if not is, game is not over,
then what we will be doing is we will be incrementing the scores.
A scores will incremented by one.
So scores plus equals one and the F winning score
is equal to the current score.
So if current score is equal to
winning score, then what we will be doing is we will be
adding is game over to be true
and after that we will return that score.
So we will return the score from our return
score.
And suppose this condition is false.
So suppose this condition is already made that the game is over,
then we don't need to increment the score.
We can send back the original score all the data has
so that on the score that is the winning score.
Great stuff.
Now we have to write this a vs said function, so let's write this.
And he said function and basically I'm going to copy
this reset function from my final version to save time.
So let me open this and here in this we have this reset function.
So let me just copy it
and let me just simply place to do so in this reset function.
I am changing the is game variable to be false player and paid score to be zero.
And I'm changing this to the HDMI as well and I'm removing the class list.
So this is all what I am doing.
The last thing that we have to do is
one. Then someone
click on this reset button, then all of them should be reset.
So I need to add even less name for this as well.
So let me see.
I have added this here.
I selected the button.
Now I need to add add even listener for this.
Now on click this should this should change.
This should call the function that we have reset funds
and I think that this is it for the project.
Now let's see it is working on not a lot of things can go wrong here.
I don't know.
So the moment of truth.
Let me state the winning school will be five and let's see, it's not working.
Let me see what the problem is.
All right.
So a lot of things have went wrong in this.
And the first mistake
that I have committed is I haven't added the hair similar or not.
Next thing that I forget to add is in here, I need to also add
I need to also change the scores as I am updating it.
So I need to change the scores here as well.
So I need to add these two lines in my are list now functions.
The next and the last mistake that we have here
is that I forget to add this function, so it should be like
an error as the class list and we are adding a class.
So this should be add Now after correcting all the mistakes.
By the way,
we should also be having a final version and this version of the project
are attached to this lecture, so you can always refer to it.
Now, after correcting all the mistakes,
let me said my winning score will be something like four.
And now let's add three points to player one and three point of four point
to player two and you can see they are changing their colors.
I can now reset and those scores will go to zero zero and this is our project.
So I hope you like the project.
If you have any questions you can ask in the comment section.
And I hope that this hands on section have given you a good experience
and good knowledge of how to use, which is called forward allotment.
So in the next lectures we will be seeing the terminal of B scored
and how can we run node apps using that dominant
and all the cool stuffs of terminal that we can do.
So see you in the next lectures.