WEBVTT

0
00:00.110 --> 00:00.980
You know the drill.

1
00:00.980 --> 00:04.130
We're starting with a blank index file and a blank browser.

2
00:04.160 --> 00:06.620
The first step is we want to create an HTML file.

3
00:06.830 --> 00:12.440
Yes, we want a head section. And within here, a style section, because we're going to be applying

4
00:12.440 --> 00:14.120
a little bit of CSS.

5
00:14.360 --> 00:18.740
Then we want a body, and within the body we can ... you know what,

6
00:18.740 --> 00:19.910
we don't even need a form

7
00:19.910 --> 00:20.660
in this instance.

8
00:20.660 --> 00:22.670
All I want to do is I want to put a textarea.

9
00:22.700 --> 00:28.850
Let's give it a name of "story", an ID of "story". Let's save this, refresh,

10
00:29.410 --> 00:31.030
the textarea is a bit big.

11
00:31.850 --> 00:33.740
Again, let me reduce it in size.

12
00:34.880 --> 00:36.260
Let me make it a bit wider.

13
00:36.440 --> 00:37.070
There we go.

14
00:37.070 --> 00:40.100
And similarly to last time, let's give it a placeholder,

15
00:40.220 --> 00:41.420
something 

16
00:42.130 --> 00:42.760
juicy.

17
00:43.480 --> 00:44.530
Okay, so there we go.

18
00:44.530 --> 00:46.570
Now let's just apply some styling.

19
00:46.570 --> 00:49.180
I'll show you how to do, you know, CSS root variables.

20
00:49.180 --> 00:53.680
They're very, very handy because you only have to change one variable and all your color scheme then

21
00:53.680 --> 00:55.020
will automatically change.

22
00:55.030 --> 00:57.790
Very, very nice to do these kind of things.

23
00:57.790 --> 01:00.820
You define a CSS variable by the double dash --.

24
01:01.000 --> 01:06.520
We're just going to call ours main background color, for lack of a better word, right?

25
01:06.520 --> 01:07.840
We can actually do a horrible blue.

26
01:07.870 --> 01:08.950
Let's just do a horrible blue.

27
01:08.980 --> 01:09.190
Okay.

28
01:09.190 --> 01:11.560
We've defined our variable, but we haven't used it anywhere.

29
01:11.590 --> 01:14.350
Let's now grab our textarea box,

30
01:15.670 --> 01:17.230
and let's apply some styling.

31
01:17.260 --> 01:21.790
Firstly, a border - 1 pixel, solid grey. 

32
01:22.300 --> 01:23.080
That's nice.

33
01:23.080 --> 01:25.270
And let's then use our CSS variable.

34
01:25.270 --> 01:27.460
We want to define its background color

35
01:27.460 --> 01:28.330
to be what?

36
01:28.510 --> 01:34.990
Well, in order to access a CSS variable, you type the "var" keyword, and then you literally type out the

37
01:34.990 --> 01:38.080
variable name, which in our case is --main-bg-color.

38
01:38.080 --> 01:40.210
We save that, and there we go 🤩.

39
01:40.240 --> 01:40.740
How cool.

40
01:40.750 --> 01:45.610
So obviously, if you ever want to change it later on, you can very easily by just changing one root

41
01:45.610 --> 01:46.270
variable.

42
01:46.480 --> 01:49.030
What I don't like is "something juicy ... " is gray.

43
01:49.150 --> 01:52.370
So all we want to do is we want to target the textarea.

44
01:52.390 --> 01:57.220
Well, let me ask you, how do we then target that "something juicy ..." placeholder?

45
01:57.820 --> 01:58.390
That's right,

46
01:58.390 --> 02:04.120
we can target the CSS ::placeholder pseudo-element, right?

47
02:04.770 --> 02:06.870
And we can just define his color as white.

48
02:06.900 --> 02:07.620
See if that works.

49
02:07.620 --> 02:08.340
There we go.

50
02:09.210 --> 02:10.020
How cool.

51
02:10.020 --> 02:16.200
Now, my dear students, we have to get on to JavaScript. And I gave you some hints in the introduction

52
02:16.200 --> 02:17.220
to this challenge.

53
02:17.220 --> 02:23.910
We have to write all our JavaScript within <script> tags. And the hints I gave you, is that I said there

54
02:23.910 --> 02:27.510
are focus and blur events that are fired by the DOM.

55
02:27.510 --> 02:35.310
So let me just type, focus and blur events are native DOM events that are fired,

56
02:36.150 --> 02:36.420
right.

57
02:36.420 --> 02:38.130
We don't have to define these events.

58
02:38.930 --> 02:41.870
And let's first deal with the focus event.

59
02:42.140 --> 02:46.700
Let me start off by saying that the focus event is fired

60
02:46.700 --> 02:52.280
when an element receives, you've got it, focus.

61
02:54.460 --> 02:55.780
Pretty, pretty intuitive.

62
02:55.960 --> 03:01.000
All I want to do now, is I want to grab that textarea because when the user starts typing in here,

63
03:01.000 --> 03:02.440
I don't want that background color.

64
03:02.440 --> 03:06.640
So when we have focus, I want the background color to disappear.

65
03:06.910 --> 03:12.380
So the first thing is we have to grab this box, this textarea.

66
03:12.400 --> 03:15.820
Let's put it in a variable by using the "let" keyword.

67
03:15.850 --> 03:18.910
We can define this variable as anything we want.

68
03:18.940 --> 03:24.460
Let me just call it textArea and we assign it the value of that actual textarea element.

69
03:24.520 --> 03:27.040
We can access the document object. On here,

