The very last thing that we have yet to do is making this Tuggle work so that we can show and hide this
input.
And that's actually a matter of inquiry.
So what we do is have a quick listener on this and when we click.
All that will do is fade this in or out.
So let's go to Arjay query.
Open up our javascript file and we can just do it at the very bottom.
We need to select that icon which has a class of F.A. dash plus.
And then when we click on that
what we want to do pass in this callback that will be executed for us and what we need to do is select
the input.
So I'll just copy this here input type because text and then will fade out.
So fade out just like that.
And let's go back and refresh and I'll now click on this and it fades out.
But of course it doesn't fade back in.
So we'll use fade toggle and fade toggle will keep track of the state if it needs to be fitted in or
faded out automatically and all refresh.
And now when I click it automatically fades in and out without me having to write all the logic.
All right.
So that's it here for the To Do list.
A few minor things that we might want to talk about.
If we go back to our C Ss it's it's pretty long and it's not really organized.
So there are a few strategies for organizing success.
One of them is to organize by order on the page so that we're selecting from top to bottom and the other
one that's more popular is to order things by specificity.
So we'll start with the least specific item up top which would be the body and then we'll add in the
rest of our element tags and then we'll add the rest of our elements selectors like H-1 UL or body.
And I just noticed we should just merge these two bodies together here.
There's no reason to.
It's like the body twice.
So then we have our H-1
Juelz.
Let's add in the ally
and we'll also add in span
and this is just really a matter of preference here.