1
00:00:00,720 --> 00:00:06,960
All right guys so we did the H Tim Allen the last video we created our UI with the skeleton CSSA boiler

2
00:00:06,960 --> 00:00:09,320
plate very simple.

3
00:00:09,330 --> 00:00:15,180
Now we're going to do is at our javascript's So in the Abdias file I'm just going to paste in just the

4
00:00:15,180 --> 00:00:20,520
set of I guess functions or rules that that this game is going to follow and things that we need to

5
00:00:20,520 --> 00:00:21,280
do.

6
00:00:21,300 --> 00:00:27,270
So players must guess a number between a minimum and a max that we can change within the script.

7
00:00:27,270 --> 00:00:31,790
Players must they get a certain amount of guesses which we can define.

8
00:00:31,950 --> 00:00:37,950
Notify the player of the guesses remaining notify the player of the correct answer if they lose and

9
00:00:37,950 --> 00:00:40,500
then let the player choose to play again.

10
00:00:40,730 --> 00:00:44,740
OK so these are these are the main rules of the game.

11
00:00:44,760 --> 00:00:51,520
So first thing we'll do is create our variables so we have game values.

12
00:00:51,630 --> 00:00:55,800
Now these I'm actually going to set I'm actually going to define with LET.

13
00:00:55,950 --> 00:00:56,830
OK.

14
00:00:56,840 --> 00:01:05,910
Now in the past we've done let X equals something and then we'll do let something equal whatever but

15
00:01:05,910 --> 00:01:12,000
we can we don't have to keep defining let or Conte's we can actually put a comma instead of a semi-colon

16
00:01:12,030 --> 00:01:15,240
and then just put the next variable on the next line.

17
00:01:15,240 --> 00:01:19,290
So for instance I'm going to set the men equal to 1.

18
00:01:19,380 --> 00:01:25,050
Now instead of putting a semi-colon and saying let Max for the next one I'm going to put a comma and

19
00:01:25,050 --> 00:01:28,390
then just say Max equals 10.

20
00:01:28,680 --> 00:01:29,060
All right.

21
00:01:29,070 --> 00:01:31,180
Put another comma so we can do it this way.

22
00:01:31,320 --> 00:01:38,520
OK and we haven't been doing this but I'm trying to ease you guys into different different conventions

23
00:01:38,520 --> 00:01:41,140
and practices.

24
00:01:41,160 --> 00:01:45,600
All right so if you're an experienced javascript programmer and you're watching this and you've seen

25
00:01:45,600 --> 00:01:48,760
me do things where you're like why is he doing it that way.

26
00:01:48,780 --> 00:01:57,090
It's because I'm trying to start at a certain point you know start at at a point for beginners and then

27
00:01:57,090 --> 00:02:04,200
work my way up to certain conventions and certain you know ways of structuring files and things like

28
00:02:04,200 --> 00:02:04,830
that.

29
00:02:05,040 --> 00:02:05,380
OK.

30
00:02:05,400 --> 00:02:12,570
So it's about teaching it's not about creating about you know creating the most optimal code I can right

31
00:02:12,570 --> 00:02:13,980
off the bat.

32
00:02:13,980 --> 00:02:15,240
So let's continue here.

33
00:02:15,240 --> 00:02:17,750
Let's set a winning number.

34
00:02:20,310 --> 00:02:22,890
So winning numbers.

35
00:02:23,190 --> 00:02:24,210
We're going to set that.

36
00:02:24,210 --> 00:02:26,180
I want to set it to two for now.

37
00:02:26,190 --> 00:02:30,450
But of course this is going to be random later on you don't always want the same number.

38
00:02:30,510 --> 00:02:35,910
We will create a function that will generate a random number between the men and the Max.

39
00:02:35,910 --> 00:02:39,400
OK we'll do that later on but for now it's just going to be two.

40
00:02:39,400 --> 00:02:41,230
All right.

41
00:02:41,400 --> 00:02:44,070
And then we want guesses left.

42
00:02:45,060 --> 00:02:49,140
OK the number of guesses left which I'm going to initially set to 3.