70
03:27.070 --> 03:32.320
getElementById(), and the ID we gave it was I think it was story ...

71
03:32.440 --> 03:33.520
let me just scroll up.

72
03:34.510 --> 03:35.800
ID of story.

73
03:36.530 --> 03:37.460
Can you see it?

74
03:38.450 --> 03:39.050
So there we go.

75
03:39.050 --> 03:40.070
We've got our textarea.

76
03:40.100 --> 03:40.430
You know what,

77
03:40.430 --> 03:41.540
let me just expand this.

78
03:41.570 --> 03:42.770
It's easier for you to follow.

79
03:42.800 --> 03:44.750
Then I want to add an event listener ...

80
03:44.900 --> 03:45.770
textArea

81
03:45.800 --> 03:46.730
addEventListener

82
03:46.730 --> 03:47.390
addEventListener.

83
03:48.030 --> 03:48.870
We've got it now.

84
03:48.960 --> 03:51.650
Again, that's provided to us by the Web API.

85
03:51.660 --> 03:54.050
And this event listener takes two arguments.

86
03:54.060 --> 03:57.630
One, it takes what event are we listening for?

87
03:57.780 --> 03:59.220
And that's the clue I gave you.

88
03:59.250 --> 04:00.930
We are listening for the focus event.

89
04:00.930 --> 04:02.940
And the second argument is the callback function.

90
04:02.940 --> 04:05.220
Basically, it's what we want to execute

91
04:05.250 --> 04:10.940
when that focus event has fired. And we write all our business logic within these curly braces.

92
04:10.950 --> 04:17.160
I have told you this before in other lectures, but when a event is fired, we get given a object,

93
04:17.160 --> 04:22.290
an event object, and usually it's put into a variable called "e".

94
04:22.440 --> 04:23.040
We don't have to.

95
04:23.070 --> 04:24.750
We can call it anything we want,

96
04:24.780 --> 04:28.440
even Mickey Mouse 🐭.

97
04:29.080 --> 04:33.220
But to stick with convention, let's put it in a variable called "e".

98
04:33.610 --> 04:37.930
I want to grab this event, and I want to access the target property.

99
04:37.930 --> 04:40.600
The target property just tells us where it came from.

100
04:40.600 --> 04:44.500
In our case, it's going to be that actual textarea input box.

101
04:44.830 --> 04:47.560
We then want to access its style property. On that, 

102
04:47.560 --> 04:51.820
we want to affect its background, and we want to set its background to none.

103
04:52.560 --> 04:53.480
Let's go to the browser.

104
04:53.490 --> 04:54.720
Let's start typing.

105
04:54.720 --> 04:56.790
And how awesome is that?

106
04:56.820 --> 04:58.420
You have got to be impressed.

107
04:58.440 --> 04:58.990
How cool.

108
04:59.010 --> 04:59.460
How cool.

109
04:59.500 --> 04:59.880
Right.

110
04:59.880 --> 05:01.820
And if we refresh the page, it's back to normal.

111
05:01.830 --> 05:04.710
But you'll notice if we start typing,

112
05:04.710 --> 05:10.650
if we stop typing, or if we delete everything and we click out of the box, we don't get that blue

113
05:10.650 --> 05:11.160
back.

114
05:11.160 --> 05:13.020
So how do we get that blue back?

115
05:13.050 --> 05:20.340
Well, this, my dear students, is when the blur event comes in handy. Because the blur event is fired

116
05:20.340 --> 05:24.110
when an element loses focus.

117
05:24.920 --> 05:27.110
So all we have to do is kind of the same thing.

118
05:27.110 --> 05:31.940
We access our textArea variable, and this textArea variable, let's actually put it, we'll put it

119
05:31.940 --> 05:35.390
outside at the top, because it doesn't only relate to the focus event.

120
05:35.540 --> 05:40.850
We can access this variable again, you guessed it, add an event listener, but this time we're listening

121
05:40.850 --> 05:46.730
for the blur event. And you guessed it, we have a callback function.

122
05:46.730 --> 05:50.840
We get passed this event object. On this event object,

123
05:50.840 --> 05:52.460
we want to access the target.

124
05:52.550 --> 05:54.530
We want to affect it's style property.

125
05:54.950 --> 06:00.650
Which style do we want to affect? Its background color. And we want to set that, to what?

126
06:00.950 --> 06:02.960
Well if we scroll up to our CSS file,

127
06:02.960 --> 06:10.940
we actually want it to be this. So we can just copy that, scroll down here, paste it and boom 💥, we

128
06:10.940 --> 06:11.710
should be done.

129
06:11.720 --> 06:13.130
So let's go to the browser.

130
06:13.160 --> 06:14.510
Let's start typing something.

131
06:14.510 --> 06:19.310
As soon as we lose focus, the background color switches back to blue.

132
06:20.150 --> 06:21.170
How cool.

133
06:21.170 --> 06:23.090
My dear students, man, I love this stuff.

134
06:23.210 --> 06:27.050
I have a lot of fun. And I hope you're learning things along the way.

135
06:27.050 --> 06:33.800
I know we're taking modular examples throughout this course, but really that's how you learn. Once you

136
06:33.800 --> 06:40.850
learn how to affect styling and focus events, blur events targeting the pseudo classes and elements,

137
06:40.850 --> 06:44.300
you can apply this to a vast area of your coding.

138
06:44.300 --> 06:45.560
So really it is going to help you.

139
06:45.560 --> 06:46.160
You'll see.

140
06:46.340 --> 06:47.300
Hope you're having a lot of fun.

141
06:47.300 --> 06:50.990
Hope you're learning a ton, and I'll see you in the next lecture.