WEBVTT

0
00:00.260 --> 00:00.740
Come on.

1
00:00.740 --> 00:01.370
Welcome back.

2
00:01.370 --> 00:02.180
Welcome back.

3
00:02.180 --> 00:03.050
Super amped [excited].

4
00:03.050 --> 00:05.240
And unfortunately, my coffee is almost finished 😥.

5
00:06.500 --> 00:08.840
Anyway, I'm having a lot of fun.

6
00:09.050 --> 00:16.280
Now I want us to add or target the valid and invalid pseudo classes to just pizzazz this up, to really

7
00:16.280 --> 00:19.610
add a bit of kazoom, kazam, pizzazz 🤩. 

8
00:19.610 --> 00:21.980
But how should we do it?

9
00:22.430 --> 00:25.130
Well, I guess there are many ways to do things when it comes to coding.

10
00:25.130 --> 00:26.690
I'm not saying my way is the only way.

11
00:26.690 --> 00:29.060
It's just one of many ways you can do it.

12
00:29.060 --> 00:32.060
And here, remember we've got this span element.

13
00:32.060 --> 00:36.980
Let me just show you in the HTML, we've got these empty spans and when we put that required word on

14
00:36.980 --> 00:37.850
the screen, what did we do?

15
00:37.880 --> 00:38.830
What did we target?

16
00:38.840 --> 00:39.380
That's right.

17
00:39.380 --> 00:43.040
We targeted the ::after pseudo element.

18
00:43.070 --> 00:47.240
Now we want a valid and invalid styling.

19
00:47.240 --> 00:50.510
But specifically I want a check mark and a cross to display.

20
00:50.690 --> 00:57.530
And again I want to target a pseudo element, but we've already targeted the ::after pseudo element,

21
00:57.530 --> 01:02.360
so why don't we target the ::before pseudo element in this case?

22
01:02.360 --> 01:07.100
And then all we need to do is we need to determine its state and depending on the state we can change

23
01:07.100 --> 01:11.480
its content property to either a check mark, or a cross. Have you got it?

24
01:11.510 --> 01:12.230
Not quite. 🤷‍♀️

25
01:12.260 --> 01:12.770
Don't worry.

26
01:12.770 --> 01:15.590
I'm going to show you exactly how to do it right now.

27
01:15.590 --> 01:23.360
So of course, let's go up to our CSS and here let's just put a comment adding valid and invalid

28
01:25.150 --> 01:25.780
styling.

29
01:26.890 --> 01:29.850
Because that is what's missing on this cool little signup form.

30
01:29.860 --> 01:31.600
How do we do it?

31
01:31.630 --> 01:37.120
Well, the first thing I want to do is I want to set the position property of the span before, to absolute.

32
01:37.120 --> 01:41.200
And of course, we could just do it like this, before.

33
01:41.620 --> 01:46.720
But I want to show you how to be more explicit when it comes to CSS selectors. So we can start off at

34
01:46.720 --> 01:49.050
our input and we can target what?

35
01:49.060 --> 01:49.660
That's right.

36
01:49.660 --> 01:54.100
We can target the immediately adjacent sibling span.

37
01:54.100 --> 01:55.450
And that's what that plus means.

38
01:55.450 --> 01:55.930
All right.

39
01:55.930 --> 01:59.800
And like I mentioned, I want to set its position property to absolute.

40
02:00.040 --> 02:01.660
That's all I want to do

41
02:01.660 --> 02:02.470
for now.

42
02:02.560 --> 02:04.480
There's a few more things I'm going to have to add on here.

43
02:04.480 --> 02:06.160
I'm going to have to adjust its position, right?

44
02:06.160 --> 02:07.930
I'm going to have to move it left and up.

45
02:07.930 --> 02:11.560
But let me show you first before I just put figures there.

46
02:11.560 --> 02:14.380
Let's now target the invalid

47
02:15.180 --> 02:16.050
pseudo class.

48
02:17.140 --> 02:20.950
And let's give it a border of 2 pixels, solid red.

49
02:21.520 --> 02:26.860
Okay, so now we know that these two are invalid, but there's still a problem with this.

50
02:26.950 --> 02:29.350
If we just left it here, do you notice