43
00:02:49,150 --> 00:02:54,690
Ok now we put our semi-colon here so that defined all those variables with LET.

44
00:02:54,690 --> 00:03:02,290
Now we want our UI elements which we're going to use conchs so will say conc.

45
00:03:03,120 --> 00:03:06,170
And let's get to the game wrapper itself.

46
00:03:06,170 --> 00:03:09,070
OK we have an idea of game around everything.

47
00:03:09,300 --> 00:03:16,900
So we wanted to define a variable called game and again convention that I sometimes use would be you.

48
00:03:16,920 --> 00:03:20,020
Game I would say UI before all of these.

49
00:03:20,160 --> 00:03:26,850
But again I want to keep this very generic so it's up to you if you want to use a different you know

50
00:03:26,880 --> 00:03:34,560
customized convention for naming Sylhet say document dog queries seler actually it's an idea saw do

51
00:03:34,560 --> 00:03:36,120
get element by the

52
00:03:39,090 --> 00:03:47,750
game put a comma here and define our next one which will be the men name.

53
00:03:48,930 --> 00:03:53,630
So we'll use queery selector here.

54
00:03:53,940 --> 00:03:59,400
Now the M. If we look at our aged him now and this is going to be the span right here.

55
00:03:59,400 --> 00:04:04,900
OK so I want this to be able to reflect whatever the minimum is and that's the max.

56
00:04:05,160 --> 00:04:11,970
So the query selector is going to be the class of men dash number.

57
00:04:12,660 --> 00:04:14,620
OK we also want maximum

58
00:04:19,750 --> 00:04:25,330
so this will be a class of Max Nahm.

59
00:04:26,190 --> 00:04:29,330
See we also want to the button that gets button

60
00:04:32,000 --> 00:04:33,260
so let's say

61
00:04:35,940 --> 00:04:37,050
guess PTEN

62
00:04:39,520 --> 00:04:45,590
change this to the ID of guess button.

63
00:04:45,640 --> 00:04:46,950
What is I think it's I guess.

64
00:04:47,050 --> 00:04:47,480
Should.

65
00:04:47,580 --> 00:04:52,620
And let me just check that.

66
00:04:53,150 --> 00:04:55,440
No wait a minute.

67
00:04:56,380 --> 00:05:00,370
I'm sorry guys I guess value here this should actually be guessed between

68
00:05:03,080 --> 00:05:06,930
yes we have guest input and guest PTEN.

69
00:05:06,980 --> 00:05:07,320
All right.

70
00:05:07,340 --> 00:05:10,200
So that's an excellent one.

71
00:05:10,220 --> 00:05:13,740
Let's just use queery selector for all of these.

72
00:05:14,570 --> 00:05:18,320
So it was just a hash in here just to be consistent.

73
00:05:19,100 --> 00:05:20,820
So guess what button.

74
00:05:20,900 --> 00:05:21,780
What else do we need.

75
00:05:21,770 --> 00:05:27,160
We're going to need the guest input.

76
00:05:27,470 --> 00:05:32,340
She'll just just copy this down.

77
00:05:32,540 --> 00:05:34,070
So guess input

78
00:05:36,700 --> 00:05:42,760
B guess Dasch input and then we just want our message came in.

79
00:05:42,760 --> 00:05:45,260
We have that paragraph from message

80
00:05:48,560 --> 00:05:50,550
and I believe that's a class.

81
00:05:50,540 --> 00:05:51,950
And why do I have a dot here.

82
00:05:51,950 --> 00:05:53,470
This isn't right.

83
00:05:55,200 --> 00:05:58,790
So this will be a dot message.

84
00:05:58,800 --> 00:06:02,280
And that's talking about this paragraph right here.

85
00:06:02,280 --> 00:06:02,520
All right.

86
00:06:02,520 --> 00:06:04,780
So those are the UI elements.

87
00:06:04,800 --> 00:06:08,490
Now I want to assign this Ruby be a semi-colon.

