1
00:00:00,170 --> 00:00:04,320
In this video there's a few small changes that I want to make and then I'm going to talk about how we

2
00:00:04,320 --> 00:00:06,330
could refactor this a little bit.

3
00:00:06,330 --> 00:00:09,570
So the first change is that when we win this game.

4
00:00:09,840 --> 00:00:11,860
So let's win here.

5
00:00:11,880 --> 00:00:16,320
There we go and I get this correct message and I click on play again.

6
00:00:16,710 --> 00:00:18,080
It still says correct.

7
00:00:18,300 --> 00:00:22,030
And we want that to reset which is a really quick change.

8
00:00:22,320 --> 00:00:27,330
All we need to do is find the code that runs when we click on play again then we need to change the

9
00:00:27,330 --> 00:00:30,730
span that we have here and make it just empty.

10
00:00:30,750 --> 00:00:33,760
So let's go find that make this full screen.

11
00:00:34,410 --> 00:00:38,570
So when we click on that reset button which is right here.

12
00:00:39,360 --> 00:00:44,190
All we need to do is change our display which we called message display.

13
00:00:44,190 --> 00:00:48,090
So we'll do that down here just anywhere.

14
00:00:48,090 --> 00:00:57,960
Message display text ups text content equals empty string.

15
00:00:58,360 --> 00:01:00,330
And let's see how that goes.

16
00:01:00,540 --> 00:01:01,730
Refresh.

17
00:01:01,810 --> 00:01:03,740
OK let's just click until we win.

18
00:01:04,050 --> 00:01:05,680
OK so it says correct here.

19
00:01:05,790 --> 00:01:09,440
And if I click on play again that goes away.

20
00:01:09,660 --> 00:01:15,270
The other slight change that I want to make is that this button should only say play again once the

21
00:01:15,270 --> 00:01:16,290
user wins.

22
00:01:16,320 --> 00:01:20,760
So I'll refresh the page and it says new colors which is how we want it to work.

23
00:01:20,760 --> 00:01:23,910
Then if I win it asks me if I want to play again.

24
00:01:24,120 --> 00:01:30,080
And then if I click play again we want to change the button text to go back to New colors.

25
00:01:30,090 --> 00:01:35,280
So really slight difference but I only want to show play again if the user just won.

26
00:01:35,850 --> 00:01:41,820
So go into our code and we need to find the place where the user wins the game which is right here when

27
00:01:41,820 --> 00:01:44,240
the user clicks on the picked color.

28
00:01:44,370 --> 00:01:50,970
So when the user clicks on the right color we change the reset button text to say text content but then

29
00:01:50,970 --> 00:01:56,650
what we want to do is when the user clicks on the reset button we're going to change that.

30
00:01:56,790 --> 00:02:05,040
This dot text content to go back to New colors and we could also write a reset button.

31
00:02:05,040 --> 00:02:09,540
But it's easier to do this because we're inside of the event listener for reset button.

32
00:02:10,050 --> 00:02:15,270
And that should be good if we refresh quick until we get the right one.

33
00:02:15,360 --> 00:02:16,440
We want to play again.

34
00:02:16,680 --> 00:02:17,480
Sure.

35
00:02:17,490 --> 00:02:24,350
Now it goes back to New colors and every time it just says new colors over and over and if I win it's

36
00:02:24,360 --> 00:02:26,900
the only time that it says play again.

37
00:02:26,910 --> 00:02:31,770
So one really minor thing but I find it really distracting is that when I click on one of these buttons

38
00:02:32,220 --> 00:02:34,350
it has this annoying outline around it.

39
00:02:34,680 --> 00:02:36,990
And this is actually our browser doing that.

40
00:02:36,990 --> 00:02:38,560
And we can turn that off.

41
00:02:38,610 --> 00:02:41,940
I don't know if you can see that on the screen cast but there's a blue outline.

42
00:02:42,070 --> 00:02:43,190
It's pretty of noxious.

43
00:02:43,200 --> 00:02:49,560
So to get rid of that we go to our style sheet and if we select our buttons just down here we can just

44
00:02:49,560 --> 00:02:54,290
write outline none and go back and refresh.

