WEBVTT 1 00:00:01.510 --> 00:00:03.950 Let's no continue a building our game 2 00:00:03.950 --> 00:00:07.333 and actually implement the game logic itself. 3 00:00:09.300 --> 00:00:12.750 And with game logic I basically mean implementing 4 00:00:12.750 --> 00:00:15.100 the way how the game works. 5 00:00:15.100 --> 00:00:17.110 So we need to implement what happens 6 00:00:17.110 --> 00:00:19.210 when the guess is correct. 7 00:00:19.210 --> 00:00:21.910 So when it's equal to the secret number, 8 00:00:21.910 --> 00:00:23.210 we also need to implement 9 00:00:23.210 --> 00:00:25.700 what happens when the guess is too low 10 00:00:25.700 --> 00:00:27.330 or when it's too high. 11 00:00:27.330 --> 00:00:30.710 So basically we have these three scenarios. 12 00:00:30.710 --> 00:00:34.530 And to start we actually need to define that secret number. 13 00:00:34.530 --> 00:00:37.650 Otherwise, there is nothing which we can compare 14 00:00:37.650 --> 00:00:39.974 the guess to, all right? 15 00:00:39.974 --> 00:00:44.560 Now, where do you think we should define that secret number? 16 00:00:44.560 --> 00:00:47.750 Should we do it inside of this button handler 17 00:00:47.750 --> 00:00:49.263 or should we do it outside? 18 00:00:50.270 --> 00:00:53.900 Well, the answer is that we should do it outside 19 00:00:53.900 --> 00:00:56.540 because we only want that secret number 20 00:00:56.540 --> 00:01:01.190 to be defined once, so only when we start the application. 21 00:01:01.190 --> 00:01:04.830 And so that's out here outside of the handler function. 22 00:01:04.830 --> 00:01:08.760 If we define the secret number inside this handler function 23 00:01:08.760 --> 00:01:12.580 then on each click, we would get a new secret number. 24 00:01:12.580 --> 00:01:16.770 And so then the game would make no sense at all, all right? 25 00:01:16.770 --> 00:01:19.860 We just need one number, which we can then compare 26 00:01:19.860 --> 00:01:23.033 to each of the guesses this year on each click. 27 00:01:24.860 --> 00:01:28.060 So let's define the number, 28 00:01:28.060 --> 00:01:30.380 so I'm just gonna call it number here. 29 00:01:30.380 --> 00:01:34.490 And now we need a random number between one and 20. 30 00:01:34.490 --> 00:01:37.260 And this is actually pretty similar to the dice roll 31 00:01:37.260 --> 00:01:40.223 that we did earlier in a fundamental section. 32 00:01:41.120 --> 00:01:44.733 So we use math.random, 33 00:01:45.770 --> 00:01:50.680 and so math is basically an object that JavaScript gives us, 34 00:01:50.680 --> 00:01:53.380 and on there, we have a lot of different methods, 35 00:01:53.380 --> 00:01:55.900 and random is one of them. 36 00:01:55.900 --> 00:01:59.683 And it gives us a number between zero and one. 37 00:02:00.670 --> 00:02:02.020 So let me show that to you. 38 00:02:02.860 --> 00:02:06.230 So whenever I run this, it will give me a new number. 39 00:02:06.230 --> 00:02:09.120 And it's always different from the one before. 40 00:02:09.120 --> 00:02:12.670 Now if I want a number between one and 20, 41 00:02:12.670 --> 00:02:15.830 I will start by multiplying this by 20. 42 00:02:15.830 --> 00:02:18.560 And so now we have this decimal number here, 43 00:02:18.560 --> 00:02:22.720 basically ranging between zero and 20. 44 00:02:22.720 --> 00:02:25.970 But all this decimal here is just noise, 45 00:02:25.970 --> 00:02:27.800 so let's removed that. 46 00:02:27.800 --> 00:02:31.363 And for that, we use math.trunk. 47 00:02:32.220 --> 00:02:34.560 And I'm doing all of this here in the console. 48 00:02:34.560 --> 00:02:38.920 So you can see how this is building up, okay? 49 00:02:38.920 --> 00:02:43.370 And so now I have a number which goes from zero to 19. 50 00:02:43.370 --> 00:02:46.980 Because the result of this here will never really include 51 00:02:46.980 --> 00:02:48.560 the number 20. 52 00:02:48.560 --> 00:02:52.520 It might only include like 19.999999, 53 00:02:52.520 --> 00:02:55.730 but now we're cutting off that decimal part. 54 00:02:55.730 --> 00:03:00.140 And so we are now left with a number between zero and 19. 55 00:03:00.140 --> 00:03:03.210 And so to elevate it to between one and 20, 56 00:03:03.210 --> 00:03:06.440 all you have to do is to add one here. 57 00:03:06.440 --> 00:03:08.240 And with this, we make sure that the number 58 00:03:08.240 --> 00:03:11.450 is always between these two boundaries. 59 00:03:11.450 --> 00:03:13.690 So let's grabbed is now, 60 00:03:13.690 --> 00:03:16.510 so now that it works and put it here 61 00:03:17.810 --> 00:03:21.220 and with is we have our secret number. 62 00:03:21.220 --> 00:03:23.010 Now in the real game 63 00:03:23.010 --> 00:03:25.490 the number will obviously be hidden. 64 00:03:25.490 --> 00:03:28.190 So behind this question mark, 65 00:03:28.190 --> 00:03:30.650 but now since we are still in development, 66 00:03:30.650 --> 00:03:32.600 let's actually display the number here 67 00:03:32.600 --> 00:03:36.803 so that we can then test our game logic as we develop it. 68 00:03:37.720 --> 00:03:39.690 So let's select that number 69 00:03:39.690 --> 00:03:42.680 and I think again we already did it before, 70 00:03:42.680 --> 00:03:44.653 but let's do it here anyway again. 71 00:03:46.767 --> 00:03:49.684 Adjust, so the class name is number 72 00:03:52.050 --> 00:03:55.470 and then remember we use text content 73 00:03:55.470 --> 00:03:58.930 and to set it, we simply use the equal sign. 74 00:03:58.930 --> 00:04:00.573 And now what do we put here? 75 00:04:01.750 --> 00:04:05.730 Well, just the number that we just calculated. 76 00:04:05.730 --> 00:04:09.390 And now as I save it, watch what happens, 77 00:04:09.390 --> 00:04:12.100 here we now have our random number. 78 00:04:12.100 --> 00:04:13.620 And as I reload the page 79 00:04:13.620 --> 00:04:16.410 you will see different random numbers appearing. 80 00:04:16.410 --> 00:04:20.730 And again, for you of course, it will be different numbers. 81 00:04:20.730 --> 00:04:23.470 And you see here 20, which is actually the maximum. 82 00:04:23.470 --> 00:04:26.600 So this means that 20 is indeed included 83 00:04:26.600 --> 00:04:28.763 in our range here. 84 00:04:30.520 --> 00:04:33.370 Just to check if it's all right, 85 00:04:33.370 --> 00:04:35.730 so if we don't see any weird numbers 86 00:04:35.730 --> 00:04:38.090 but it all looks okay to me. 87 00:04:38.090 --> 00:04:41.340 And so let's now move on and actually compare 88 00:04:41.340 --> 00:04:44.313 the secret number to the users guess. 89 00:04:45.980 --> 00:04:48.270 So here we already have the condition, 90 00:04:48.270 --> 00:04:50.700 if there is no guess then just print 91 00:04:50.700 --> 00:04:53.660 to the message element that there is no number. 92 00:04:53.660 --> 00:04:55.590 So that's again, check that, 93 00:04:55.590 --> 00:04:57.650 and indeed it works. 94 00:04:57.650 --> 00:05:00.650 But now what if there actually is a guess? 95 00:05:00.650 --> 00:05:02.493 So let's say Else-if, 96 00:05:03.360 --> 00:05:08.360 and now we will actually check if the guess is the same 97 00:05:08.690 --> 00:05:11.690 as the secret number. 98 00:05:11.690 --> 00:05:13.820 And since I'm always saying secret number, 99 00:05:13.820 --> 00:05:16.473 let's actually change the variable name. 100 00:05:17.320 --> 00:05:19.470 So double click to select it, 101 00:05:19.470 --> 00:05:22.890 and then I can double click on all of the instances 102 00:05:22.890 --> 00:05:25.760 so that's this one and this one, 103 00:05:25.760 --> 00:05:28.230 so that's a nice vs code trick. 104 00:05:28.230 --> 00:05:31.180 And so now I have these three cursors. 105 00:05:31.180 --> 00:05:35.107 So let's delete all of that secret number. 106 00:05:37.880 --> 00:05:39.600 So the code works the same now 107 00:05:39.600 --> 00:05:42.593 but the variable name makes a little bit more sense. 108 00:05:43.740 --> 00:05:45.710 So let's create a code block here 109 00:05:45.710 --> 00:05:47.660 and now we need to specify what happens 110 00:05:47.660 --> 00:05:50.410 when the guess is correct. 111 00:05:50.410 --> 00:05:54.620 So again, when the guess is the same as the secret number 112 00:05:54.620 --> 00:05:59.053 that's essentially what the guess being means, all right? 113 00:06:00.060 --> 00:06:01.320 So what should happen 114 00:06:01.320 --> 00:06:05.453 then is that the correct number message should be displayed? 115 00:06:06.380 --> 00:06:09.890 So let's copy that and put that here 116 00:06:13.530 --> 00:06:15.723 and for now that's actually it. 117 00:06:16.890 --> 00:06:18.490 So I'll just give it a safe now, 118 00:06:20.180 --> 00:06:22.053 and so let's actually test this. 119 00:06:23.230 --> 00:06:26.850 So five, which of course is different, 120 00:06:26.850 --> 00:06:30.490 and then in the future we will want a message here saying 121 00:06:30.490 --> 00:06:32.620 that the number is too high. 122 00:06:32.620 --> 00:06:34.460 So we're gonna do that in a second. 123 00:06:34.460 --> 00:06:38.390 But now let's just put the correct number here and indeed 124 00:06:38.390 --> 00:06:40.710 we now get correct number. 125 00:06:40.710 --> 00:06:43.850 So that's exactly what we defined here 126 00:06:43.850 --> 00:06:48.020 in this Else-if block, all right? 127 00:06:48.020 --> 00:06:50.530 So I hope all of that makes sense. 128 00:06:50.530 --> 00:06:53.560 And now let's work on that scenario that I just mentioned 129 00:06:53.560 --> 00:06:56.353 which is when the guess is greater than the number. 130 00:06:57.950 --> 00:07:00.160 So you see that here in this big, 131 00:07:00.160 --> 00:07:02.570 if else if her statement, 132 00:07:02.570 --> 00:07:05.060 we are covering all the different scenarios 133 00:07:05.060 --> 00:07:08.570 that might happen here to this number. 134 00:07:08.570 --> 00:07:10.640 So the first one was the that there is no number 135 00:07:10.640 --> 00:07:12.310 at all, right? 136 00:07:12.310 --> 00:07:15.250 Then we checked if it's equal to the secret number, 137 00:07:15.250 --> 00:07:17.480 and now we will check if it's greater. 138 00:07:17.480 --> 00:07:21.883 So if the guess is greater than the secret number. 139 00:07:22.900 --> 00:07:24.283 And then what would happen? 140 00:07:25.270 --> 00:07:29.983 Well, let's again select the message .textcontent 141 00:07:36.830 --> 00:07:40.340 and then let's say too high. 142 00:07:40.340 --> 00:07:42.360 So the guess is too high now 143 00:07:42.360 --> 00:07:44.680 and again adding an emoji here. 144 00:07:44.680 --> 00:07:46.703 So I want this graph here, okay? 145 00:07:53.710 --> 00:07:58.450 And now also, since we are working on this let's account 146 00:07:58.450 --> 00:08:02.540 for the last situation or the last scenario as well 147 00:08:02.540 --> 00:08:05.723 which is that the guess is lower than a secret number. 148 00:08:08.147 --> 00:08:11.200 So guess below secret number, 149 00:08:11.200 --> 00:08:14.590 and with this, we covered all the scenarios. 150 00:08:14.590 --> 00:08:17.143 Let's just copy this one now, too low, 151 00:08:24.940 --> 00:08:28.343 and now we're using the editor graph here, 152 00:08:29.550 --> 00:08:31.723 give it a safe and let's test it. 153 00:08:32.780 --> 00:08:35.223 So right now we know that it's at three, 154 00:08:37.620 --> 00:08:39.200 so let's try at 12. 155 00:08:39.200 --> 00:08:44.200 And so now we should see two high, and yes it works. 156 00:08:45.270 --> 00:08:49.930 Now let's test one, which is too low and it works again. 157 00:08:49.930 --> 00:08:54.300 And now let's test three, which is correct. 158 00:08:54.300 --> 00:08:57.170 And indeed it's correct. 159 00:08:57.170 --> 00:08:58.850 So that's working already. 160 00:08:58.850 --> 00:09:01.090 Now let's move on to the next step 161 00:09:01.090 --> 00:09:03.380 which is to work with a score here. 162 00:09:03.380 --> 00:09:05.800 So remember that each time that we guess 163 00:09:05.800 --> 00:09:09.520 a wrong number our score showed to decrease. 164 00:09:09.520 --> 00:09:11.543 So let me show that to you again. 165 00:09:13.160 --> 00:09:16.450 So let's say five and see how it starts at 20, 166 00:09:16.450 --> 00:09:19.770 just like in our code, but now as I check wrong 167 00:09:20.720 --> 00:09:23.883 so it's too high and now the score decreased to 19. 168 00:09:24.800 --> 00:09:26.910 So let me check another one. 169 00:09:26.910 --> 00:09:29.880 And so now you see that my number goes down each time 170 00:09:29.880 --> 00:09:32.470 that I do a wrong guess. 171 00:09:32.470 --> 00:09:35.663 And so let's implement that in our code here as well. 172 00:09:37.030 --> 00:09:41.360 So as you see here, we start with a score of 20. 173 00:09:41.360 --> 00:09:46.270 And now in these two scenarios where the guess is wrong, 174 00:09:46.270 --> 00:09:49.470 so here where it's above and here where it's below. 175 00:09:49.470 --> 00:09:53.430 We want to decrease that score by a one, all right? 176 00:09:53.430 --> 00:09:56.430 Because again, each time that there is a wrong guess 177 00:09:56.430 --> 00:09:58.950 the score should decrease by one. 178 00:09:58.950 --> 00:10:01.210 So how should we do that? 179 00:10:01.210 --> 00:10:04.580 And I can think of two ways of doing that. 180 00:10:04.580 --> 00:10:08.190 The first way is to read the score from here, 181 00:10:08.190 --> 00:10:11.830 then decrease it by one and then print it here again. 182 00:10:11.830 --> 00:10:14.280 So that would be the first way of doing it, 183 00:10:14.280 --> 00:10:16.030 but there is a better way. 184 00:10:16.030 --> 00:10:18.870 And the better way is to actually create a variable 185 00:10:18.870 --> 00:10:22.930 for the score in the code and then update that variable 186 00:10:22.930 --> 00:10:25.460 so basically to decrease that variable 187 00:10:25.460 --> 00:10:27.140 and then display the value 188 00:10:27.140 --> 00:10:31.000 of that variable here in this score label. 189 00:10:31.000 --> 00:10:34.400 And by doing that, we have our data also in the code 190 00:10:34.400 --> 00:10:36.700 and not just on the DOM. 191 00:10:36.700 --> 00:10:39.163 And so that's always a very good thing to do. 192 00:10:40.420 --> 00:10:42.430 So let me do that now and then I will explain 193 00:10:42.430 --> 00:10:43.580 it a little bit better. 194 00:10:45.360 --> 00:10:49.220 So I'm gonna do that right here after the secret number, 195 00:10:49.220 --> 00:10:54.220 so const score, and as you already know we start with 20. 196 00:10:56.750 --> 00:10:58.830 And so that's our initial score. 197 00:10:58.830 --> 00:11:01.920 So the value that we set to this variable. 198 00:11:01.920 --> 00:11:03.620 And actually this should be a let, 199 00:11:04.510 --> 00:11:07.810 because we will then decrease that value, remember. 200 00:11:07.810 --> 00:11:10.060 And so it cannot be a const 201 00:11:10.060 --> 00:11:12.510 because a constant is immutable. 202 00:11:12.510 --> 00:11:13.650 Now, okay? 203 00:11:13.650 --> 00:11:15.580 And now here let's go back 204 00:11:15.580 --> 00:11:18.010 to the wrong guess scenario. 205 00:11:18.010 --> 00:11:21.350 Our scenario was, because it's this one and this one 206 00:11:21.350 --> 00:11:24.223 and then all we do is to decrease the score. 207 00:11:25.170 --> 00:11:30.170 So score equal score minus one. 208 00:11:30.900 --> 00:11:34.510 And maybe you already know, or hopefully you do, 209 00:11:34.510 --> 00:11:36.400 that this is the same as writing, 210 00:11:36.400 --> 00:11:40.970 score minus minus, all right? 211 00:11:40.970 --> 00:11:42.890 So we decreased the score 212 00:11:42.890 --> 00:11:45.170 and then all we have to do is to display 213 00:11:45.170 --> 00:11:47.863 that score here in this element. 214 00:11:48.751 --> 00:11:51.570 So once again, we already did that. 215 00:11:51.570 --> 00:11:53.423 So no need to repeat. 216 00:11:54.590 --> 00:11:56.103 So it's this one here. 217 00:12:00.070 --> 00:12:03.430 So we select the element with the class of score 218 00:12:03.430 --> 00:12:08.430 and then at the text content we give the score, all right? 219 00:12:09.890 --> 00:12:11.150 And that's it. 220 00:12:11.150 --> 00:12:13.280 Now we just need the same code 221 00:12:13.280 --> 00:12:16.180 also in the other wrong scenario. 222 00:12:16.180 --> 00:12:18.890 So where the guess is below the secret number. 223 00:12:18.890 --> 00:12:22.973 So I'm just copying this code and putting it here, 224 00:12:24.210 --> 00:12:27.400 give it a safe and a before testing it 225 00:12:27.400 --> 00:12:30.410 let me again, explain what we just did here. 226 00:12:30.410 --> 00:12:32.980 So as I said, we could have also stored 227 00:12:32.980 --> 00:12:35.760 this score basically in the DOM. 228 00:12:35.760 --> 00:12:38.150 And to do that we would always just read 229 00:12:38.150 --> 00:12:39.740 this value from here. 230 00:12:39.740 --> 00:12:43.760 So right from the DOM , then we could decrease that value 231 00:12:43.760 --> 00:12:46.330 and then write it back here to the DOM 232 00:12:46.330 --> 00:12:49.880 but then we would not have that value in our code. 233 00:12:49.880 --> 00:12:52.540 So essentially our application would have no way 234 00:12:52.540 --> 00:12:55.400 of knowing that score at all points. 235 00:12:55.400 --> 00:12:59.260 And so it's always good to keep a variable 236 00:12:59.260 --> 00:13:02.370 which actually holds the data in our code 237 00:13:02.370 --> 00:13:06.620 and not just rely on the DOM to hold our data, all right? 238 00:13:06.620 --> 00:13:10.680 And this variable here can also be called a state variable. 239 00:13:10.680 --> 00:13:12.930 Because this score is part 240 00:13:12.930 --> 00:13:15.770 of the so-called application state 241 00:13:15.770 --> 00:13:18.940 which is basically all the data that is relevant 242 00:13:18.940 --> 00:13:20.450 to the application. 243 00:13:20.450 --> 00:13:22.170 And we could say that 17, 244 00:13:22.170 --> 00:13:24.870 so the secret number is also part 245 00:13:24.870 --> 00:13:28.850 of the state of our application, all right? 246 00:13:28.850 --> 00:13:32.300 And so we want all the data always to be available 247 00:13:32.300 --> 00:13:36.727 somewhere in our code and not just in the DOM , okay? 248 00:13:36.727 --> 00:13:38.980 But always keep that in mind, 249 00:13:38.980 --> 00:13:42.700 and so that is why we implemented a solution like this. 250 00:13:42.700 --> 00:13:44.530 So whenever there's a wrong guess, 251 00:13:44.530 --> 00:13:47.960 we just take the score that we already have in our code, 252 00:13:47.960 --> 00:13:49.810 then we decrease it by one 253 00:13:49.810 --> 00:13:52.943 and then we display that new score right here. 254 00:13:54.780 --> 00:13:59.400 So let's reload, let's say 17. 255 00:13:59.400 --> 00:14:01.573 And watch what happens to our score now. 256 00:14:03.470 --> 00:14:08.010 And indeed it decreased to 19 and our number is too high. 257 00:14:08.010 --> 00:14:09.930 And when I click again now, 258 00:14:09.930 --> 00:14:11.823 you see it decreasing even more. 259 00:14:12.770 --> 00:14:15.343 Now let's try with a lower number. 260 00:14:16.360 --> 00:14:20.180 So too low and our score decreased again. 261 00:14:20.180 --> 00:14:22.370 And actually let's keep going, 262 00:14:22.370 --> 00:14:26.880 so let's keep clicking here and watch what happens. 263 00:14:26.880 --> 00:14:30.260 So I'm clicking over and over on the same button here 264 00:14:30.260 --> 00:14:35.260 and the score keeps going down and eventually we reach zero. 265 00:14:35.763 --> 00:14:37.190 And at this point 266 00:14:37.190 --> 00:14:40.370 we should basically lose the game, all right? 267 00:14:40.370 --> 00:14:43.060 But as you see here, nothing of course happens. 268 00:14:43.060 --> 00:14:46.480 And we can keep clicking here and go until affinity 269 00:14:46.480 --> 00:14:49.060 and our program we'll of course not care. 270 00:14:49.060 --> 00:14:52.740 Because our program obviously has no idea of losing 271 00:14:52.740 --> 00:14:55.237 or of winning the game, all right? 272 00:14:55.237 --> 00:14:59.600 It is completely on us to write all that logic. 273 00:14:59.600 --> 00:15:01.560 So basically what this means 274 00:15:01.560 --> 00:15:03.830 is that all of this checking here, 275 00:15:03.830 --> 00:15:07.560 so doing all this here should only happen whenever the score 276 00:15:07.560 --> 00:15:09.580 is still above zero. 277 00:15:09.580 --> 00:15:12.250 And then when the score is actually zero, 278 00:15:12.250 --> 00:15:15.351 then we should get some kind of message here saying 279 00:15:15.351 --> 00:15:17.830 that we lost the game. 280 00:15:17.830 --> 00:15:21.543 So let's quickly do that here, inside of this scenario. 281 00:15:23.200 --> 00:15:26.860 So basically we need another if statement here inside 282 00:15:26.860 --> 00:15:30.190 this already Else-if block. 283 00:15:30.190 --> 00:15:32.260 And that's of course not a problem at all. 284 00:15:32.260 --> 00:15:36.230 We can perfectly have one if inside of the other. 285 00:15:36.230 --> 00:15:39.840 So what I was just saying is that this here, 286 00:15:39.840 --> 00:15:42.940 all of this should basically only happen 287 00:15:42.940 --> 00:15:46.110 while the score is still above zero. 288 00:15:46.110 --> 00:15:48.140 So let's do that. 289 00:15:48.140 --> 00:15:51.810 So if score is above zero 290 00:15:54.320 --> 00:15:58.030 only then do all of this, all right. 291 00:16:00.870 --> 00:16:05.870 And now Else, so basically if it is zero, 292 00:16:06.930 --> 00:16:09.383 then we want to display another message. 293 00:16:11.560 --> 00:16:16.560 So we want to say you lost the game with some losing emoji. 294 00:16:24.870 --> 00:16:26.990 So I'm gonna use this one here, 295 00:16:26.990 --> 00:16:28.813 so that's an explosion I believe. 296 00:16:33.130 --> 00:16:35.490 So let's test that now. 297 00:16:35.490 --> 00:16:39.280 And we only implement this for when the guess 298 00:16:39.280 --> 00:16:41.283 is above the secret number. 299 00:16:42.250 --> 00:16:45.670 So let's now use 12, it's too high 300 00:16:45.670 --> 00:16:48.473 and now let's keep going to test what happens. 301 00:16:49.860 --> 00:16:51.580 So we are approaching it now 302 00:16:53.230 --> 00:16:54.960 and now we lost the game. 303 00:16:54.960 --> 00:16:57.120 But actually I could click twice 304 00:16:57.120 --> 00:16:59.660 as my score was already zero. 305 00:16:59.660 --> 00:17:03.070 So try this for yourself, I will just reload here, 306 00:17:03.070 --> 00:17:05.873 and again put a number that is above. 307 00:17:12.847 --> 00:17:14.850 So now the score is one and as I click, 308 00:17:14.850 --> 00:17:17.770 we should get a message you lost the game. 309 00:17:17.770 --> 00:17:21.410 So let's try and it didn't happen yet. 310 00:17:21.410 --> 00:17:23.840 And it did not happen because the score 311 00:17:23.840 --> 00:17:27.970 was indeed still a greater than zero here, all right? 312 00:17:27.970 --> 00:17:32.163 So we need to change that to greater than one, okay? 313 00:17:38.040 --> 00:17:39.953 So again, a larger number. 314 00:17:43.680 --> 00:17:48.680 Now I get one and if I click now you lost the game. 315 00:17:49.310 --> 00:17:52.993 And all we need to do is to update the score to zero here. 316 00:17:55.310 --> 00:18:00.310 So let's just copy this, write zero, 317 00:18:01.730 --> 00:18:04.670 and then before we test it we can actually copy 318 00:18:04.670 --> 00:18:08.310 the same code to this other scenario. 319 00:18:08.310 --> 00:18:11.850 Now, as you can see, we are creating a lot of duplicate code 320 00:18:11.850 --> 00:18:14.583 and we will fix that by the end of this project. 321 00:18:15.420 --> 00:18:18.003 But for now, let's just keep working on this. 322 00:18:20.400 --> 00:18:23.793 And the only thing that really changes here is this message. 323 00:18:26.860 --> 00:18:29.600 So you'll see that here is some potential 324 00:18:29.600 --> 00:18:31.493 to eliminate duplicate code. 325 00:18:32.600 --> 00:18:35.180 But again we will take care of later off that, 326 00:18:35.180 --> 00:18:39.410 for now let's just make it work, okay? 327 00:18:39.410 --> 00:18:41.740 And with this I think we're actually finished. 328 00:18:41.740 --> 00:18:43.113 Let's just test it. 329 00:18:44.560 --> 00:18:47.513 So five is too low, 330 00:18:49.260 --> 00:18:54.260 so let's keep going down and you lost a game, great. 331 00:18:55.740 --> 00:18:59.750 Now let's test a larger number 332 00:18:59.750 --> 00:19:04.750 and I keep clicking here and now we lost the game too. 333 00:19:06.940 --> 00:19:10.640 Great, so our game logic is already working 334 00:19:10.640 --> 00:19:12.250 and actually the game itself 335 00:19:12.250 --> 00:19:14.760 is also kind of working already. 336 00:19:14.760 --> 00:19:17.330 There's just two things that are missing here 337 00:19:17.330 --> 00:19:21.530 which is the high score and this play again button. 338 00:19:21.530 --> 00:19:24.060 But before implementing that functionality, 339 00:19:24.060 --> 00:19:25.640 in the next video we're gonna talk 340 00:19:25.640 --> 00:19:27.980 a little bit about CSS 341 00:19:27.980 --> 00:19:31.313 and how we can manipulate styles using JavaScript.