88
00:06:08,490 --> 00:06:14,030
I want to assign this the minimum and maximum here.

89
00:06:14,100 --> 00:06:18,250
So whatever we have specified here should show up in the UI.

90
00:06:18,330 --> 00:06:33,360
So let's say sign UI men and Max and we can do that by just saying men got text content equals and then

91
00:06:33,360 --> 00:06:35,700
we're going to sell it to men.

92
00:06:36,670 --> 00:06:43,470
Max dot text content we're going to set to max.

93
00:06:43,470 --> 00:06:51,870
So it's save that now we can get rid of the 10 and the one right here and save and we still get 1 in

94
00:06:51,870 --> 00:06:52,230
10.

95
00:06:52,230 --> 00:06:57,920
If I were to change this variable to 4 and save now it's between 4 and 10.

96
00:06:57,930 --> 00:06:58,170
All right.

97
00:06:58,170 --> 00:07:00,450
So it's dynamic.

98
00:07:00,480 --> 00:07:05,910
So now we want to do is create our event listener for this button.

99
00:07:06,110 --> 00:07:10,820
So this button has a variable of of I guess button.

100
00:07:10,820 --> 00:07:22,620
So let's go ahead and say you put a comment here would say listen for gas and we'll say guess DTN dot

101
00:07:22,930 --> 00:07:24,920
and event listener.

102
00:07:25,760 --> 00:07:30,380
We want to listen for a click and then we want to call a function

103
00:07:35,870 --> 00:07:36,430
let's test.

104
00:07:36,440 --> 00:07:44,350
So by just saying console dot logged and let's log's the guess input.

105
00:07:45,140 --> 00:07:48,220
OK so it should be whatever is put inside the toys.

106
00:07:48,230 --> 00:07:49,130
So we'll save that.

107
00:07:49,130 --> 00:07:51,280
Let's open up our console.

108
00:07:51,320 --> 00:07:54,700
We'll put in to submit.

109
00:07:54,800 --> 00:07:56,740
Now it's going to give us the actual input.

110
00:07:56,750 --> 00:07:58,660
But what we want is the value.

111
00:07:58,910 --> 00:08:01,380
So not value to.

112
00:08:01,430 --> 00:08:04,150
And then we get to now notice how this is black.

113
00:08:04,170 --> 00:08:07,590
This is this means that this is a string.

114
00:08:07,700 --> 00:08:12,320
And when we do our comparison and stuff we're going to want we need this to be a number.

115
00:08:12,500 --> 00:08:18,560
So the first thing we need to do here is parse that as a number so we're going to wrap that value right

116
00:08:18,560 --> 00:08:28,820
there inside of parse it and we're going to set this to a variable so I'm going to say let guess equals

117
00:08:29,030 --> 00:08:32,330
parse it and then that value.

118
00:08:32,330 --> 00:08:36,710
So now we want to validate our input.

119
00:08:37,200 --> 00:08:37,620
OK.

120
00:08:37,640 --> 00:08:44,470
So we need a conditional here and we basically want to check to make sure that it's not blank.

121
00:08:44,480 --> 00:08:49,940
We want to make sure that it's not less than the minimum or higher than the maximum.

122
00:08:49,970 --> 00:08:50,670
OK.

123
00:08:50,780 --> 00:08:58,040
Now since this is wrapped in parce And if we let's actually let's console log guess to see what it gives

124
00:08:58,040 --> 00:08:59,110
us.

125
00:09:01,310 --> 00:09:01,820
OK.

126
00:09:01,830 --> 00:09:04,670
So instead of giving us an empty string

127
00:09:07,350 --> 00:09:10,190
this is stirring an hour just get rid of that for a second.

128
00:09:10,370 --> 00:09:16,430
So usually we would check for you know if guest is equal to empty string but since we're parsing it

129
00:09:16,430 --> 00:09:19,830
as an integer it should be any and not a number.

130
00:09:19,850 --> 00:09:23,810
So I submit and we get any and so we need to check for that.

131
00:09:23,810 --> 00:09:24,300
All right.