45
00:02:54,310 --> 00:02:57,810
Now if we click we don't get that blue outline around it.

46
00:02:57,960 --> 00:03:00,260
So that's all I wanted to do for the game logic.

47
00:03:00,450 --> 00:03:03,500
Now we want to spend a little bit of time refactoring your code.

48
00:03:03,630 --> 00:03:04,880
So let's go back.

49
00:03:04,980 --> 00:03:10,770
The first thing that jumps out to me is this code here where we have a hard button an easy button and

50
00:03:10,770 --> 00:03:12,120
the listener for each one.

51
00:03:12,240 --> 00:03:14,370
And they're very similar in how they work.

52
00:03:14,370 --> 00:03:17,100
Except one of them will work with three squares.

53
00:03:17,100 --> 00:03:20,860
The other one works with six but otherwise they do basically the same thing.

54
00:03:21,090 --> 00:03:23,720
So we can actually reduce that duplication.

55
00:03:23,880 --> 00:03:30,300
And rather than giving each one an idee what we're going to do is get rid of those IDs and give them

56
00:03:30,300 --> 00:03:33,180
a class and they're going to share the same class.

57
00:03:33,390 --> 00:03:37,660
So the class is going to be called mode.

58
00:03:37,770 --> 00:03:39,570
So we'll give them class mode.

59
00:03:39,600 --> 00:03:42,850
Remember a button or any item can have two classes.

60
00:03:42,870 --> 00:03:45,010
They just need to be separated by spaces.

61
00:03:45,030 --> 00:03:48,030
So this has class mode and class selected.

62
00:03:48,420 --> 00:03:49,020
OK.

63
00:03:49,160 --> 00:03:56,460
So now we'll go and delete these two buttons here and make a list of buttons called mode buttons and

64
00:03:56,460 --> 00:03:59,220
that's going to be a document that queries selector.

65
00:03:59,350 --> 00:04:03,090
Paul datt mode.

66
00:04:03,160 --> 00:04:05,410
So that gives us two buttons.

67
00:04:05,700 --> 00:04:08,360
Then we're going to loop through mode buttons.

68
00:04:08,370 --> 00:04:13,020
So we need for var equals zero.

69
00:04:13,290 --> 00:04:16,740
Less than mode button startling.

70
00:04:16,910 --> 00:04:23,250
And what this also will let us do is if in the future we want to add a medium or normal difficulty mode

71
00:04:23,280 --> 00:04:25,380
or a super hard difficulty mode.

72
00:04:25,470 --> 00:04:30,990
We don't have to add extra listeners because we're selecting all of them and then using a loop versus

73
00:04:30,990 --> 00:04:34,800
Here we have to manually write one for every button that we add.

74
00:04:35,100 --> 00:04:35,330
OK.

75
00:04:35,340 --> 00:04:36,480
So finish the loop here.

76
00:04:36,570 --> 00:04:37,740
Plus plus.

77
00:04:38,100 --> 00:04:49,360
And what we're going to do is add a mode buttons I dot add event listener click and they'll just leave

78
00:04:49,360 --> 00:04:50,590
it at this for now.

79
00:04:50,590 --> 00:04:56,020
Before we go any further I'm actually going to comment out the code just so that we can tell what's

80
00:04:56,020 --> 00:05:01,100
running from our new code and what we want to happen when we click on one of those buttons.

81
00:05:01,210 --> 00:05:05,580
The first thing we want to happen is for that selected class to be applied.

82
00:05:05,680 --> 00:05:07,260
So right now it's only when we hover.

83
00:05:07,300 --> 00:05:10,220
We get that color I want it to be when we click.

84
00:05:10,780 --> 00:05:20,140
So we need to do this dot class list dot add selected just like that which is what we have down here

85
00:05:20,170 --> 00:05:23,510
except we are doing it to easy button and hard button.

86
00:05:23,710 --> 00:05:27,070
We can just do it to this which refers to what was clicked on.

87
00:05:27,220 --> 00:05:31,180
The only issue is we need to turn it off the original one as well.

