WEBVTT

0
00:00.080 --> 00:01.340
Did you give it a go?

1
00:01.520 --> 00:02.290
I hope so.

2
00:02.300 --> 00:04.550
But if not, it is a bit tricky, so don't worry.

3
00:04.550 --> 00:06.260
I'm going to be showing you how to do it now.

4
00:06.260 --> 00:08.540
But think about it ... before we start on the JavaScript,

5
00:08.540 --> 00:12.020
just think about how we will go about doing it.

6
00:12.320 --> 00:19.010
Firstly, we've got to listen for an event. And when the user starts typing in this input box, I'm going

7
00:19.010 --> 00:20.930
to be listening for the keyup event.

8
00:21.330 --> 00:23.240
It probably doesn't have to be the keyup event.

9
00:23.240 --> 00:27.740
You could have probably listened for when the user clicks out of the box, like the blur event, for example.

10
00:27.740 --> 00:28.730
It doesn't matter.

11
00:28.730 --> 00:30.830
You just have to listen for an event that's appropriate.

12
00:30.830 --> 00:32.450
I'm going to listen for the keyup event.

13
00:32.450 --> 00:34.400
Every time that event is fired,

14
00:34.400 --> 00:41.750
we have to now determine how many of these input elements are valid, because this progress bar has to

15
00:41.750 --> 00:45.860
tell the user how close they are to completing the form.

16
00:46.100 --> 00:51.530
So when there's only ... and this is the reason I chose 5, by the way, because when there's only one

17
00:51.530 --> 00:55.610
question that's valid, we know that 20% of the progress bar is complete.

18
00:55.610 --> 01:02.100
In other words, we want to dynamically update the value attribute of the progress element to 20. When

19
01:02.100 --> 01:08.850
two are selected, we want to update it to 40, then 60, 80.

20
01:08.850 --> 01:12.210
And when the last question is hit, I don't actually want to do it as 100.

21
01:12.210 --> 01:16.920
I want to do it very, very close to 100 because the user still has to click on submit.

22
01:17.010 --> 01:18.570
So it's just a very easy way.

23
01:18.570 --> 01:24.570
That's why I chose 5 numbers because 100 divided by five is 20. Very easy jumps 

24
01:24.570 --> 01:27.540
we are doing so. That's the first thing we've got to do with JavaScript.

25
01:27.690 --> 01:33.030
We have to find a way to loop through all those inputs, figure out how many are valid. And the ones

26
01:33.030 --> 01:33.840
that are valid

27
01:33.840 --> 01:35.460
we count, right?

28
01:35.460 --> 01:37.440
If there are two valid, we show 40.

29
01:37.470 --> 01:39.900
If there are three valid, we show 60, etc etc.

30
01:40.020 --> 01:45.780
The second thing we want to do is we want to show dynamic messages to the user.

31
01:46.140 --> 01:49.590
Right now the message is "The form, is calling you".

32
01:50.770 --> 01:54.370
But as you saw in the introduction video, we want that to change.

33
01:54.370 --> 01:57.850
So those are two things we have to change every time we listen for the keyup event.

34
01:57.880 --> 01:58.780
Have you got it?

35
01:58.810 --> 01:59.380
Cool.

36
01:59.380 --> 02:00.850
Let's get cracking.

37
02:01.090 --> 02:02.770
Let me expand our editor here.

38
02:02.880 --> 02:04.570
So now we're going to be getting into JavaScript.

39
02:04.990 --> 02:08.650
Remember, JavaScript has to be included in script tags.

40
02:08.770 --> 02:09.450
Okay.

41
02:09.460 --> 02:09.850
Okay.

42
02:09.850 --> 02:12.040
This is where we need to just think logically through this.

43
02:12.040 --> 02:17.380
The first step should be to grab all of our elements we need from the page.

44
02:17.650 --> 02:20.140
Let's grab all of

45
02:21.250 --> 02:22.630
our elements.

46
02:23.230 --> 02:23.980
How do we do that?

47
02:23.980 --> 02:24.900
Well, very easy.

48
02:24.910 --> 02:29.250
Let's first grab our progress bar, and put it in a variable called progressBar.

49
02:29.260 --> 02:31.480
I know, very boring, but it's very intuitive.

