You know the drill.
We're starting with a blank index file and a blank browser.
The first step is we want to create an HTML file.
Yes, we want a head section. And within here, a style section, because we're going to be applying
a little bit of CSS.
Then we want a body, and within the body we can ... you know what,
we don't even need a form
in this instance.
All I want to do is I want to put a textarea.
Let's give it a name of "story", an ID of "story". Let's save this, refresh,
the textarea is a bit big.
Again, let me reduce it in size.
Let me make it a bit wider.
There we go.
And similarly to last time, let's give it a placeholder,
something
juicy.
Okay, so there we go.
Now let's just apply some styling.
I'll show you how to do, you know, CSS root variables.
They're very, very handy because you only have to change one variable and all your color scheme then
will automatically change.
Very, very nice to do these kind of things.
You define a CSS variable by the double dash --.
We're just going to call ours main background color, for lack of a better word, right?
We can actually do a horrible blue.
Let's just do a horrible blue.
Okay.
We've defined our variable, but we haven't used it anywhere.
Let's now grab our textarea box,
and let's apply some styling.
Firstly, a border - 1 pixel, solid grey.
That's nice.
And let's then use our CSS variable.
We want to define its background color
to be what?
Well, in order to access a CSS variable, you type the "var" keyword, and then you literally type out the
variable name, which in our case is --main-bg-color.
We save that, and there we go 🤩.
How cool.
So obviously, if you ever want to change it later on, you can very easily by just changing one root
variable.
What I don't like is "something juicy ... " is gray.
So all we want to do is we want to target the textarea.
Well, let me ask you, how do we then target that "something juicy ..." placeholder?
That's right,
we can target the CSS ::placeholder pseudo-element, right?
And we can just define his color as white.
See if that works.
There we go.
How cool.
Now, my dear students, we have to get on to JavaScript. And I gave you some hints in the introduction
to this challenge.
We have to write all our JavaScript within <script> tags. And the hints I gave you, is that I said there
are focus and blur events that are fired by the DOM.
So let me just type, focus and blur events are native DOM events that are fired,
right.
We don't have to define these events.
And let's first deal with the focus event.
Let me start off by saying that the focus event is fired
when an element receives, you've got it, focus.
Pretty, pretty intuitive.
All I want to do now, is I want to grab that textarea because when the user starts typing in here,
I don't want that background color.
So when we have focus, I want the background color to disappear.
So the first thing is we have to grab this box, this textarea.
Let's put it in a variable by using the "let" keyword.
We can define this variable as anything we want.
Let me just call it textArea and we assign it the value of that actual textarea element.
We can access the document object. On here,
getElementById(), and the ID we gave it was I think it was story ...
let me just scroll up.
ID of story.
Can you see it?
So there we go.
We've got our textarea.
You know what,
let me just expand this.
It's easier for you to follow.
Then I want to add an event listener ...
textArea
addEventListener
addEventListener.
We've got it now.
Again, that's provided to us by the Web API.
And this event listener takes two arguments.
One, it takes what event are we listening for?
And that's the clue I gave you.
We are listening for the focus event.
And the second argument is the callback function.
Basically, it's what we want to execute
when that focus event has fired. And we write all our business logic within these curly braces.
I have told you this before in other lectures, but when a event is fired, we get given a object,
an event object, and usually it's put into a variable called "e".
We don't have to.
We can call it anything we want,
even Mickey Mouse 🐭.
But to stick with convention, let's put it in a variable called "e".
I want to grab this event, and I want to access the target property.
The target property just tells us where it came from.
In our case, it's going to be that actual textarea input box.
We then want to access its style property. On that,
we want to affect its background, and we want to set its background to none.
Let's go to the browser.
Let's start typing.
And how awesome is that?
You have got to be impressed.
How cool.
Right.
And if we refresh the page, it's back to normal.
But you'll notice if we start typing,
if we stop typing, or if we delete everything and we click out of the box, we don't get that blue
back.
So how do we get that blue back?
Well, this, my dear students, is when the blur event comes in handy. Because the blur event is fired
when an element loses focus.
So all we have to do is kind of the same thing.
We access our textArea variable, and this textArea variable, let's actually put it, we'll put it
outside at the top, because it doesn't only relate to the focus event.
We can access this variable again, you guessed it, add an event listener, but this time we're listening
for the blur event. And you guessed it, we have a callback function.
We get passed this event object. On this event object,
we want to access the target.
We want to affect it's style property.
Which style do we want to affect? Its background color. And we want to set that, to what?
Well if we scroll up to our CSS file,
we actually want it to be this. So we can just copy that, scroll down here, paste it and boom 💥, we
should be done.
So let's go to the browser.
Let's start typing something.
As soon as we lose focus, the background color switches back to blue.
How cool.
My dear students, man, I love this stuff.
I have a lot of fun. And I hope you're learning things along the way.
I know we're taking modular examples throughout this course, but really that's how you learn. Once you
learn how to affect styling and focus events, blur events targeting the pseudo classes and elements,
you can apply this to a vast area of your coding.
So really it is going to help you.
You'll see.
Hope you're having a lot of fun.
Hope you're learning a ton, and I'll see you in the next lecture.