OK, now finally, let's do it, and let's add the functionality of the copy to the clipboard.
So this is what was the most awaited feature.
So let's do it.
So let me show you first how it will look like when we implemented.
This is how we will do it.
For example, we want to copy the code of this particular color, so we'll just click on it and it will
be showing copy to clipboard.
But we'll be creating this, and you notice that that text was just visible for a few seconds and then
it disappeared.
So that functionality will be adding.
And that said, let's just do it.
Let's go to the I.D..
And we already important to use the fact that Discord and now.
Let's make use of it, so.
And will, first of all, give the extra value.
Or alert, we have already.
You will already be CG ex now it's time for the Hex.
Well, you.
X value is equal to and is any hex value, so we'll be using temperature trials and it will be starting
with the hashtag and then destroyed or signed right here inside this that will be in the hex color.
OK, so.
This was about two weeks earlier, and you can provide us some I got it now.
Now we will do the use a fact.
Now let me first tell you if you don't know what is in effect.
Well, first of all, let me just tell you this.
So what is used?
The fact do?
Let me first try the same decks and then you will be able to see it more properly.
OK, so.
Use effect, and this expects a function inside, and there is some content to this function, and here
is our dependency edit.
OK, now what I'm explaining you like what the basics of doing is effect.
I'm not writing code right now, OK?
Before writing, I'm explaining.
So use effect.
What it does is that like in this index here that is written, some function or some piece of code,
and that is their dependency.
Now why it is called a dependency, it because the court had which is that are done are the function
which is are done here is dependent on this.
For example, that is a value here.
Maybe that is this allowed value here.
We will write alert value here, OK?
So this alert is available, OK?
Now, whenever the value of this alert changes, the piece of code inside, this will be executed.
So whenever, for example, the alert is now false.
So it's OK, but as soon as it changes to true.
So this code, which is written inside, this would be executed and the function would be executed under
like the resulting output would be given.
Now what is there next is that.
What if we leave it blank for if we leave it blank, if we leave the dependency at a blank?
So whatever the court is present inside this, that will be executed only when the page loads, only
when the payloads, only that time the court will execute.
That means the code or the function will execute only for the first time in the Lords, when or whenever
we refresh the page.
So the thing here is that it will just load one time and after that it will not change.
Whatever you do, that court will run just once and it will not work again.
So that is the use of their dependency order inside this.
That is also a cleanup function and.
This was about the use of fat coke, and it basically used fire like a functional rendering with the
help of a variable or other dependency order, what they were presented in their dependency on it.
It's used for that and changing the students for something like that.
Inside this, there can be multiple functions, so that means that you would like.
It's really, really important function.
So that is what let's write code now without any further delay.
So here we will.
Right?
First of all, now what we'll do is we'll we'll create a timeout timeout function.
Now why we are creating a timer function because I already showed you.
And when we click this part and then when we click on this color, it will show copy to clipboard,
but it will remain only for a few seconds and then it disappears.
Before that, we need to create more function.
So that is what I'm going to create.
So I came here and now I will create a time work function, then I will write, contest and time out.
Not timed out.
I'm out.
Timeout is equal to.
Oh, I think I need to.
Oh, I can create heroin.
OK.
I will say third that time out and time out would be there, and then I'll write a function because
it's expected to function inside this, I will write that set alarm.
Smart alert.
Should be false.
Like, after that particular time, she said a lot should be said to fly now, what does that particular
time?
So that is three seconds, not 3000, why I'm writing three thousand because this is that are done in
milliseconds to 3000 milliseconds is equal to thirty seconds, as I have written three thousand.
OK, now after three thousand what I do, I want to return because I want to clear that time.
You know, once once I have planned on it.
So it will show and that alert will be sent to two.
And then it will.
It will show for three or three seconds and then it needs to be like cleared out, OK.
So for that, I need to return the cleanup function or return.
And this is also a function.
So I will write in the time out and inside this, I'll pass.
Once again, the time out I'm out is past.
Now what is responsible for running all of like?
What is the driving factor here?
I already told you in the use effect of the driving factor in the variable inside the dependency.
What I what do we do?
It doesn't matter if we leave their dependency at empty, so this function will only execute once that
is on the loading.
Like once the page is loaded, that time only will execute.
Otherwise, the function will not return to be executed or we can't leave their dependency on blank.
Well, here we'll ride the alert.
Now why we are writing the alert because whenever the alert changes right now, the alert is set to
false and that means that nothing is being shown the ones that alert to start to true.
That means that the user has clicked on the color and the messages are being shown and then it needs
to be cleared out within three seconds.
So that is why I want to ride the alert.
OK, so I rode the alert now.
Next, when we come into the city at dawn, so we want to give some glasses head according to that.
So things are pretty structured here.
Now let me just go in on.
Click here to this article because whenever the user will click so that time on, that should be a function
which should be get fired off and do all of this work.
So let me ride on, click on Clear.
Oh, no.
On function.
Nor the component.
On Click Function and what it will do is that inside this will create an inline function of federal
function.
So this is how afectado functions should be remembered.
Then we are creating a federal function that should not be space between these two.
Otherwise, there is a wrong syntax and it will be executed, and it was shown at a fund that should
not be a space as it should be just after this.
OK, so on.
Click on Click and now we will.
What we'll do is that we will set the alert to prove whenever the user clicks the color on the palette
of the color.
The third alert should be set to true, so that alert and all will pass the value through inside this.
Now what will?
What it will do is that how do we call the smart alert?
Where did the circular head of the circular not set alert is a function remember and used it?
What?
There are two things that is available and that is the function.
Now this function is responsible, responsible for changing this variable.
Now, whenever we pass something in this function so that whatever we pass is assigned to this variable.
OK, so now we are calling the third alert function and we are passing through init.
So that means this value will be stored in this alert as soon as this function is called.
OK.
So we parsed through here.
Next, we will do is use a function.
To copy to the clipboard.
And that will be after the two.
We'll write.
And.
Now we get.
Clipboard, Lord.
Right next, this.
Right next.
And what is that we want to pass like, what is that we want to copy?
Now explain, I'll explain this line excellently.
Now, what this line means is that Navigator Dart Global Dart right next door tags.
Now this is a dart script like a built in function.
We have not created any anyone on that or this full line here is responsible for copying the text.
OK, whenever we click on somewhere in a form or Dave or Peter.
And if this is bad inside this, when we click it, this will copy the text inside it.
But whatever we pass inside, this is copied.
So now what we are passing inside this is the hex value for the hex value will be copied.
Nothing else.
So let me just see now.
Yes.
Now we move further.
So here is the percentage value which shows the weight.
And here is the color value which shows the hex color.
Or maybe we can call it in our text color, we can call it the hexagon.
Because hex color is not what we actually want.
We want X value.
So next, as soon as the user clicks this article, there should be an alert which we should our time
the tags, which is displayed a text copy to clipboard.
Now let me just write that text here, which will see copied to clipboard.
So here I will write alert and and and inside this, there will be a feedback.
The attack inside the attack, first of all, let me just give a class name to this, Peter, this English
class name.
And the class name would be allowed and inside the P-TECH, we will write.
Appeared to.
Flipboard.
As simple as that, I don't me a it, and I guess this is it for the copy to create more functional.
We will see things in action.
We'll call this single color inside the inside out and gorgeous, and we'll see how things are looking
into the browser to go like all of the logic is done now only we have to map the list, the color list,
we have to map the color list and then we have to just display colors on the screen so that we do in
the next video.