All language subtitles for 9. Coding Challenge #1

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.