Original subtitles

1 1

So, as I just said in the last video, 2

2

let's now implement the functionality 3

3

of playing the game again. 4

4

And actually I will leave that as a challenge for you 5

5

because this is already a great time for you to practice 6

6

what you've been learning in this section. 7

7

Now, before I give you the challenge 8

8

we first need to fix something here, 9

9

which is that we should actually hide, of course, 10

10

the secret number. 11

11

So right now, as we load the page, the number gets visible. 12

12

But instead, that should of course not happen. 13

13

So we don't want this here. Right? 14

14

So this is where we set the text content of the number 15

15

to the secret number. 16

16

Instead, we want this to happen 17

17

when the player actually guesses the correct number. 18

18

So let's just cut it from here 19

19

and to move it to the situation where the player wins, 20

20

which is here. 21

21

So we display correct number 22

22

and then we also display the secret number. 23

23

And so now you see that we're back 24

24

to having the question mark. 25

25

And so let's start guessing. 26

26

So 10, that's too low. 27

27

15, that's too high. 28

28

And now it's a real game because now we no longer know 29

29

about the secret number and 12 is correct. 30

30

And so now our 12 is also visible here 31

31

and the high score, by the way, is also working. 32

32

Let's just reload the page and do that again. 33

33

So 10 is too low. 34

34

15. 35

35

18 is too high. So, 17 maybe. 36

36

So it's gotta be 16, right? 37

37

I thought I'd try it. 38

38

Oh, okay, I did something wrong. 39

39

So 13. Ah, so it's gotta be 14. 40

40

And yes indeed. 41

41

So the game itself is really working. 42

42

And so now it's time to implement the functionality 43

43

of this again button 44

44

which will basically reset here this entire interface. 45

45

So let's go to the challenge I have for you here. 46

46

And so, as I just said 47

47

the challenge is to implement the game reset functionality 48

48

so that the player can basically play again. 49

49

And then here I'm giving you all the steps 50

50

to implement this functionality 51

51

in order to make it a little bit easier 52

52

and not too overwhelming. 53

53

Now, if you don't want the steps 54

54

then just pause the video now 55

55

and try to implement it on your own. 56

56

But probably at this point 57

57

it's better to get a step by step recipe 58

58

of what you need to do. 59

59

So first select the element with the again class 60

60

and then attach a click event handler. 61

61

So that's exactly what we did before with this button. 62

62

And so now I want you to do the same with the again button. 63

63

And try to see if you can remember how to do that 64

64

instead of copying it from this other button. 65

65

Then once you have that event handler attached, 66

66

in that function restore the initial values of the score 67

67

and of the number variables. 68

68

So that are our two state variables 69

69

of the application, basically, remember? 70

70

So the variable that holds the score 71

71

and the variable that holds the secret number. 72

72

So this here should actually be secret number. All right? 73

73

Then also restored the initial conditions of the message, 74

74

the number and the score and also of the guess input field. 75

75

So basically when we click here 76

76

this here should be empty again, 77

77

here we should see the beginning message, 78

78

here the score should be back to 20, 79

79

and here also should be the question mark, as it was before. 80

80

And then to finish, of course, 81

81

also restore the original background color 82

82

and the width of this number here. 83

83

Okay? 84

84

So would just take a couple of minutes and try to do this 85

85

and I see you in a second. 86

86

All right, so hopefully you managed to do this. 87

87

Now it's my turn of doing the work. 88

88

So we start, as I said, with selecting the button. 89

89

So document.querySelector and the class is again. 90

90

So just showing that to you. 91

91

So yeah, here it is. So that is the button. 92

92

And then addEventListener. 93

93

And I'm just using auto-complete here 94

94

'cause that's how developers do it. 95

95

Then remember the name of the event is a click 96

96

and then we need to specify a function. 97

97

So this is our handler function. 98

98

Right? 99

99

And by the way, 100

100

we also say that this is an anonymous function 101

101

because it doesn't have a name. 102

102

So remember how I said before 103

103

that usually we assign these function expressions 104

104

to a variable, right, 105

105

and then the function gets a name? 106

106

But in this case, well, there is really no name 107

107

for this function, we didn't call it anything, right? 108

108

And so it's just an anonymous handler function. 109

109

Anyway, let's not go here to step number two. 110

110

And so what we need to do here 111

111