51
02:29.350 --> 02:31.410
you know, let's start typing the name of Wally.

52
02:32.130 --> 02:35.130
If the user then clicks out of this control,

53
02:35.810 --> 02:40.860
we get to that red box again. And it's indicating to us that something's either wrong,

54
02:40.880 --> 02:46.400
I mean, if you recall, that styling actually applies to all our controls that have a required attribute

55
02:46.400 --> 02:46.910
on them.

56
02:47.090 --> 02:48.470
We don't really want that.

57
02:48.500 --> 02:50.090
We don't really want that.

58
02:50.120 --> 02:55.690
When the user types something in first name and last name, we want it to become valid, don't we?

59
02:55.700 --> 03:01.160
And to even be more explicit here, we could have gone inputs where there's a required attribute on

60
03:01.160 --> 03:03.500
them, and it's invalid to do this.

61
03:03.500 --> 03:04.520
So we could do that.

62
03:04.520 --> 03:08.000
But like I mentioned, we want something very similar, but for when it's valid.

63
03:08.000 --> 03:09.860
So we want inputs

64
03:09.860 --> 03:17.720
where it's required attribute is set, but this time where it is :valid. Here we can just change its border

65
03:17.720 --> 03:19.970
property to 1 pixel solid

66
03:20.090 --> 03:26.510
rgba, let's just go 1, 168, 9, 0.8. 

67
03:26.540 --> 03:27.560
What does that look like?

68
03:29.090 --> 03:30.440
The user types, Wally,

69
03:31.300 --> 03:31.960
there we go

70
03:31.960 --> 03:34.000
and deselects the control.

71
03:34.000 --> 03:34.690
It's green

72
03:34.690 --> 03:38.830
now. It's indicating to the user that this is a valid form control.

73
03:38.830 --> 03:40.510
And this could be enough.

74
03:40.510 --> 03:41.260
It could be enough.

75
03:41.260 --> 03:44.160
But I do want to add a bit of pizzazz.

76
03:44.170 --> 03:45.550
I want to be a bit cool here.

77
03:45.550 --> 03:50.140
I want to add a little check mark when it's valid and a cross when it's not.

78
03:50.320 --> 03:51.490
How do we do that?

79
03:51.730 --> 03:53.620
Well, I've already given you clues, haven't I?

80
03:53.650 --> 03:59.860
We need to target the ::before pseudo element. So let's first deal when its ...

81
03:59.860 --> 04:01.210
should we do valid first or invalid?

82
04:01.210 --> 04:02.490
Let's do invalid first.

83
04:02.500 --> 04:08.140
So let's target our input where its state is invalid.

84
04:08.900 --> 04:11.840
But now we want to target the immediately adjacent

85
04:12.530 --> 04:18.050
sibling span, but we want to target the ::before pseudo element.

86
04:18.170 --> 04:21.770
And the content we want to put in here could be anything we want.

87
04:21.830 --> 04:22.070
Right.

88
04:22.070 --> 04:23.000
If I write "WRONG", 

89
04:23.030 --> 04:23.690
there we go

90
04:23.690 --> 04:24.890
we've already got the styling there.

91
04:24.890 --> 04:25.870
But I don't want wrong.

92
04:25.880 --> 04:29.870
I want a nice cross. And we want it to be red, right?

93
04:31.370 --> 04:32.380
Color red.

94
04:32.390 --> 04:33.370
Why is it not working?

95
04:33.380 --> 04:38.600
Oh, I keep forgetting to put the semicolon there, but we don't want the word wrong.

96
04:38.630 --> 04:40.430
We actually want a cross.

97
04:40.430 --> 04:42.110
So I've already got the site here.

98
04:42.110 --> 04:43.400
You've seen this site before -

99
04:44.180 --> 04:45.740
toptal.com.

100
04:45.740 --> 04:48.950
And we can just search here for a cross, I think.

101
04:48.950 --> 04:49.820
Will that work?

102
04:49.910 --> 04:51.440
I wonder if we can just type x?

103
04:51.890 --> 04:57.200
X is better. And then what we can do is we can just highlight it, copy it, go to our text editor and

