WEBVTT

0
00:00.110 --> 00:05.750
This is a really, really cool example because we're applying the progress bar to a form and this course

1
00:05.750 --> 00:06.860
is all about forms.

2
00:06.860 --> 00:07.760
How do we build it?

3
00:07.790 --> 00:09.410
Well, there are 3 facets.

4
00:09.440 --> 00:13.280
There's the HTML, the CSS, and of course, the JavaScript.

5
00:13.280 --> 00:15.650
So let's start off with the HTML.

6
00:15.680 --> 00:20.080
Then we can continue on to the CSS and finally we can finish off the JavaScript.

7
00:20.090 --> 00:22.250
So let's start with HTML.

8
00:22.280 --> 00:24.050
Yes, we're going to need to style, 

9
00:24.050 --> 00:28.940
so let me just set everything up. But for now we can just leave that blank, and wrap everything within

10
00:28.940 --> 00:29.560
a body.

11
00:29.570 --> 00:31.820
I do want a form

12
00:32.510 --> 00:35.180
because, you know, this is an example of a form.

13
00:35.960 --> 00:40.790
Let's actually give it an ID of mainForm and then we can wrap everything within here.

14
00:40.820 --> 00:44.060
We can have a heading called Progress Form.

15
00:44.060 --> 00:48.570
And then what I want to do, is I want to create our progress.

16
00:48.590 --> 00:52.790
Remember, it's at the very top under the heading and I want to wrap this in a div.

17
00:52.790 --> 00:56.750
Let's just give it a class of headingWrapper for lack of a better word.

18
00:56.750 --> 00:59.990
And within this div I want to include our progress bar.

19
01:00.650 --> 01:02.900
I want to give it those two important attributes.

20
01:02.900 --> 01:03.980
Do you remember what they are?

21
01:05.150 --> 01:05.960
That's right.

22
01:05.960 --> 01:12.620
I want to do a max attribute of 100 and the starting value is going to be zero.

23
01:13.310 --> 01:18.050
I want to give this an ID as well, just so we can grab it later in JavaScript and let's just give it

24
01:18.050 --> 01:19.680
an ID of progress.

25
01:19.700 --> 01:20.690
Very, very simple.

26
01:20.720 --> 01:24.200
The other thing below this progress bar was what?

27
01:24.410 --> 01:25.070
That's right.

28
01:25.070 --> 01:27.140
There was a cool funky message to the user.

29
01:27.140 --> 01:30.740
So let's wrap that in a div and give it an ID of message.

30
01:31.340 --> 01:36.320
And the default value can just be "The form, its calling you". 

31
01:36.530 --> 01:37.370
So there we go.

32
01:37.370 --> 01:42.500
We've got our heading, we've got our progress bar and we've got the message displayed below it.

33
01:42.650 --> 01:43.730
Let me go to the browser.

34
01:43.760 --> 01:46.190
Let's refresh and this is what it looks like.

35
01:46.190 --> 01:48.730
You can see it's starting to take shape. Below this, 

36
01:48.740 --> 01:53.000
we obviously want all the input elements, and then below that the submit button.

37
01:53.360 --> 01:55.340
So let's quickly create that now.

38
01:56.210 --> 01:57.650
We are still in our form.

39
01:57.650 --> 01:59.120
We are still in our form.

40
01:59.120 --> 02:00.920
And we don't have to in this example,

41
02:00.920 --> 02:05.390
but I want to just, you know, you need to get in the good habit of creating labels with every form

42
02:05.390 --> 02:07.670
control to improve user experience.

43
02:07.670 --> 02:08.810
So let's create a label.

44
02:08.810 --> 02:16.100
This can be question one, and of course, question one, and we can create an input of type text.

45
02:16.130 --> 02:18.560
We don't need a name attribute here.

46
02:18.590 --> 02:22.280
The ID has to match the for attribute, which is q1.

47
02:22.280 --> 02:23.870
And remember what I said?

48
02:23.870 --> 02:26.480
I want all of these to be required.

49
02:26.480 --> 02:32.270
And in order to do that, yes, we include the required attributes on the input type of text.

50
02:32.270 --> 02:32.690
Okay.

51
02:32.690 --> 02:33.590
So there we go.

52
02:33.770 --> 02:35.810
That's our question one.

53
02:35.990 --> 02:39.560
And we literally need to do this 5 times, right?

54
02:39.560 --> 02:40.520
This is two.

55
02:42.410 --> 02:43.250
two.

56
02:44.060 --> 02:44.780
Two.

57
02:47.020 --> 02:47.830
Three.