132
00:09:24,410 --> 00:09:29,930
If I put something in here a number we want to make sure that this is in between the range as well.

133
00:09:29,930 --> 00:09:42,040
All right so let's go back to our statement here and we're going to say if gas is equal to not a number

134
00:09:42,170 --> 00:09:54,610
so and then or guess is less than the minimum or guess is greater than the max.

135
00:09:54,800 --> 00:10:00,980
OK so if any of these are true then we don't want we don't want the game to continue.

136
00:10:00,980 --> 00:10:03,930
We just want to set a message down here.

137
00:10:04,520 --> 00:10:11,720
So we're actually going to create a function called a set message and that's going to take in a message

138
00:10:11,720 --> 00:10:15,950
and I'm going to put in some back ticks here and we just want to let the user know that they have to

139
00:10:15,950 --> 00:10:18,270
enter a number between this range.

140
00:10:18,290 --> 00:10:29,720
So we're going to say Please enter a number between and then we can put our expression syntax in here

141
00:10:30,050 --> 00:10:38,180
and say min and max which you're going to refer to these variables right here.

142
00:10:38,630 --> 00:10:39,020
All right.

143
00:10:39,050 --> 00:10:44,790
So let's go ahead and let's get down here and create that function.

144
00:10:52,980 --> 00:11:00,180
That's going to take in a message and we just want to put it into that paragraph.

145
00:11:00,180 --> 00:11:06,090
So remember that paragraph we put into a variable called message.

146
00:11:06,090 --> 00:11:12,820
So we're going to say message you got text content equals and then whatever the messages.

147
00:11:13,200 --> 00:11:14,810
So let's save that and try it.

148
00:11:14,850 --> 00:11:16,920
So we'll leave it blank and submit.

149
00:11:17,340 --> 00:11:20,430
OK so that's not working.

150
00:11:20,430 --> 00:11:29,920
I was trying to do a higher number that works if we put a lower number that works.

151
00:11:31,020 --> 00:11:35,280
So let's see if this equals and and that isn't working.

152
00:11:35,910 --> 00:11:36,870
You know let me

153
00:11:46,520 --> 00:11:49,040
I'm sorry guys I had a brain fart here.

154
00:11:49,090 --> 00:11:50,960
We can't do this.

155
00:11:51,200 --> 00:11:57,980
What we want to do here is we want to use the function is and am like this.

156
00:11:58,220 --> 00:12:00,170
So is noon and then passing.

157
00:12:00,170 --> 00:12:00,970
Yes.

158
00:12:00,980 --> 00:12:02,330
So let's try that.

159
00:12:02,330 --> 00:12:04,110
There you go.

160
00:12:04,130 --> 00:12:04,520
All right.

161
00:12:04,520 --> 00:12:11,930
So if we put in something that's actually in the range like three let's reload 3 submit and we don't

162
00:12:11,930 --> 00:12:15,420
get the error we don't get the message.

163
00:12:15,450 --> 00:12:18,900
Now I want this I want the text to be read.

164
00:12:19,120 --> 00:12:19,610
OK.

165
00:12:19,610 --> 00:12:23,740
If it's something if if it's one of these this is this is basically an error.

166
00:12:23,900 --> 00:12:35,070
So we can set the color by saying message Daut style dot color equals red.

167
00:12:35,300 --> 00:12:35,620
Right.

168
00:12:35,630 --> 00:12:42,410
So now if I submit it's red but I also want to use set message to show regular messages that are not

169
00:12:42,410 --> 00:12:43,080
errors.

170
00:12:43,220 --> 00:12:47,650
And I don't want them to be red if it's just a regular message.

171
00:12:47,660 --> 00:12:53,850
So what I'm going to do is I'm going to add an extra parameter to this function called Color.

172
00:12:54,260 --> 00:12:54,710
OK.

173
00:12:54,710 --> 00:13:00,450
And then we're going to set the color to whatever's passed in and then we can simply go up here to set

174
00:13:00,500 --> 00:13:08,040
message passed and the second variable or a second value of red.