50
02:31.570 --> 02:34.930
We can do so by accessing our document object,

51
02:34.960 --> 02:37.180
getElementsByTagName(). 

52
02:37.630 --> 02:41.470
The tag name we want to get is "progress".

53
02:41.590 --> 02:46.660
And remember that when we use the getElementsByTagName() - you'll know if you've done my DOM courses -

54
02:46.690 --> 02:50.440
this returns an HTMLCollection. But we don't want a collection.

55
02:50.440 --> 02:52.540
We want the actual progress bar itself.

56
02:52.540 --> 02:57.370
And if you look at our HTML, we only have one progress element.

57
02:57.460 --> 03:01.870
So therefore we can just access the first item in that collection.

58
03:01.870 --> 03:02.470
So there we go.

59
03:02.470 --> 03:03.640
We've got our progress bar.

60
03:03.640 --> 03:04.480
How easy.

61
03:04.600 --> 03:10.960
The next thing I want to do is I want to grab our message element, right, our message, because we want

62
03:10.960 --> 03:12.460
to dynamically update that as well.

63
03:12.460 --> 03:16.330
We wrapped it in a div, and we gave that div an ID of message.

64
03:16.330 --> 03:21.530
So here I'm defining a variable called message in JavaScript, and we want to get it, right,

65
03:21.530 --> 03:27.170
document.getElementById(), and the ID we gave it was message.

66
03:27.620 --> 03:28.130
So there we go.

67
03:28.130 --> 03:30.140
We've got our message, we've got our progress bar.

68
03:30.170 --> 03:36.680
The other thing I want to grab is our form because we're going to be listening for events on the form

69
03:36.680 --> 03:37.400
itself.

70
03:37.460 --> 03:44.090
(sound effect: what!) Whaaat? Shouldn't we be listening for the events on the actual input elements, not the form?

71
03:44.090 --> 03:50.720
Well, if you've done my DOM courses, you'll know this, but events, not all events, but a lot of

72
03:50.720 --> 03:52.340
events, bubble.

73
03:52.340 --> 03:55.070
They bubble up through the DOM tree.

74
03:55.070 --> 04:01.550
So even though the event is being fired from an input element below, we know that that event will bubble

75
04:01.550 --> 04:03.590
up to the form element itself.

76
04:03.590 --> 04:08.240
So that's why we can actually listen for all events on the form element, and we don't have to individually

77
04:08.240 --> 04:10.730
add an event on every single input element.

78
04:10.730 --> 04:15.170
So in order to listen for an event on the form, we obviously have to grab our form.

79
04:15.170 --> 04:20.780
So we grab our form by accessing the document object, getElementById() again.

80
04:20.780 --> 04:24.530
And we gave it an ID of mainForm, right?

81
04:24.530 --> 04:28.430
If I scroll up, we gave our form an ID of mainForm.

82
04:30.500 --> 04:30.920
Cool.

83
04:31.490 --> 04:35.970
So we've got our progress bar, we've got our message div element, and we have our form.

84
04:35.990 --> 04:40.310
The last thing we need is our required inputs.

85
04:40.340 --> 04:46.340
The reason we need all of these inputs, scroll up, all of these inputs, is because we have to loop

86
04:46.340 --> 04:49.970
through each one to determine how many of them are valid.

87
04:50.630 --> 04:51.080
Right.

88
04:51.080 --> 04:55.730
Because that's going to determine the values of our value attribute and our message.

89
04:55.730 --> 04:59.840
So let's define a new JavaScript variable called requiredInputs.

90
05:00.080 --> 05:03.290
And yes, we are accessing the document object. On here,

91
05:03.290 --> 05:10.700
we can getElementsByTagName(), and the tag name we want to get is input, not inputs, input.

92
05:10.730 --> 05:17.630
Now remember, this getElementsByTagName() returns a collection, but this time we want to keep the

93
05:17.630 --> 05:21.980
collection because we need to loop through that entire collection to determine how many of these inputs

94
05:21.980 --> 05:22.640
are valid.

95
05:22.640 --> 05:24.440
It's not the same with the progress bar.

96
05:24.450 --> 05:25.310
Remember the progress bar?

97
05:25.310 --> 05:31.980
We only have one progress bar and that's why we access the first item in the collection with that zero