104
04:57.200 --> 04:58.160
paste it in here.

105
04:58.880 --> 05:02.600
We could have just used our keyboard, by the way, maybe there's a better looking one.

106
05:03.140 --> 05:03.510
I don't know.

107
05:03.530 --> 05:06.920
Just to show you, let's use a funky, funky looking one.

108
05:06.920 --> 05:08.420
Let's put that in here in our code.

109
05:08.840 --> 05:09.500
There we go.

110
05:09.500 --> 05:13.160
And let's go back to our browser and there's a cool cross.

111
05:13.160 --> 05:13.970
How awesome.

112
05:13.970 --> 05:19.340
And because it's position property is set to absolute remember? This is why we did it, because we have

113
05:19.340 --> 05:22.910
so much control now over where we want that cross.

114
05:23.120 --> 05:26.570
So for example, let's push it

115
05:28.020 --> 05:29.940
uh, left by 10 pixels.

116
05:30.820 --> 05:31.240
Yeah.

117
05:31.240 --> 05:32.830
And I think we just need to ...

118
05:33.310 --> 05:34.930
we actually need to bring it down, don't we?

119
05:36.310 --> 05:37.870
And let's bring it down a bit.

120
05:38.260 --> 05:39.220
Not too much.

121
05:39.310 --> 05:41.650
1 pixel, zero.

122
05:42.620 --> 05:44.450
No, we actually need to push it up slightly.

123
05:44.480 --> 05:45.170
There we go.

124
05:45.170 --> 05:47.180
I think that looks perfect.

125
05:48.300 --> 05:54.510
And of course, when the user starts typing that "X" will remove because it's not now invalid.

126
05:54.780 --> 05:55.620
Man this is cool.

127
05:55.620 --> 05:56.340
This is cool.

128
05:56.550 --> 05:59.820
The last thing I want to do, of course, is now target the input

129
05:59.820 --> 06:05.010
but where its state is valid. And again, we're going to use the + sign to indicate we're targeting

130
06:05.010 --> 06:07.890
the immediately adjacent sibling, which is the span.

131
06:07.890 --> 06:14.010
And of course we're affecting the ::before pseudo element styling. Here, the content we want to be a

132
06:14.010 --> 06:16.050
tick, right, or a check mark.

133
06:16.080 --> 06:22.740
I don't know what you call it there where you are. In Africa, we call it a tick, but a tick is also

134
06:22.740 --> 06:26.730
one of those little creatures that you know, when you're walking through the bush, they can bite

135
06:26.730 --> 06:27.150
you.

136
06:27.480 --> 06:30.120
So, yeah, check mark is probably the correct one.

137
06:30.390 --> 06:31.020
Check mark.

138
06:31.020 --> 06:31.680
Here we go.

139
06:32.780 --> 06:34.130
And let's just copy that.

140
06:34.130 --> 06:36.080
Go to the text editor, and put it in there.

141
06:38.000 --> 06:42.450
Let's go back to our browser here and start typing and there we go.

142
06:42.470 --> 06:49.010
But the check at the moment is black, so why don't we just change its color property to green?

143
06:50.000 --> 06:50.960
Start typing.

144
06:50.990 --> 06:51.830
Start typing.

145
06:52.100 --> 06:53.630
How is that?

146
06:54.110 --> 06:54.950
Woo hoo!

147
06:56.750 --> 06:57.230
I love it.

148
06:57.230 --> 06:57.860
I love it.

149
06:57.980 --> 06:58.610
How awesome.

150
06:58.610 --> 06:59.750
You can see how fun this is.

151
06:59.750 --> 07:05.300
You can see how easy as well as a developer, once you know the tools, there is really no excuse to

152
07:05.300 --> 07:06.530
have bad forms these days.

153
07:06.530 --> 07:12.170
It should be very, very easy for your users to come on to your web app and to figure out what you want

154
07:12.170 --> 07:12.710
them to do.

155
07:12.830 --> 07:14.750
So, hope you are having a lot of fun.

156
07:14.910 --> 07:16.400
I hope you're enjoying yourself.

157
07:16.430 --> 07:19.610
I hope you're enjoying this course and I'll see you in the next lecture.