88
00:05:31,540 --> 00:05:42,400
And to do that we're just going to hard code this a bit and write mode buttons zero dot class list dot

89
00:05:42,550 --> 00:05:47,320
remove selected and then we'll remove it from the other one as well.

90
00:05:47,800 --> 00:05:49,360
So because there's only two buttons.

91
00:05:49,390 --> 00:05:50,550
This isn't an issue.

92
00:05:50,560 --> 00:05:55,840
What we're doing is removing it from both buttons just to be safe and then adding it to the one that

93
00:05:55,840 --> 00:05:57,690
we just clicked on.

94
00:05:57,700 --> 00:06:00,690
So now if we test this out and refresh.

95
00:06:01,030 --> 00:06:05,560
You can see that it only is added to the one that we just clicked on and it's removed from the other

96
00:06:05,560 --> 00:06:06,630
one.

97
00:06:06,640 --> 00:06:10,900
So what we need to do next is add the bulk of the logic here for these buttons.

98
00:06:11,080 --> 00:06:26,290
So we need to figure out how many squares to show pick new colors and then we need to pick a new pick

99
00:06:26,310 --> 00:06:30,420
to color which is the color we're trying to trying to click on.

100
00:06:30,670 --> 00:06:37,850
And then lastly we want to update page to reflect changes.

101
00:06:38,110 --> 00:06:43,810
So to do all of this I'm actually going to make a new function and that function I'm just going to call

102
00:06:43,810 --> 00:06:49,060
it reset and this is something we're going to use in a few places because we're repeating these steps

103
00:06:49,060 --> 00:06:55,030
a lot picking new colors picking a new picked color from the colors array and then updating the page

104
00:06:55,150 --> 00:06:59,650
to show the new colors and updating this display here.

105
00:06:59,650 --> 00:07:03,400
We're doing that all the time so I'm going to just put that all on a function.

106
00:07:03,400 --> 00:07:08,500
So what we need to do inside this function is I'm actually just going to copy it from down here.

107
00:07:08,530 --> 00:07:09,860
We've already done this here.

108
00:07:09,990 --> 00:07:15,200
I was going to copy all this in into our Reset just like that.

109
00:07:15,430 --> 00:07:17,150
And let's take a look at what's happening.

110
00:07:17,350 --> 00:07:24,740
So instead of reset or generating the random colors depending on the numb squares variable and then

111
00:07:24,740 --> 00:07:29,310
we're picking a new color we're changing the color displays content.

112
00:07:29,530 --> 00:07:32,020
We have this text content equals new colors.

113
00:07:32,050 --> 00:07:37,060
And that actually won't work because this used to be referring to the reset button.

114
00:07:37,390 --> 00:07:40,420
And that was inside the event in the center for reset button.

115
00:07:40,540 --> 00:07:43,240
We're now instead of a separate function called reset.

116
00:07:43,270 --> 00:07:45,720
So we need to hard code that as reset button.

117
00:07:45,880 --> 00:07:49,140
And then we're changing the message display to be empty.

118
00:07:49,570 --> 00:07:54,660
And then we're looping through all the squares and we're updating their color.

119
00:07:54,970 --> 00:07:57,920
And then we're changing the background of the 8:1 back to the blue.

120
00:07:58,180 --> 00:08:02,170
And if we just call that instead of here we just run reset.

121
00:08:02,170 --> 00:08:06,760
There's one small problem which is that we're never updating numb squares.

122
00:08:06,880 --> 00:08:11,870
So when I click on the easy button you want to change the squares variable to be three.

123
00:08:11,920 --> 00:08:15,180
When I click on the hard button you want to change it to be 6.

124
00:08:15,220 --> 00:08:22,940
So to do that minute go right here and add an if statement and all we can do is write if this text content

125
00:08:22,940 --> 00:08:22,960
.

126
00:08:22,960 --> 00:08:27,880
So the button that was clicked on if the text content is equal to easy.

127
00:08:28,250 --> 00:08:36,510
What we're going to do is say numb squares is equal to three L's number squares is equal to six.

128
00:08:36,640 --> 00:08:42,130
And then we'll call the reset function which will use the numb squares as you can see here in our reset