98
05:32.010 --> 05:35.010
array syntax retrieval method.

99
05:35.860 --> 05:42.100
I want to add an event listener on the form itself and remember,

100
05:43.030 --> 05:52.300
we can do this because the event of keyup will bubble up the DOM tree.

101
05:53.010 --> 05:55.740
That's just so that you remember how or why we can do this.

102
05:55.740 --> 05:59.820
So let's grab our form element that we defined above, or our variable, 

103
05:59.940 --> 06:03.240
and on here, you guessed it, we want to add an event listener.

104
06:03.270 --> 06:06.630
The event we want to listen for is the keyup event.

105
06:06.750 --> 06:13.830
And when the keyup event is fired, we want to execute our code, our business logic, and it's all

106
06:13.830 --> 06:16.620
going to sit within these curly braces.

107
06:16.620 --> 06:18.110
What are the steps here?

108
06:18.120 --> 06:27.570
Well, the first step is, let's define a variable that keeps track of all the valid inputs.

109
06:28.080 --> 06:35.640
So right now, when we initiate the page load, we know that our validInputs variable, we've just

110
06:35.640 --> 06:36.270
made that up,

111
06:36.270 --> 06:38.040
we're going to set that at zero.

112
06:38.070 --> 06:40.950
There are going to be zero valid inputs, right,

113
06:40.950 --> 06:41.640
initially.

114
06:41.640 --> 06:48.270
The next thing is, and I keep saying this, is we need to loop through all of the inputs

115
06:49.560 --> 06:51.990
in our collection

116
06:53.030 --> 06:56.930
and determine if they are valid.

117
06:57.920 --> 07:00.200
If an input is valid,

118
07:01.050 --> 07:03.780
then we want to increase

119
07:04.800 --> 07:08.370
our validInputs variable.

120
07:09.270 --> 07:10.410
Does that make sense?

121
07:11.310 --> 07:11.940
I hope so.

122
07:11.970 --> 07:12.630
I hope so.

123
07:14.250 --> 07:14.930
Actually, you know what,

124
07:14.940 --> 07:17.580
let me just show you first that this is a collection.

125
07:17.580 --> 07:23.160
So all I want to do is I want to console log our requiredInputs to the console.

126
07:23.490 --> 07:24.990
So let's go to the browser.

127
07:25.290 --> 07:27.240
Let's inspect this element.

128
07:28.740 --> 07:31.130
Go to the console and write,

129
07:31.160 --> 07:34.150
let's type the letter "a", and there we go.

130
07:34.160 --> 07:36.170
We've got an HTMLCollection.

131
07:36.170 --> 07:37.160
That's just what I wanted to show you.

132
07:37.160 --> 07:38.000
I wanted to prove it to you.

133
07:38.000 --> 07:40.250
And it's got all of our inputs in here.

134
07:40.850 --> 07:41.150
Okay.

135
07:41.150 --> 07:44.060
It's got length of 5, so that makes sense.

136
07:44.450 --> 07:48.020
Sorry, I just wanted to show you before we kept going on.

137
07:48.140 --> 07:48.920
So there we go.

138
07:48.920 --> 07:52.550
We've got a collection. We know that requiredInputs is a collection.

139
07:52.550 --> 07:54.820
So how do we loop through it?

140
07:54.830 --> 07:58.520
Well, we can use the for...of JavaScript method, right.

141
07:58.520 --> 08:00.050
The for...of method.

142
08:00.050 --> 08:03.080
And how this for...of works is it's very, very simple.

143
08:03.080 --> 08:05.810
It loops through each item in this element.

144
08:05.840 --> 08:06.650
Let me open this up.

145
08:06.650 --> 08:11.960
It's going to loop through each input, and on the first loop it's going to give us the first input as

146
08:11.960 --> 08:15.050
an object and we can define that object as anything we want.

147
08:15.080 --> 08:19.340
Let's define that object as input, because that's what the object is.

148
08:19.340 --> 08:20.360
It's an input.

149
08:20.510 --> 08:23.210
And then you've got to define the collection that it's looping through.

150
08:23.210 --> 08:26.840
In our case, it's the requiredInputs collection.