58
02:50.000 --> 02:50.750
Four. 

59
02:52.160 --> 02:53.000
And five.

60
02:54.250 --> 03:01.560
If we save this, we go to the browser refresh and boom, we've pretty much done our HTML.

61
03:01.590 --> 03:03.120
How quick is this?

62
03:03.870 --> 03:04.740
Let's just go here.

63
03:04.740 --> 03:07.410
And the last step is to create our button.

64
03:07.650 --> 03:13.380
So we want a button element, with its type attribute set to submit.

65
03:14.430 --> 03:17.460
We save this, go to the browser and there we go

66
03:17.490 --> 03:19.260
my dear students! We're done with the HTML.

67
03:19.290 --> 03:20.310
How quick was that?

68
03:20.340 --> 03:23.910
I know we're cruising very quickly, but I think you're getting the hang of all of this now.

69
03:23.910 --> 03:30.780
So let's quickly now take all our HTML, which is done, but apply CSS styling to it.

70
03:30.810 --> 03:37.160
Okay. Let's grab our body element, change its background color to what?

71
03:37.170 --> 03:39.900
Let's do #333.

72
03:40.170 --> 03:40.860
You know what,

73
03:41.020 --> 03:41.910
shall I put it side by side?

74
03:41.910 --> 03:44.640
Then you can kind of see how it's progressing as we go on.

75
03:44.640 --> 03:47.460
I want the line height to be slightly higher than usual.

76
03:47.460 --> 03:48.870
So let's do 1.2.

77
03:48.900 --> 03:51.180
So all these little subtle things that really make a difference.

78
03:51.180 --> 03:53.760
I want to add padding, say 20 pixels.

79
03:54.120 --> 03:54.740
There we go.

80
03:54.750 --> 04:00.330
I don't like, you see how all the input elements and the labels are displayed inline by default.

81
04:00.540 --> 04:07.050
So why don't we take our label, our labels, and we'll affect their display property to block.

82
04:07.410 --> 04:12.430
And we can also change the color of the actual text to the same color as the background.

83
04:12.450 --> 04:16.990
I know you won't see anything now, but we're going to change the background color of this whole form

84
04:16.990 --> 04:21.340
shortly. And then the margin on the bottom,

85
04:22.180 --> 04:23.710
I just want to affect that.

86
04:24.340 --> 04:25.600
Let's do 5 pixels.

87
04:25.630 --> 04:26.350
There we go.

88
04:26.470 --> 04:31.240
Actually, before I move on, let's just quickly grab our main form.

89
04:31.330 --> 04:34.180
Remember, we gave it an ID of mainForm.

90
04:34.180 --> 04:35.110
Can you see it?

91
04:36.050 --> 04:37.040
That's all we're doing here.

92
04:37.250 --> 04:40.520
And I want to give it a background, just so you can see what's going on

93
04:40.550 --> 04:42.050
otherwise, you're going to get confused.

94
04:42.960 --> 04:45.510
And let's just do a nice blue color, right?

95
04:48.200 --> 04:48.710
There you go.

96
04:48.740 --> 04:49.270
There you go.

97
04:49.280 --> 04:50.730
Now you can kind of see what I'm doing.

98
04:50.750 --> 04:53.420
I also don't want the form stretched across the entire screen.

99
04:54.290 --> 04:55.400
So let's give it a width.

100
04:55.760 --> 04:57.020
Yeah, that's better.

101
04:57.290 --> 04:59.840
I don't like the squareness of it.

102
04:59.840 --> 05:04.580
So in order to affect that, we've got to change its border-radius property.

103
05:04.970 --> 05:06.800
Let's just have a small rounded edge.

104
05:06.800 --> 05:07.460
There you go.

105
05:07.490 --> 05:08.180
It's coming on.

106
05:08.180 --> 05:09.020
It's coming on.

107
05:09.770 --> 05:12.050
And then let's give it a nice padding.

108
05:12.500 --> 05:15.570
It starts at the top, right,

109
05:15.620 --> 05:17.630
bottom left.

110
05:18.720 --> 05:19.440
Look at that.

111
05:19.440 --> 05:22.250
You can already see it's starting to take shape.

112
05:22.260 --> 05:23.130
So there we go.

113
05:23.130 --> 05:24.510
That's our main form.

114
05:24.510 --> 05:25.680
There's our label.

115
05:26.040 --> 05:29.880
And if I didn't have this margin, bottom, bottom, let me show you what happens.

116
05:29.910 --> 05:31.590
It's just too bunched up.

117
05:31.590 --> 05:37.080
The input element is so close to the label, which is why I just added 5 pixels below it.

