Welcome to yet another challenge. And we are dealing with the textarea element,
a very, very useful one.
And that's why I'm spending so much time ⏲ on this.
But what is this challenge all about?
Well, it's very simple.
And don't worry too much about the design.
I just want you to understand how we can work with events when it comes to the textarea element.
There are a few things I want you to notice here.
Firstly, I want you to notice that we've got a placeholder, "something juicy ...", and we've styled it
with a white color.
That's the first thing I want you to do.
Try and do it, and try and style it by yourself.
The second thing I want you to notice is that when the user selects this text box, when they click
inside it,
wow!
Firstly, obviously the placeholder disappears, but that's automatic by the browser ...
but you can see that that blue background has disappeared.
And as a hint, we are going to have to listen for some event that's fired when the user selects this
textarea, and the event I am going to listen for in the solution video is ... hint hint ... the focus event.
So now we are in focus, and when we are in focus, I want to remove that background color.
Now, you know, if we just left our code as this, it would always stay white.
But if we now click outside of the textarea, how cool is that?
The blue background and the placeholder has come back, it's returned. And in order to do that we are
listening for another event. And that other event I listen for in the solution video, is the blue event.
You can kind of think of the blur event as the opposite of the focus event.
The focus event fires when something has received focus and the blur event fires when that something
has lost focus.
So there we go.
I told you it's going to be a very, very simple, simple example, but a very useful one
I might add.
So anyway, I'll see you in the solution video.