151
08:27.080 --> 08:27.440
Okay.

152
08:27.440 --> 08:29.610
So every time it loops through, what do we want to happen?

153
08:29.610 --> 08:32.790
Well, we want to check whether that input is valid, right?

154
08:32.790 --> 08:36.690
Whether the valid property exists, whether it's on.

155
08:36.840 --> 08:40.080
So what we can effectively do is just do a simple IF statement.

156
08:40.110 --> 08:47.940
We can grab our input that it's looping through, in its current iteration, and we can access its validity

157
08:47.970 --> 08:48.600
object.

158
08:48.600 --> 08:51.300
Within there there's a property called valid.

159
08:51.300 --> 08:54.120
And if that is true, this IF statement will execute.

160
08:54.120 --> 08:56.940
And if it is true, we know it's valid,

161
08:56.940 --> 09:03.390
and then we want to grab our validInputs variable and we want to increase its value by one.

162
09:03.390 --> 09:05.280
That's just what the plus plus ++ means.

163
09:05.280 --> 09:08.040
We grab it and we increase its value by one.

164
09:08.040 --> 09:13.920
And this is very crucial code because this is the entire looping code we need.

165
09:13.920 --> 09:19.230
It's going to tell us how many valid inputs there are, and it does work, right?

166
09:19.230 --> 09:26.340
So after this loop, why don't I just here console log valid inputs and I'll show you.

167
09:26.430 --> 09:27.420
Let's go to our browser.

168
09:27.450 --> 09:33.410
Let's refresh everything. And let's just do question one - type the letter "a", we've got a valid input

169
09:33.410 --> 09:34.100
of one.

170
09:34.670 --> 09:36.530
Let's do question two.

171
09:37.470 --> 09:40.880
Now the number is two, and three, and four, and five.

172
09:40.890 --> 09:41.730
How awesome.

173
09:41.730 --> 09:43.800
This is perhaps the hardest bit of code.

174
09:43.800 --> 09:44.850
And we've done it.

175
09:44.850 --> 09:46.800
And you can see it wasn't that difficult, was it?

176
09:46.830 --> 09:51.390
Let's go back here and let's finish this off because now we've got how many inputs are valid.

177
09:51.390 --> 09:53.790
And that is crucial, crucial for us.

178
09:53.820 --> 09:54.810
It's very, very simple

179
09:54.810 --> 09:59.970
now to finish off, because all we have to do now is change the value of the

180
10:00.980 --> 10:05.030
progress bar and the message

181
10:05.850 --> 10:09.570
depending on how many inputs are valid,

182
10:10.850 --> 10:19.400
are valid, i.e. depending on the value of the validInputs variable.

183
10:20.570 --> 10:21.860
Is this making sense?

184
10:22.690 --> 10:23.250
I hope so.

185
10:23.260 --> 10:23.890
I hope so.

186
10:23.920 --> 10:27.350
So all we have to do now is just define multiple IF statements,

187
10:27.370 --> 10:28.000
right.

188
10:28.030 --> 10:30.220
If the validInputs

189
10:31.020 --> 10:32.220
is one,

190
10:32.790 --> 10:35.070
then what do we want to happen?

191
10:35.070 --> 10:41.960
Well, we want to grab our message variable and we defined that as that div with an ID of message.

192
10:41.970 --> 10:45.510
If I scroll up in our HTML, we are literally grabbing that div

193
10:47.080 --> 10:48.520
with ID of message.

194
10:49.150 --> 10:57.970
That's what we're doing. And we want to change its innerHTML property to, I don't know, because it's the

195
10:57.970 --> 10:59.140
first input they've done,

196
10:59.140 --> 11:00.790
let's just give them a bit of encouragement.

197
11:00.820 --> 11:02.920
"Nice. Good start."

198
11:02.950 --> 11:04.780
So now we've changed the message.

199
11:04.780 --> 11:07.870
The next thing I want to do is I want to affect our progress bar.

200
11:07.870 --> 11:11.260
We gave it a variable name of progressBar.

201
11:11.500 --> 11:19.450
We want to access a method now and the DOM or HTML gives us this method, setAttribute(), and we want to

202
11:19.450 --> 11:20.290
set which attribute?