118
05:37.110 --> 05:39.390
Okay, we've affected the styling of the label.

119
05:39.390 --> 05:40.080
What's next?

120
05:40.080 --> 05:42.090
Well, we haven't done the input itself, have we?

121
05:42.980 --> 05:44.390
So let's grab the input.

122
05:44.480 --> 05:45.770
The width here,

123
05:45.800 --> 05:51.470
why don't we get that stretching across the entire length of the parent, so we can define it as 100%.

124
05:51.590 --> 05:52.250
There we go.

125
05:52.250 --> 05:55.790
And obviously it doesn't hit the edge because we've given it 20 pixels of padding.

126
05:55.900 --> 06:01.460
You know, if we actually gave it zero pixels on the right of padding, then it would hit the edge.

127
06:02.030 --> 06:03.490
That's why we gave it padding.

128
06:03.500 --> 06:04.550
It just looks nicer.

129
06:04.550 --> 06:05.090
So there we go.

130
06:05.090 --> 06:06.680
That's the width of 100%.

131
06:07.400 --> 06:08.510
The display property,

132
06:08.510 --> 06:11.210
I don't think it shouldn't actually matter here.

133
06:11.510 --> 06:17.240
And we've defined the labels as blocks, but I just want to put display block because intuitively that's

134
06:17.240 --> 06:18.620
how I think they should be.

135
06:18.620 --> 06:23.330
And then let's give some padding to each input box just to make it a bit bigger.

136
06:23.420 --> 06:27.410
Now what I want is I want to remove the outline, right. When the user selects an input,

137
06:27.410 --> 06:28.840
can you see that black outline?

138
06:28.850 --> 06:29.960
I don't want that there.

139
06:29.990 --> 06:32.540
So let's just basically define it as zero pixels.

140
06:32.540 --> 06:35.720
So when the user now toggles each one, there is no outline.

141
06:35.810 --> 06:38.690
It's also got a border if you can see it.

142
06:38.690 --> 06:40.250
But I don't want the border.

143
06:40.250 --> 06:44.550
So let's also just get rid of that and all the input elements are too close to each other.

144
06:44.550 --> 06:48.150
So let's give it a margin bottom of 10 pixels.

145
06:48.900 --> 06:51.140
That's coming on quite nicely.

146
06:51.150 --> 06:54.540
We've defined styling for the label, the inputs ...

147
06:54.580 --> 06:54.750
what else?

148
06:54.990 --> 06:56.100
We've got the button, right?

149
06:56.100 --> 06:57.240
So let's grab our button.

150
06:57.240 --> 06:58.290
Let's quickly style that.

151
06:58.290 --> 07:02.940
We can give it a background of the same color as the actual background on the page.

152
07:03.510 --> 07:06.660
The width can be 100% padding.

153
07:07.990 --> 07:08.460
There we go.

154
07:08.470 --> 07:09.880
10 pixels looks fine.

155
07:10.210 --> 07:11.410
Margin top,

156
07:12.070 --> 07:14.800
it's a bit too close, right, to that input box.

157
07:14.800 --> 07:15.400
There we go.

158
07:15.430 --> 07:16.210
Looks better.

159
07:16.690 --> 07:18.100
Font size,

160
07:18.100 --> 07:19.630
let's increase it a bit.

161
07:19.660 --> 07:20.890
1.1em.

162
07:21.710 --> 07:23.150
Yeah, that's better.

163
07:23.570 --> 07:25.460
Color can be white.

164
07:25.850 --> 07:28.430
I don't like that default border on this button either.

165
07:28.430 --> 07:32.150
So let's define a border of 1 pixel solid

166
07:33.980 --> 07:34.690
dark black. 

167
07:34.700 --> 07:36.230
Yeah, I think that looks nice.

168
07:36.950 --> 07:40.970
Cursor can be a pointer, just so the user knows it is actually a button.

169
07:41.510 --> 07:43.490
And then why don't we give this a box

170
07:43.490 --> 07:44.390
shadow property? 

171
07:45.590 --> 07:45.940
Right.

172
07:45.940 --> 07:46.360
Very quick.

173
07:46.360 --> 07:47.430
Very quick, very quick.

174
07:47.440 --> 07:48.640
We've done this all before.

175
07:55.000 --> 07:55.870
Yeah, that looks nice.

176
07:55.870 --> 07:56.630
That looks nice.

177
07:56.650 --> 08:00.640
Just to make it kind of tie in with the form, I don't like the squareness of this button.

178
08:00.640 --> 08:04.480
And in order to change that, we affect the border-radius property.

