Jonas: So, as I just said in the last video,
let's now implement the functionality
of playing the game again.
And actually I will leave that as a challenge for you
because this is already a great time for you to practice
what you've been learning in this section.
Now, before I give you the challenge
we first need to fix something here,
which is that we should actually hide, of course,
the secret number.
So right now, as we load the page, the number gets visible.
But instead, that should of course not happen.
So we don't want this here. Right?
So this is where we set the text content of the number
to the secret number.
Instead, we want this to happen
when the player actually guesses the correct number.
So let's just cut it from here
and to move it to the situation where the player wins,
which is here.
So we display correct number
and then we also display the secret number.
And so now you see that we're back
to having the question mark.
And so let's start guessing.
So 10, that's too low.
15, that's too high.
And now it's a real game because now we no longer know
about the secret number and 12 is correct.
And so now our 12 is also visible here
and the high score, by the way, is also working.
Let's just reload the page and do that again.
So 10 is too low.
15.
18 is too high. So, 17 maybe.
So it's gotta be 16, right?
I thought I'd try it.
Oh, okay, I did something wrong.
So 13. Ah, so it's gotta be 14.
And yes indeed.
So the game itself is really working.
And so now it's time to implement the functionality
of this again button
which will basically reset here this entire interface.
So let's go to the challenge I have for you here.
And so, as I just said
the challenge is to implement the game reset functionality
so that the player can basically play again.
And then here I'm giving you all the steps
to implement this functionality
in order to make it a little bit easier
and not too overwhelming.
Now, if you don't want the steps
then just pause the video now
and try to implement it on your own.
But probably at this point
it's better to get a step by step recipe
of what you need to do.
So first select the element with the again class
and then attach a click event handler.
So that's exactly what we did before with this button.
And so now I want you to do the same with the again button.
And try to see if you can remember how to do that
instead of copying it from this other button.
Then once you have that event handler attached,
in that function restore the initial values of the score
and of the number variables.
So that are our two state variables
of the application, basically, remember?
So the variable that holds the score
and the variable that holds the secret number.
So this here should actually be secret number. All right?
Then also restored the initial conditions of the message,
the number and the score and also of the guess input field.
So basically when we click here
this here should be empty again,
here we should see the beginning message,
here the score should be back to 20,
and here also should be the question mark, as it was before.
And then to finish, of course,
also restore the original background color
and the width of this number here.
Okay?
So would just take a couple of minutes and try to do this
and I see you in a second.
All right, so hopefully you managed to do this.
Now it's my turn of doing the work.
So we start, as I said, with selecting the button.
So document.querySelector and the class is again.
So just showing that to you.
So yeah, here it is. So that is the button.
And then addEventListener.
And I'm just using auto-complete here
'cause that's how developers do it.
Then remember the name of the event is a click
and then we need to specify a function.
So this is our handler function.
Right?
And by the way,
we also say that this is an anonymous function
because it doesn't have a name.
So remember how I said before
that usually we assign these function expressions
to a variable, right,
and then the function gets a name?
But in this case, well, there is really no name
for this function, we didn't call it anything, right?
And so it's just an anonymous handler function.
Anyway, let's not go here to step number two.
And so what we need to do here
is to restore the initial values of the score
and the secret number.
So, the score at the beginning of the game
should always be 20, right?
And then we also need a new secret number.
So let's just get that from up here.
So we don't need to calculate this over again.
So we need just basically
to reassign the value to secretNumber.
So doing this same calculation here again.
Now, if we want to reassign a value to this number,
it cannot be a constant, right?
And so we need to use a let here.
So let's just copy this.
And again, without the let,
because we don't want to create
a new secret number variable.
All we want to do when a new game starts
is to create a new secret number
and then reassign the variable.
So I'm just copying what I have selected here.
And then,
down here is where I reassign this value to secretNumber.
Okay.
Next up, I want to restore the initial conditions
of message, number, score and to guess input field.
So that's again copy this.
So here, the string is start guessing.
And we basically can get this from the HTML if we want.
So this is the initial condition of the message, right?
Then we also want to change the score.
So let's just grab it from here
and that should be 20.
Or actually we can just set it to score.
So to this variable,
because that also already holds the number 20.
And so that's a bit better than to repeat the same value.
So instead, we are just referencing it here.
Not 20, of course, it is score.
Yeah, that was a silly mistake.
Next up, we also want to change the number.
So that's going to be this.
So, number and set this one to the question mark.
And finally, we also want to change the value that's here
to empty.
So let's copy that as well.
So here is where we select that.
Or actually even better,
because we already set the value before.
So, document.querySelector,
selecting the element with the guess class
and then we can simply set the value
just as we did before to anything.
And here, what we want to set it to
is just to the empty string.
So basically to nothing,
because that's the empty value here.
Remember that's the value of an input is always a string
and so the empty string is basically the absence
of any value here.
Okay, and now to finish,
all we need to do is to restore the background
and the width of the number.
So basically what we did in the last lecture,
but redo it once we start a new game.
So I'm just copying it here
and then paste it down here.
Here, the number is 222, so this dark gray.
And here, it's 15rem.
Okay, and with this we should have restored
all the initial conditions which will then make it possible
to play the game again without reloading the browser.
And that's going to be important later
once we implement a high score
because then we will be able to play over and over again
without reloading the page
which will then allow us to preserve this high score here
throughout the different rounds.
So let's just play the game
so that we can finish it and play again.
So that's too low, 15.
12.
13.
And we can also use these buttons here by the way.
And we get to correct number.
So that's nothing new.
But now when I click Again, everything should be restored.
So let's see.
And indeed, everything is back to the same.
And of course we can also do that
while we are already playing the game.
So let's just do this a couple of times.
And now when I click Again,
this message should go to what it was,
this should go back to 20
and it should also empty this field.
So you see that's exactly what happened.
Great.
So that was hopefully a lot of fun for you.
And even if you did not manage to do all of it on your own
it was still important that you tried to do some of this
because it actually was kind of just repeating
or reinforcing the stuff that we already did before.
And hopefully you didn't just copy all of it like I just did
because as you're learning, the best thing to do
is to really type all the codes on your own
because that will then make it stuck in your brain.
So in your muscle memory, so to say.
Okay?
Anyway, now in the next video,
we will then finally implement
this high score functionality here.
And with that, we will then have our game completed.