175
00:13:08,070 --> 00:13:09,830
So if we go out and submit now it's red.

176
00:13:09,830 --> 00:13:14,040
If I were to change this to green and submit it's green.

177
00:13:14,150 --> 00:13:14,610
All right.

178
00:13:14,690 --> 00:13:17,930
So simple fix for that.

179
00:13:18,560 --> 00:13:20,480
So let's figure out what we want to do next.

180
00:13:20,480 --> 00:13:22,500
Now that we did the validation.

181
00:13:22,670 --> 00:13:26,660
So what we wanted do next is check to see if it's the winning number right.

182
00:13:26,660 --> 00:13:32,840
So let's say check if we'll just say check if one and we're going to say if

183
00:13:35,990 --> 00:13:49,670
let's say if the guess is equal to the winning number and then we'll have an else.

184
00:13:49,840 --> 00:13:55,420
All right so if it's equal to the winning number then what do we want to do here.

185
00:13:55,470 --> 00:14:01,330
So I would say we should disable the input so that's easy we'll just take.

186
00:14:01,340 --> 00:14:02,800
But a comment here.

187
00:14:03,030 --> 00:14:04,880
I'll say disable input.

188
00:14:05,100 --> 00:14:12,910
So we'll say guess input Daut disabled equals.

189
00:14:12,930 --> 00:14:14,080
Sure.

190
00:14:14,910 --> 00:14:15,210
All right.

191
00:14:15,240 --> 00:14:17,800
So we know that the winning number is too.

192
00:14:18,000 --> 00:14:22,230
So let's try four and submit and we can still add something else.

193
00:14:22,230 --> 00:14:24,420
Let's try to submit it now.

194
00:14:24,420 --> 00:14:27,210
I can't I can't enter any number.

195
00:14:27,210 --> 00:14:29,190
So that's the first thing.

196
00:14:29,340 --> 00:14:34,560
Next thing let's make the border green to show that they won.

197
00:14:38,230 --> 00:14:40,600
So we can do that by taking the input.

198
00:14:40,600 --> 00:14:53,500
So guess input Daut style dot color are not color border color so border color we're going to set that

199
00:14:53,500 --> 00:14:56,730
to green.

200
00:14:57,100 --> 00:14:57,430
All right.

201
00:14:57,430 --> 00:14:58,690
So let's try it.

202
00:14:58,690 --> 00:15:02,880
We'll put a two in submit and the border is now green.

203
00:15:03,100 --> 00:15:08,540
So now we want to do is let the user know that they won.

204
00:15:10,510 --> 00:15:22,780
So we can call that message and some tactics in here and we're going to say we'll put our variable winning

205
00:15:22,780 --> 00:15:31,080
number or winning numbers and we're going to say is correct.

206
00:15:31,190 --> 00:15:37,430
And then let's set in this second parameter of the color and we want to we want to make it green case

207
00:15:37,430 --> 00:15:42,450
which would be a green message.

208
00:15:42,490 --> 00:15:48,670
So let's try that out and save if we put in a three or something nothing happens we haven't we haven't

209
00:15:48,670 --> 00:15:49,860
taken care of that yet.

210
00:15:50,090 --> 00:15:54,100
But let's put in two and we get two is correct.

211
00:15:54,100 --> 00:16:00,570
We should also probably say you win so we'll say two is correct you win.

212
00:16:02,770 --> 00:16:04,210
There you go.

213
00:16:04,240 --> 00:16:05,830
All right.

214
00:16:05,830 --> 00:16:10,810
So I think we are going to stop here guys in the next video we're going to handle the situation where

215
00:16:10,810 --> 00:16:12,510
they lose.

216
00:16:12,790 --> 00:16:18,400
All right so we're going to want to subtract from the number of guesses which is this or guesses left

217
00:16:18,820 --> 00:16:21,000
and we're going to want to notify them.

218
00:16:21,040 --> 00:16:28,540
How many guesses they have left and notify them that the number they entered was wrong.

219
00:16:28,540 --> 00:16:30,370
All right so I will see you in the next video.