is to restore the initial values of the score 112

112

and the secret number. 113

113

So, the score at the beginning of the game 114

114

should always be 20, right? 115

115

And then we also need a new secret number. 116

116

So let's just get that from up here. 117

117

So we don't need to calculate this over again. 118

118

So we need just basically 119

119

to reassign the value to secretNumber. 120

120

So doing this same calculation here again. 121

121

Now, if we want to reassign a value to this number, 122

122

it cannot be a constant, right? 123

123

And so we need to use a let here. 124

124

So let's just copy this. 125

125

And again, without the let, 126

126

because we don't want to create 127

127

a new secret number variable. 128

128

All we want to do when a new game starts 129

129

is to create a new secret number 130

130

and then reassign the variable. 131

131

So I'm just copying what I have selected here. 132

132

And then, 133

133

down here is where I reassign this value to secretNumber. 134

134

Okay. 135

135

Next up, I want to restore the initial conditions 136

136

of message, number, score and to guess input field. 137

137

So that's again copy this. 138

138

So here, the string is start guessing. 139

139

And we basically can get this from the HTML if we want. 140

140

So this is the initial condition of the message, right? 141

141

Then we also want to change the score. 142

142

So let's just grab it from here 143

143

and that should be 20. 144

144

Or actually we can just set it to score. 145

145

So to this variable, 146

146

because that also already holds the number 20. 147

147

And so that's a bit better than to repeat the same value. 148

148

So instead, we are just referencing it here. 149

149

Not 20, of course, it is score. 150

150

Yeah, that was a silly mistake. 151

151

Next up, we also want to change the number. 152

152

So that's going to be this. 153

153

So, number and set this one to the question mark. 154

154

And finally, we also want to change the value that's here 155

155

to empty. 156

156

So let's copy that as well. 157

157

So here is where we select that. 158

158

Or actually even better, 159

159

because we already set the value before. 160

160

So, document.querySelector, 161

161

selecting the element with the guess class 162

162

and then we can simply set the value 163

163

just as we did before to anything. 164

164

And here, what we want to set it to 165

165

is just to the empty string. 166

166

So basically to nothing, 167

167

because that's the empty value here. 168

168

Remember that's the value of an input is always a string 169

169

and so the empty string is basically the absence 170

170

of any value here. 171

171

Okay, and now to finish, 172

172

all we need to do is to restore the background 173

173

and the width of the number. 174

174

So basically what we did in the last lecture, 175

175

but redo it once we start a new game. 176

176

So I'm just copying it here 177

177

and then paste it down here. 178

178

Here, the number is 222, so this dark gray. 179

179

And here, it's 15rem. 180

180

Okay, and with this we should have restored 181

181

all the initial conditions which will then make it possible 182

182

to play the game again without reloading the browser. 183

183

And that's going to be important later 184

184

once we implement a high score 185

185

because then we will be able to play over and over again 186

186

without reloading the page 187

187

which will then allow us to preserve this high score here 188

188

throughout the different rounds. 189

189

So let's just play the game 190

190

so that we can finish it and play again. 191

191

So that's too low, 15. 192

192

12. 193

193

13. 194

194

And we can also use these buttons here by the way. 195

195

And we get to correct number. 196

196

So that's nothing new. 197

197

But now when I click Again, everything should be restored. 198

198

So let's see. 199

199

And indeed, everything is back to the same. 200

200

And of course we can also do that 201

201

while we are already playing the game. 202

202

So let's just do this a couple of times. 203

203

And now when I click Again, 204

204

this message should go to what it was, 205

205

this should go back to 20 206

206

and it should also empty this field. 207

207

So you see that's exactly what happened. 208

208

Great. 209

209

So that was hopefully a lot of fun for you. 210

210

And even if you did not manage to do all of it on your own 211

211

it was still important that you tried to do some of this 212

212

because it actually was kind of just repeating 213

213

or reinforcing the stuff that we already did before. 214

214

And hopefully you didn't just copy all of it like I just did 215

215

because as you're learning, the best thing to do 216

216

is to really type all the codes on your own 217

217

because that will then make it stuck in your brain. 218

218

So in your muscle memory, so to say. 219

219

Okay? 220

220

Anyway, now in the next video, 221

221

we will then finally implement 222

222

this high score functionality here. 223

223

And with that, we will then have our game completed.