Hey, everyone, in this video, I'm going to solve the challenge I've proposed in the previous lesson.
So here we need to use jury and events.
If we go up, we can see that we have a few events we can use in this case.
So for this challenge, I would use something like the key press or key up.
But we know that we can also use the change event for form fields.
So let's try to solve this using the change event.
So going down here, the idea of this element is full name.
So let's selected and set the change event.
So this is the idee and now the name of the event is change.
Open and closed parentheses, semicolon, now let's pass the function inside here.
And now, before we think about the logic of hiding the button again, if the feud is empty, let's
just make it show to get started.
So here there's a button with the idea of submit and we want to show it so we know that we can use squarest
method called show.
So the submit and we want to show it.
Let's do it like this, save this, refresh the page.
Now, I just went inside it, and when I type something, so I'm typing something and nothing is happening
now let's click outside of the feud and now we can see that the button appeared.
So this is normal.
When you are doing a work like this, you should test which event is going to fit better.
So in this case, I didn't like the change event because it only detects the change when I click out
of it and this is not what I want.
So when I write the first letter, I want to see the button.
So instead of using the change event, let's try to use the key down event.
So going to the code.
So instead of change, let's use the key down.
Saving this refreshing the page.
Now, I just clicked inside and I'm going to press a key of my keyboard.
And now we can see that this is working better, but now I just erased what I had here and in this case,
I want to hit the button again.
So how do we do this?
Well, we know that we can see what's inside here, what's written inside this field using the wall
method.
So let's use an if statement and to make this cooler and shorter, let's use the ternary.
If so, what we are going to do here is just getting full name.
That vow and if we get an empty string, this is going to evaluate as false.
So in this case, I just want to hide.
That button.
Otherwise, so, Colin, then in this case, I want to show.
The button, so with just this line of code, we will be able to do the job, so let's save this.
Refresh the page.
Let's try again.
Let's go to the council to see if we have any error.
So I'm going to press a latter.
So now we have stuff inside, but it seems that it's not working well, so let's try to do it differently.
So if Voll.
Is the same as an empty string, then we are going to hit the button.
Let's see if this works better now.
Refreshing the page.
Now, this seems to be working better, so now let's erase everything again.
This is still not working very well.
And why is this?
Well, so when I press the button before realizing that there's something here, it is going to get
an empty value.
So this is why this is not working very well.
This is why when I erase it now, it's showing the summit.
And when it was empty and I typed the first letter, now I don't see the button.
This seems to be wrong.
But this is actually just one detail, because instead of using the key down event, we should be using
the key up.
So only when we release the key, it is going to make this test to decide what to do with the button.
So if we do this, this is going to be much better.
So now.
Let's type A and now we are seeing the button, let's keep pressing.
So now.
We have a lot of things written inside here, so I'm going to start to raising everything, erasing,
erasing and when I raised the last letter.
I'm just going to hold down the button, so now I'm still holding it, and when I release the buttons
and I'm going to release it, then it makes the test.
So this is the perfect functionality.
And like I said, when you're doing a job like this, this is what you should do.
You should test it until you get it right.
So this is how I would solve this.
Just one thing that I wanted to say before we finish.
If you maybe got confused with this with the ternary if let's remember that this is just a different
way of writing this.
So what we did was if.
The value of this field is empty.
Then.
We want to highlight the button else.
We want to show the button, so let me comment this just so we can test if the same thing is happening.
Refreshing the page.
So as you can see, we have the same functionality, so this is just a different way of writing if statements
this way, we write less lines of code, but I know we can be a bit confusing if you're not used to
this.
So that was all for this challenge.
I hope you like that.
And if you have any questions, you can leave it in the Q&A section, and I will be glad to help you
out.
So I'll see you in the next video.