203
11:20.320 --> 11:26.470
We want to set its value attribute, and we want to set its value to what? You guessed it, 20 because only

204
11:26.470 --> 11:29.310
one input is valid.

205
11:29.320 --> 11:35.740
So if we go to our browser, let's get rid of the console now. And let's type "a" in question

206
11:35.740 --> 11:37.930
one. How awesome is that?

207
11:37.930 --> 11:42.430
The progress bar is updated and the message has been updated to us as well.

208
11:42.430 --> 11:45.070
I hope this is putting a huge smile on your face ☺.

209
11:45.100 --> 11:47.690
It really, really is cool, isn't it?

210
11:48.110 --> 11:48.890
All right.

211
11:48.890 --> 11:50.540
But we're not finished, are we?

212
11:50.990 --> 11:52.790
Let's keep working through this.

213
11:53.270 --> 11:54.620
We need another one.

214
11:54.620 --> 11:56.300
Another one, Another one, Another one.

215
11:56.660 --> 11:59.540
So let's say this is number two.

216
11:59.570 --> 12:00.890
If there are two valid inputs,

217
12:00.920 --> 12:02.240
what do we want to say?

218
12:02.270 --> 12:05.780
We can say "Eggcellent. 

219
12:06.320 --> 12:08.150
Keep on cracking."

220
12:08.150 --> 12:10.520
And of course, this value is going to be 40.

221
12:12.000 --> 12:14.040
Uh, this one's going to be three.

222
12:14.070 --> 12:17.850
This one's going to be four, and this one's going to be five.

223
12:17.940 --> 12:20.790
This is going to be 60, 80.

224
12:20.790 --> 12:24.840
And like I mentioned in the introduction, let's have 95 rather than 100.

225
12:24.990 --> 12:27.030
The last comment can be,

226
12:27.910 --> 12:30.520
"Go on, push

227
12:30.520 --> 12:31.480
submit."

228
12:32.530 --> 12:35.140
When we're 80% done, we can say

229
12:37.980 --> 12:41.130
"whoop whoop, almost done." When you are 60% done, 

230
12:41.520 --> 12:44.840
we can say "Champion. Don't stop."

231
12:44.850 --> 12:47.100
Let's go to our browser and let's give this a test. Question

232
12:47.100 --> 12:48.510
one, "Nice. Good start". 

233
12:48.510 --> 12:50.670
Question two, "Eggcellent. 

234
12:50.700 --> 12:51.990
Keep on cracking."

235
12:51.990 --> 12:53.870
Question three, "Champion. Don't stop."

236
12:53.880 --> 12:56.250
Question four "Whoop whoop ... almost done."

237
12:56.250 --> 12:56.640
And

238
12:56.640 --> 12:58.080
question 5 "Go on, push

239
12:58.080 --> 12:58.770
submit."

240
12:59.190 --> 13:00.570
Come on.

241
13:00.600 --> 13:02.250
How awesome is this?

242
13:02.880 --> 13:04.650
Oh, I hope you're smiling right now.

243
13:04.650 --> 13:05.820
I hope you're having a lot of fun.

244
13:06.270 --> 13:08.130
Very, very cool example, isn't it,

245
13:08.130 --> 13:13.230
to show you how we can use the progress bar in a very practical way on forms.

246
13:13.350 --> 13:15.210
I know I could have styled this a bit better.

247
13:15.210 --> 13:19.830
We could have done a few more things, but I wanted you to at least have the skill set to now be able

248
13:19.830 --> 13:22.560
to apply it to real life applications.

249
13:22.560 --> 13:23.880
And I hope you understood everything.

250
13:23.880 --> 13:25.170
If not, ask on Q&A.

251
13:25.200 --> 13:29.220
I'm here to help you. There are many different ways to also, you know, to code.

252
13:29.850 --> 13:31.830
You know, I'm not saying my way is the best way.

253
13:31.860 --> 13:35.970
Obviously, if we remove these things, it goes through the loop again and it updates.

254
13:36.480 --> 13:39.160
So yes, there are many different ways to do something.

255
13:39.160 --> 13:40.540
This is just one way.

256
13:40.750 --> 13:43.840
But anyway, before I start babbling on too long, let's move on.

257
13:43.870 --> 13:44.950
See you in the next lecture.