WEBVTT

0
00:00.260 --> 00:05.690
Welcome to yet another challenge. And we are dealing with the textarea element,

1
00:06.230 --> 00:07.370
a very, very useful one.

2
00:07.370 --> 00:09.590
And that's why I'm spending so much time ⏲ on this.

3
00:09.840 --> 00:11.340
But what is this challenge all about?

4
00:11.360 --> 00:12.710
Well, it's very simple.

5
00:12.710 --> 00:14.720
And don't worry too much about the design.

6
00:14.720 --> 00:19.700
I just want you to understand how we can work with events when it comes to the textarea element.

7
00:20.240 --> 00:22.910
There are a few things I want you to notice here.

8
00:23.060 --> 00:28.310
Firstly, I want you to notice that we've got a placeholder, "something juicy ...", and we've styled it

9
00:28.310 --> 00:29.490
with a white color.

10
00:29.510 --> 00:31.250
That's the first thing I want you to do.

11
00:31.340 --> 00:34.550
Try and do it, and try and style it by yourself.

12
00:34.790 --> 00:41.330
The second thing I want you to notice is that when the user selects this text box, when they click

13
00:41.330 --> 00:42.110
inside it,

14
00:43.640 --> 00:44.090
wow!

15
00:45.350 --> 00:49.730
Firstly, obviously the placeholder disappears, but that's automatic by the browser ...

16
00:49.940 --> 00:53.300
but you can see that that blue background has disappeared.

17
00:53.480 --> 01:01.490
And as a hint, we are going to have to listen for some event that's fired when the user selects this

18
01:01.490 --> 01:07.940
textarea, and the event I am going to listen for in the solution video is ... hint hint ... the focus event.

19
01:07.940 --> 01:12.770
So now we are in focus, and when we are in focus, I want to remove that background color.

20
01:12.770 --> 01:18.770
Now, you know, if we just left our code as this, it would always stay white.

21
01:18.770 --> 01:24.650
But if we now click outside of the textarea, how cool is that?

22
01:24.650 --> 01:30.860
The blue background and the placeholder has come back, it's returned. And in order to do that we are

23
01:30.860 --> 01:36.710
listening for another event. And that other event I listen for in the solution video, is the blue event.

24
01:36.740 --> 01:39.900
You can kind of think of the blur event as the opposite of the focus event.

25
01:39.920 --> 01:46.400
The focus event fires when something has received focus and the blur event fires when that something

26
01:46.400 --> 01:47.780
has lost focus.

27
01:47.780 --> 01:48.520
So there we go.

28
01:48.530 --> 01:54.740
I told you it's going to be a very, very simple, simple example, but a very useful one

29
01:55.010 --> 01:55.660
I might add. 

30
01:55.670 --> 02:00.600
So anyway, I'll see you in the solution video.