Instructor: Alright, here goes the second part
for our current coding challenge.
So this time our task is to add an input field
to the html where players can set the winning score,
and then we can use the value of that in our code.
So let's start by doing that.
And I'm going to put right down here.
So what we need here in an input element.
So input, and a type of text,
so text.
We also want a placeholder here,
which tells us the final score.
And let's just call it with a class, final score as well.
Alright, so really simple.
And now we also have to style it in our CSS,
in order to make it visible.
And I'll just put it here at the top.
So the class selector, and then final score.
So this will be a bit of CSS.
I'm not going to really explain this,
I'm just writing the CSS that is necessary to style this,
also based on the rest of the code
that it already has here in this file.
So this is a nice little technique
to center it in the page.
Translate x minus 50 percent.
Okay and from the top I want it at 520 pixels.
The color's the same as the rest of the page.
Font size should be 18 pixels.
And we also need to set the font family for this one,
which is Lato in this case.
We want the text in the center.
And also some padding, let's say 10 pixels.
And we want the width to be 160 pixels.
And we also want a text transform of uppercase,
so you see that I care a lot about design.
So this really has to look the way that I want it to be.
So let's now reload and see how this looks.
So here's now our input field.
Let's just remove this weird blue border here
that we have when we focus it.
So final score focus
outline, none.
Okay, so now back to our JavaScript.
And a question to ask here
is where are we actually going to use this value?
So the value that the users write in there, the number,
where are we going to use it?
And the answer is, it will be in the part of the code
which checks if the game is finished,
which checks if someone won the game.
And this is exactly in the function associated
with the event handler, which handles the event
that someone clicks on the hold button.
So it's right here.
So right now we simply assume that the winning score is 100.
But now we want to read this value from the input field
and use that one.
Let me just edit here in the code.
So I'm going to call it input, very simple.
So I'm going to select it, using the query selector.
We know that it's called final score.
And now instead of using text content
or inner html or something like that,
I simply used the value property.
And this will give me the content that the user
put into this input field.
And just to see how this works,
let's console log this result to our console.
So input.
Alright so let's now just check this out.
We'll reload this, open up our console,
doesn't have to be this big.
Okay let's play the game and hold.
And now we don't have anything here,
because this is empty right.
So if we continue playing,
we will always have this empty here.
So now it's twice the empty,
because we already clicked to times here on hold.
Now let's put 50 here or something,
continue to roll the dice, and click hold,
and now, it's 50 down here, cool right?
So we can continue to roll and hold
and then change this value to 100.
Roll the dice, hold, and now it's 200.
So the winning score by now would be 200.
So the players can even change this during the game.
Alright so let's now use this value.
So don't need this anymore, and alright.
Now what happens if the users
don't put any input into that field?
Then we don't want to use the value right?
So we first have to actually check if there is a value.
So we need to check if the input variable is not empty.
And that's actually also pretty easy to do.
And that's because once again type coercion.
And I will actually write it down,
which is that all the values of undefined, zero, null,
or even the empty string, like this,
are coerced to false.
So if we have a condition like in an if statement,
and I'm actually going to write it.
So if we have something like this,
so a condition here,
then JavaScript will try to coerce this value here
to a true or false value, so to a boolean.
And in case that the variable that we have here
is set to undefined, to zero, to null,
or to the empty string,
then these are coerced to false.
And anything else
is coerced to true.
So if we would check this with something else,
for example with the scores variable,
so if scores, then this would return true.
Because it's not undefined, not null,
and not zero, and also not an empty string.
In this case, the value of this input
when the user doesn't put anything into the field
is actually the empty string.
So we only want to use this input
if it's not an empty string.
So when it's true, and down here,
in this if statement, we actually already have that.
So if there is an input, so if input is true,
then we want to do something.
And that something is to create a new variable
called winning score.
Winning score, in which we then store that input.
And we need to do that because
in the case that we don't have an input,
we can store something else in that variable.
So winning score is then the original 100
that we defined before.
And so now instead of always using 100 here,
we use the winning score.
And of course this variable the finishing
should not happen here,
but outside from this if statement.
So I'm just putting it here.
And alright, here we go, so once again,
when there is an input,
which means that when the input is coerced to true
because it's not the empty string,
then the winning score will be set to the value
that we just read from our input field.
But if there is no input,
then the winning score should be 100,
and we can then use that winning score down here.
So let's now check this in action.
Reload our page and input a 10 here.
So this should be a really quick game, alright.
And yes it works, so we have a winner here.
Nothing else works, so the game has finished as usual,
and so we can now try this out with another value.
So we could even start without anything holding,
holding again, and then setting it to say 20 or 25.
And we still don't have a winner,
but now we should have.
And yes, player two won the game, alright.
So challenge two completed.
For solution of challenge number three,
just go to the next video.