179
08:04.660 --> 08:06.940
Let's just make it slightly rounded corners.

180
08:06.940 --> 08:07.660
There we go.

181
08:07.870 --> 08:09.280
Okay, so that's the button.

182
08:10.240 --> 08:11.380
What else do we have to do?

183
08:11.980 --> 08:13.900
Oh, we want to do the header, right?

184
08:13.930 --> 08:15.550
It doesn't look that great at the moment.

185
08:15.580 --> 08:19.120
In order to style that, we gave it a class of headingWrapper.

186
08:19.150 --> 08:20.070
That's right.

187
08:20.080 --> 08:22.600
Class of headingWrapper.

188
08:23.080 --> 08:24.880
Font size,

189
08:24.910 --> 08:26.170
let's make it a bit smaller.

190
08:26.950 --> 08:28.660
Color white.

191
08:29.290 --> 08:30.220
There we go.

192
08:30.370 --> 08:31.420
Text align,

193
08:31.420 --> 08:36.010
let's get this thing in the center. Man, you can see how nicely and how quick this is.

194
08:36.040 --> 08:37.080
It's really, really cool.

195
08:37.090 --> 08:38.530
And let's just give this a margin,

196
08:38.530 --> 08:38.840
right?

197
08:38.860 --> 08:43.540
Top of 0, right of 0, bottom 20 and then left of 0.

198
08:43.630 --> 08:45.850
So we are just effectively doing margin-bottom.

199
08:45.850 --> 08:46.810
I don't have to do that.

200
08:46.810 --> 08:50.190
I could just go margin-bottom 20 pixels.

201
08:50.200 --> 08:51.010
It's the same thing.

202
08:51.040 --> 08:53.820
Next, I want to just style a little bit of that progress bar.

203
08:53.830 --> 08:56.300
I don't like it that it's bunched up in the center like that.

204
08:56.300 --> 09:01.160
So let's grab our progress element, and let's make it a bit higher.

205
09:02.300 --> 09:03.530
Yeah, that's better.

206
09:03.830 --> 09:07.250
And I wanted to stretch across the entire width of the form.

207
09:07.280 --> 09:08.040
There you go.

208
09:08.060 --> 09:10.010
And it doesn't hit the edges, remember,

209
09:10.010 --> 09:12.930
because we've given the edges 20 pixels of padding.

210
09:12.950 --> 09:14.840
Maybe it's a bit close to the text beneath it.

211
09:14.840 --> 09:17.120
So let's give also some margin-bottom,

212
09:17.360 --> 09:17.780
I don't know, of

213
09:17.780 --> 09:18.650
3 pixels.

214
09:19.010 --> 09:19.460
There you go.

215
09:19.490 --> 09:20.150
There you go.

216
09:20.840 --> 09:22.410
Then the final thing I want to do,

217
09:22.430 --> 09:24.590
remember, these inputs are required fields.

218
09:24.740 --> 09:28.190
If the user types, there's no visual feedback that you know it's valid.

219
09:28.190 --> 09:29.150
All we have to do,

220
09:29.180 --> 09:29.900
do you remember?

221
09:29.930 --> 09:30.720
That's right.

222
09:30.740 --> 09:34.880
We target our inputs, and we want to target the :valid pseudo class.

223
09:34.880 --> 09:41.990
And all I want to do is change the background color to a nice light green color.

224
09:44.140 --> 09:44.800
How does this look?

225
09:45.460 --> 09:45.820
Let's go

226
09:45.820 --> 09:46.030
here.

227
09:46.240 --> 09:46.840
Let's type .... 

228
09:46.870 --> 09:48.370
Oh, that is just beautiful.

229
09:49.610 --> 09:50.420
Let's zoom out.

230
09:50.510 --> 09:52.130
And here we go.

231
09:52.910 --> 09:53.360
HTML done ✅.

232
09:54.140 --> 09:54.620
CSS done ✅.

233
09:54.650 --> 09:57.710
The only thing left is ... JavaScript.

234
09:58.220 --> 10:04.700
And what we want to do is we want to dynamically update this progress bar and the messages so that when

235
10:04.700 --> 10:09.950
the user starts filling in the form, their progress bar kind of visually tells the user how far along

236
10:09.950 --> 10:15.080
they are and the user gets different messages, motivational messages to keep going.

237
10:15.260 --> 10:20.540
Think about how it is we can do it. Because I want to take a break now, and in the next lecture, let's

238
10:20.570 --> 10:23.480
add JavaScript and let's complete this solution.

239
10:23.480 --> 10:24.320
I can't wait.