129
00:08:42,130 --> 00:08:43,030
function.

130
00:08:43,150 --> 00:08:47,410
We're using some squares to call our generate random colors function.

131
00:08:47,600 --> 00:08:51,970
So we need to have some squares updated which we're doing right here.

132
00:08:52,000 --> 00:08:57,010
There's actually a shorter way of writing this that some people are big fans of.

133
00:08:57,010 --> 00:08:58,580
It's called the ternary operator.

134
00:08:58,570 --> 00:09:01,720
So I'm going to write it first and then I'll talk about how it works.

135
00:09:01,720 --> 00:09:06,350
So this text content equals equals equals.

136
00:09:06,670 --> 00:09:10,870
Easy question mark.

137
00:09:11,000 --> 00:09:19,110
Numb squares equals three colon numb squares equals six.

138
00:09:19,120 --> 00:09:23,710
So this one line here does the exact same thing as these four lines right here.

139
00:09:23,710 --> 00:09:25,430
These five lines.

140
00:09:25,510 --> 00:09:27,360
So it's called the ternary operator.

141
00:09:27,400 --> 00:09:28,950
There are three parts to it.

142
00:09:28,960 --> 00:09:30,860
The first thing is the condition.

143
00:09:31,070 --> 00:09:40,390
So you can read this as if this text content is equal to easy then no squares is equal to 3 Otherwise

144
00:09:40,450 --> 00:09:42,080
no squares is equal to 6.

145
00:09:42,250 --> 00:09:44,060
So it's just a way of writing this.

146
00:09:44,380 --> 00:09:46,280
And I'll keep it like this.

147
00:09:46,270 --> 00:09:51,880
Usually if we just have quick one line if statements where we're setting one value to two different

148
00:09:51,880 --> 00:09:55,970
possible options it's a good use case for the ternary operator.

149
00:09:56,600 --> 00:09:59,420
We still have a problem though which is we're never actually hiding.

150
00:09:59,420 --> 00:10:01,380
Or showing the correct number of squares.

151
00:10:01,390 --> 00:10:03,940
So what will happen if I refresh.

152
00:10:04,030 --> 00:10:04,950
We start on hard mode.

153
00:10:04,950 --> 00:10:05,860
That works fine.

154
00:10:05,870 --> 00:10:07,290
Everything works the same.

155
00:10:07,450 --> 00:10:13,240
If I click on easy though we still have six squares here and you'll see the bottom three just don't

156
00:10:13,240 --> 00:10:16,160
change colors because we only generated three colors.

157
00:10:16,370 --> 00:10:21,890
So what we need to do instead of our reset function we need to account for that.

158
00:10:21,880 --> 00:10:26,750
So right here instead of this loop where we're changing the color of the squares to match the color

159
00:10:26,740 --> 00:10:28,000
from the colors array.

160
00:10:28,210 --> 00:10:33,370
If there's only three items in the colors array what we actually need to do is hide the other three

161
00:10:33,380 --> 00:10:34,060
squares.

162
00:10:34,270 --> 00:10:40,060
So I'm going to write that with an if statement and I'm just going to check if there is a color to paint

163
00:10:40,070 --> 00:10:40,670
.

164
00:10:40,670 --> 00:10:42,070
I also do something else.

165
00:10:42,110 --> 00:10:47,410
So if there is a color we're going to paint or change the background color of squares.

166
00:10:47,410 --> 00:10:57,200
I to be that color otherwise we need to change squares I display to be none.

167
00:10:57,320 --> 00:11:02,920
And that needs to be styled to display just like that.

168
00:11:03,100 --> 00:11:05,130
And so that will then hide it for us.

169
00:11:05,360 --> 00:11:12,280
So what happens if I click on the easy button I have an array of colors with three items were looping

170
00:11:12,280 --> 00:11:14,870
through six squares and rechecking.

171
00:11:14,920 --> 00:11:19,790
If there is a color that matches that square and for the first three there will be.

172
00:11:19,820 --> 00:11:22,890
So we set the background color to be the color from the array.

173
00:11:23,020 --> 00:11:26,700
But the last three colors I is going to be no.

174
00:11:26,740 --> 00:11:27,910
Or actually will be undefined.

175
00:11:27,910 --> 00:11:29,240
There won't be a color there.

176
00:11:29,470 --> 00:11:31,010
So that is false.

177
00:11:31,270 --> 00:11:34,560
And what happens is then we set the display to be none.

178
00:11:34,820 --> 00:11:37,770
So I'll show you how that works refresh.

179
00:11:38,230 --> 00:11:41,180
If I click on easy the bottom three disappear.

180
00:11:41,170 --> 00:11:43,720
Keep clicking on easy we get three new colors.

181
00:11:43,780 --> 00:11:44,840
Let's play the game.

182
00:11:44,840 --> 00:11:46,410
There we go.

183
00:11:46,450 --> 00:11:52,250
We do have a problem though which is if I click on a hard we're changing all six squares to have a new

184
00:11:52,240 --> 00:11:59,530
Bactrim color but we're not hiding the bottom three will do to get around that is right before we give

185
00:11:59,530 --> 00:12:01,720
a new background color to the squares.

186
00:12:01,720 --> 00:12:03,960
I'm going to go ahead and re show them.

187
00:12:03,970 --> 00:12:09,470
So it's going to be squares I thought style display equals block.

188
00:12:09,590 --> 00:12:11,320
So that's how we bring them back.

189
00:12:11,410 --> 00:12:13,140
And we're just going to do that to all six.

190
00:12:13,150 --> 00:12:14,170
It's not a big deal.

191
00:12:14,200 --> 00:12:18,490
So if we give them a background color we're just going to always make sure that they're visible first

192
00:12:18,490 --> 00:12:19,320
.

193
00:12:19,340 --> 00:12:24,590
So now if we refresh and they go to easy we have three play a game.

194
00:12:24,760 --> 00:12:26,160
I click on hard.

195
00:12:26,380 --> 00:12:28,070
Now we get six callers.

196
00:12:28,070 --> 00:12:30,520
Let's play a game.

197
00:12:30,520 --> 00:12:33,700
There we go click on easy and we go back to three.

198
00:12:33,700 --> 00:12:34,280
All right.

199
00:12:34,450 --> 00:12:37,390
So you can see we cleaned up a lot of code here.

200
00:12:37,510 --> 00:12:39,480
This used to be a lot longer.

201
00:12:39,480 --> 00:12:41,360
It is like three times long at least.

202
00:12:41,380 --> 00:12:46,120
And two different clicked listeners and now our code is relatively versatile.

203
00:12:46,120 --> 00:12:51,850
If we wanted to add a medium difficulty button all we need to do is change this line here where we would

204
00:12:51,860 --> 00:12:54,040
have a nother number squares.

205
00:12:54,040 --> 00:12:59,950
Maybe we want 5 squares or we want a super difficult level where we have 10 squares we just need to

206
00:12:59,950 --> 00:13:06,380
change number squares and call our reset function to get the next place that we can use our reset function

207
00:13:06,670 --> 00:13:09,160
is actually when we click on the reset button.

208
00:13:09,430 --> 00:13:15,050
So all that we need to do there is replace everything instead of the reset button click Lisner with

209
00:13:15,040 --> 00:13:17,630
just reset just like that.

210
00:13:17,650 --> 00:13:19,500
So that drives up our code a lot.

211
00:13:19,570 --> 00:13:22,650
We just got rid of 10 or so lines.

212
00:13:23,170 --> 00:13:26,280
So let's go back save without parentheses.

213
00:13:26,600 --> 00:13:29,020
Let's go to the browser and make sure it still works.

214
00:13:29,020 --> 00:13:31,580
So let's play a game.

215
00:13:31,850 --> 00:13:35,000
Click on play again and it resets just fine.

216
00:13:35,320 --> 00:13:40,750
Let's click on easy play another game and also resets just fine.

217
00:13:40,750 --> 00:13:41,430
All right.

218
00:13:41,530 --> 00:13:43,340
So we drive up our code quite a bit.

219
00:13:43,380 --> 00:13:47,690
They're going to get rid of these two just so you can see how much we shorten everything