1
00:00:00,810 --> 00:00:07,650
OK, now finally, let's do it, and let's add the functionality of the copy to the clipboard.

2
00:00:08,040 --> 00:00:11,580
So this is what was the most awaited feature.

3
00:00:11,670 --> 00:00:13,560
So let's do it.

4
00:00:13,880 --> 00:00:17,820
So let me show you first how it will look like when we implemented.

5
00:00:18,420 --> 00:00:19,410
This is how we will do it.

6
00:00:19,410 --> 00:00:25,020
For example, we want to copy the code of this particular color, so we'll just click on it and it will

7
00:00:25,020 --> 00:00:26,460
be showing copy to clipboard.

8
00:00:26,850 --> 00:00:32,910
But we'll be creating this, and you notice that that text was just visible for a few seconds and then

9
00:00:32,910 --> 00:00:33,540
it disappeared.

10
00:00:33,540 --> 00:00:35,550
So that functionality will be adding.

11
00:00:36,640 --> 00:00:41,920
And that said, let's just do it.

12
00:00:42,250 --> 00:00:43,930
Let's go to the I.D..

13
00:00:45,970 --> 00:00:53,410
And we already important to use the fact that Discord and now.

14
00:00:54,560 --> 00:00:58,460
Let's make use of it, so.

15
00:00:59,980 --> 00:01:04,570
And will, first of all, give the extra value.

16
00:01:05,460 --> 00:01:08,040
Or alert, we have already.

17
00:01:08,580 --> 00:01:13,800
You will already be CG ex now it's time for the Hex.

18
00:01:14,280 --> 00:01:14,910
Well, you.

19
00:01:16,300 --> 00:01:26,560
X value is equal to and is any hex value, so we'll be using temperature trials and it will be starting

20
00:01:26,560 --> 00:01:33,940
with the hashtag and then destroyed or signed right here inside this that will be in the hex color.

21
00:01:36,870 --> 00:01:38,520
OK, so.

22
00:01:39,660 --> 00:01:43,700
This was about two weeks earlier, and you can provide us some I got it now.

23
00:01:44,100 --> 00:01:46,100
Now we will do the use a fact.

24
00:01:46,200 --> 00:01:52,380
Now let me first tell you if you don't know what is in effect.

25
00:01:52,710 --> 00:01:54,390
Well, first of all, let me just tell you this.

26
00:01:55,230 --> 00:01:56,600
So what is used?

27
00:01:56,600 --> 00:01:57,580
The fact do?

28
00:01:58,560 --> 00:02:03,420
Let me first try the same decks and then you will be able to see it more properly.

29
00:02:05,260 --> 00:02:07,100
OK, so.

30
00:02:08,220 --> 00:02:17,850
Use effect, and this expects a function inside, and there is some content to this function, and here

31
00:02:17,850 --> 00:02:19,160
is our dependency edit.

32
00:02:19,650 --> 00:02:25,170
OK, now what I'm explaining you like what the basics of doing is effect.

33
00:02:25,320 --> 00:02:27,570
I'm not writing code right now, OK?

34
00:02:27,750 --> 00:02:29,070
Before writing, I'm explaining.

35
00:02:29,190 --> 00:02:30,570
So use effect.

36
00:02:30,570 --> 00:02:37,560
What it does is that like in this index here that is written, some function or some piece of code,

37
00:02:37,920 --> 00:02:40,750
and that is their dependency.

38
00:02:41,310 --> 00:02:46,680
Now why it is called a dependency, it because the court had which is that are done are the function

39
00:02:46,680 --> 00:02:49,110
which is are done here is dependent on this.

40
00:02:49,650 --> 00:02:51,590
For example, that is a value here.

41
00:02:51,660 --> 00:02:53,790
Maybe that is this allowed value here.

42
00:02:53,940 --> 00:02:55,500
We will write alert value here, OK?

43
00:02:55,860 --> 00:02:57,660
So this alert is available, OK?

44
00:02:57,840 --> 00:03:04,800
Now, whenever the value of this alert changes, the piece of code inside, this will be executed.

45
00:03:05,190 --> 00:03:07,940
So whenever, for example, the alert is now false.

46
00:03:08,240 --> 00:03:12,450
So it's OK, but as soon as it changes to true.

47
00:03:12,750 --> 00:03:20,780
So this code, which is written inside, this would be executed and the function would be executed under

48
00:03:21,330 --> 00:03:23,400
like the resulting output would be given.

49
00:03:23,910 --> 00:03:26,810
Now what is there next is that.

50
00:03:28,600 --> 00:03:34,180
What if we leave it blank for if we leave it blank, if we leave the dependency at a blank?

51
00:03:34,300 --> 00:03:42,400
So whatever the court is present inside this, that will be executed only when the page loads, only

52
00:03:42,400 --> 00:03:45,430
when the payloads, only that time the court will execute.

53
00:03:45,460 --> 00:03:51,310
That means the code or the function will execute only for the first time in the Lords, when or whenever

54
00:03:51,310 --> 00:03:52,360
we refresh the page.

55
00:03:52,740 --> 00:03:59,470
So the thing here is that it will just load one time and after that it will not change.

56
00:03:59,470 --> 00:04:04,450
Whatever you do, that court will run just once and it will not work again.

57
00:04:04,750 --> 00:04:08,560
So that is the use of their dependency order inside this.

58
00:04:08,560 --> 00:04:11,230
That is also a cleanup function and.

59
00:04:12,940 --> 00:04:21,400
This was about the use of fat coke, and it basically used fire like a functional rendering with the

60
00:04:21,400 --> 00:04:26,280
help of a variable or other dependency order, what they were presented in their dependency on it.

61
00:04:26,950 --> 00:04:31,600
It's used for that and changing the students for something like that.

62
00:04:31,900 --> 00:04:35,350
Inside this, there can be multiple functions, so that means that you would like.

63
00:04:35,350 --> 00:04:38,560
It's really, really important function.

64
00:04:38,590 --> 00:04:44,920
So that is what let's write code now without any further delay.

65
00:04:45,550 --> 00:04:46,450
So here we will.

66
00:04:46,450 --> 00:04:46,780
Right?

67
00:04:46,780 --> 00:04:53,410
First of all, now what we'll do is we'll we'll create a timeout timeout function.

68
00:04:53,590 --> 00:04:57,070
Now why we are creating a timer function because I already showed you.

69
00:04:57,070 --> 00:05:03,790
And when we click this part and then when we click on this color, it will show copy to clipboard,

70
00:05:04,150 --> 00:05:07,660
but it will remain only for a few seconds and then it disappears.

71
00:05:07,970 --> 00:05:10,270
Before that, we need to create more function.

72
00:05:10,600 --> 00:05:12,550
So that is what I'm going to create.

73
00:05:14,040 --> 00:05:22,470
So I came here and now I will create a time work function, then I will write, contest and time out.

74
00:05:23,410 --> 00:05:24,340
Not timed out.

75
00:05:24,820 --> 00:05:25,480
I'm out.

76
00:05:26,750 --> 00:05:29,390
Timeout is equal to.

77
00:05:30,770 --> 00:05:34,220
Oh, I think I need to.

78
00:05:36,840 --> 00:05:37,980
Oh, I can create heroin.

79
00:05:38,060 --> 00:05:38,450
OK.

80
00:05:38,790 --> 00:05:52,020
I will say third that time out and time out would be there, and then I'll write a function because

81
00:05:52,020 --> 00:05:58,710
it's expected to function inside this, I will write that set alarm.

82
00:06:00,640 --> 00:06:01,630
Smart alert.

83
00:06:02,810 --> 00:06:04,310
Should be false.

84
00:06:06,370 --> 00:06:12,610
Like, after that particular time, she said a lot should be said to fly now, what does that particular

85
00:06:12,610 --> 00:06:12,940
time?

86
00:06:13,270 --> 00:06:20,290
So that is three seconds, not 3000, why I'm writing three thousand because this is that are done in

87
00:06:20,290 --> 00:06:27,180
milliseconds to 3000 milliseconds is equal to thirty seconds, as I have written three thousand.

88
00:06:27,820 --> 00:06:33,880
OK, now after three thousand what I do, I want to return because I want to clear that time.

89
00:06:34,180 --> 00:06:37,810
You know, once once I have planned on it.

90
00:06:37,810 --> 00:06:41,380
So it will show and that alert will be sent to two.

91
00:06:41,380 --> 00:06:42,490
And then it will.

92
00:06:43,270 --> 00:06:49,270
It will show for three or three seconds and then it needs to be like cleared out, OK.

93
00:06:49,540 --> 00:06:54,130
So for that, I need to return the cleanup function or return.

94
00:06:55,420 --> 00:06:58,270
And this is also a function.

95
00:06:58,270 --> 00:07:04,630
So I will write in the time out and inside this, I'll pass.

96
00:07:05,200 --> 00:07:09,520
Once again, the time out I'm out is past.

97
00:07:10,030 --> 00:07:15,370
Now what is responsible for running all of like?

98
00:07:15,370 --> 00:07:17,770
What is the driving factor here?

99
00:07:18,200 --> 00:07:24,910
I already told you in the use effect of the driving factor in the variable inside the dependency.

100
00:07:25,480 --> 00:07:26,500
What I what do we do?

101
00:07:26,610 --> 00:07:33,280
It doesn't matter if we leave their dependency at empty, so this function will only execute once that

102
00:07:33,280 --> 00:07:34,360
is on the loading.

103
00:07:34,630 --> 00:07:38,040
Like once the page is loaded, that time only will execute.

104
00:07:38,050 --> 00:07:44,020
Otherwise, the function will not return to be executed or we can't leave their dependency on blank.

105
00:07:44,300 --> 00:07:46,050
Well, here we'll ride the alert.

106
00:07:46,990 --> 00:07:52,300
Now why we are writing the alert because whenever the alert changes right now, the alert is set to

107
00:07:52,300 --> 00:07:58,090
false and that means that nothing is being shown the ones that alert to start to true.

108
00:07:58,360 --> 00:08:06,520
That means that the user has clicked on the color and the messages are being shown and then it needs

109
00:08:06,520 --> 00:08:08,860
to be cleared out within three seconds.

110
00:08:08,860 --> 00:08:11,560
So that is why I want to ride the alert.

111
00:08:11,830 --> 00:08:15,300
OK, so I rode the alert now.

112
00:08:15,670 --> 00:08:24,010
Next, when we come into the city at dawn, so we want to give some glasses head according to that.

113
00:08:24,410 --> 00:08:27,790
So things are pretty structured here.

114
00:08:28,360 --> 00:08:31,420
Now let me just go in on.

115
00:08:31,420 --> 00:08:38,890
Click here to this article because whenever the user will click so that time on, that should be a function

116
00:08:38,890 --> 00:08:42,310
which should be get fired off and do all of this work.

117
00:08:43,270 --> 00:08:46,820
So let me ride on, click on Clear.

118
00:08:48,110 --> 00:08:48,860
Oh, no.

119
00:08:50,290 --> 00:08:52,060
On function.

120
00:08:53,620 --> 00:08:54,940
Nor the component.

121
00:08:55,900 --> 00:09:05,020
On Click Function and what it will do is that inside this will create an inline function of federal

122
00:09:05,020 --> 00:09:05,560
function.

123
00:09:05,860 --> 00:09:10,480
So this is how afectado functions should be remembered.

124
00:09:10,690 --> 00:09:14,860
Then we are creating a federal function that should not be space between these two.

125
00:09:15,220 --> 00:09:20,410
Otherwise, there is a wrong syntax and it will be executed, and it was shown at a fund that should

126
00:09:20,410 --> 00:09:23,800
not be a space as it should be just after this.

127
00:09:24,100 --> 00:09:26,710
OK, so on.

128
00:09:26,710 --> 00:09:29,470
Click on Click and now we will.

129
00:09:29,470 --> 00:09:37,510
What we'll do is that we will set the alert to prove whenever the user clicks the color on the palette

130
00:09:37,510 --> 00:09:38,200
of the color.

131
00:09:38,230 --> 00:09:47,020
The third alert should be set to true, so that alert and all will pass the value through inside this.

132
00:09:47,620 --> 00:09:48,340
Now what will?

133
00:09:48,520 --> 00:09:51,400
What it will do is that how do we call the smart alert?

134
00:09:51,730 --> 00:09:56,840
Where did the circular head of the circular not set alert is a function remember and used it?

135
00:09:56,920 --> 00:09:57,160
What?

136
00:09:57,160 --> 00:10:01,570
There are two things that is available and that is the function.

137
00:10:01,660 --> 00:10:06,850
Now this function is responsible, responsible for changing this variable.

138
00:10:07,120 --> 00:10:15,370
Now, whenever we pass something in this function so that whatever we pass is assigned to this variable.

139
00:10:15,400 --> 00:10:19,710
OK, so now we are calling the third alert function and we are passing through init.

140
00:10:19,960 --> 00:10:25,780
So that means this value will be stored in this alert as soon as this function is called.

141
00:10:25,900 --> 00:10:26,350
OK.

142
00:10:27,910 --> 00:10:30,490
So we parsed through here.

143
00:10:31,450 --> 00:10:34,870
Next, we will do is use a function.

144
00:10:36,670 --> 00:10:38,440
To copy to the clipboard.

145
00:10:39,530 --> 00:10:42,440
And that will be after the two.

146
00:10:43,460 --> 00:10:44,480
We'll write.

147
00:10:46,500 --> 00:10:46,920
And.

148
00:10:48,200 --> 00:10:49,130
Now we get.

149
00:10:52,880 --> 00:10:55,130
Clipboard, Lord.

150
00:10:56,540 --> 00:10:57,680
Right next, this.

151
00:10:58,870 --> 00:10:59,620
Right next.

152
00:11:00,430 --> 00:11:06,550
And what is that we want to pass like, what is that we want to copy?

153
00:11:06,580 --> 00:11:10,020
Now explain, I'll explain this line excellently.

154
00:11:12,150 --> 00:11:19,220
Now, what this line means is that Navigator Dart Global Dart right next door tags.

155
00:11:19,410 --> 00:11:22,260
Now this is a dart script like a built in function.

156
00:11:22,350 --> 00:11:30,150
We have not created any anyone on that or this full line here is responsible for copying the text.

157
00:11:30,510 --> 00:11:35,780
OK, whenever we click on somewhere in a form or Dave or Peter.

158
00:11:35,910 --> 00:11:41,070
And if this is bad inside this, when we click it, this will copy the text inside it.

159
00:11:41,080 --> 00:11:44,540
But whatever we pass inside, this is copied.

160
00:11:44,550 --> 00:11:50,790
So now what we are passing inside this is the hex value for the hex value will be copied.

161
00:11:51,060 --> 00:11:51,750
Nothing else.

162
00:11:52,170 --> 00:11:54,860
So let me just see now.

163
00:11:54,870 --> 00:11:55,320
Yes.

164
00:11:57,430 --> 00:11:58,960
Now we move further.

165
00:11:59,140 --> 00:12:02,080
So here is the percentage value which shows the weight.

166
00:12:02,230 --> 00:12:07,570
And here is the color value which shows the hex color.

167
00:12:07,570 --> 00:12:12,930
Or maybe we can call it in our text color, we can call it the hexagon.

168
00:12:14,750 --> 00:12:17,300
Because hex color is not what we actually want.

169
00:12:18,170 --> 00:12:19,370
We want X value.

170
00:12:20,000 --> 00:12:27,830
So next, as soon as the user clicks this article, there should be an alert which we should our time

171
00:12:27,830 --> 00:12:31,460
the tags, which is displayed a text copy to clipboard.

172
00:12:31,700 --> 00:12:36,920
Now let me just write that text here, which will see copied to clipboard.

173
00:12:37,400 --> 00:12:46,460
So here I will write alert and and and inside this, there will be a feedback.

174
00:12:48,260 --> 00:12:55,610
The attack inside the attack, first of all, let me just give a class name to this, Peter, this English

175
00:12:55,610 --> 00:12:56,690
class name.

176
00:12:57,880 --> 00:13:02,980
And the class name would be allowed and inside the P-TECH, we will write.

177
00:13:05,910 --> 00:13:07,910
Appeared to.

178
00:13:12,120 --> 00:13:12,930
Flipboard.

179
00:13:14,430 --> 00:13:22,530
As simple as that, I don't me a it, and I guess this is it for the copy to create more functional.

180
00:13:22,560 --> 00:13:24,120
We will see things in action.

181
00:13:24,530 --> 00:13:30,780
We'll call this single color inside the inside out and gorgeous, and we'll see how things are looking

182
00:13:30,780 --> 00:13:40,890
into the browser to go like all of the logic is done now only we have to map the list, the color list,

183
00:13:41,250 --> 00:13:47,700
we have to map the color list and then we have to just display colors on the screen so that we do in

184
00:13:47,700 --> 00:13:48,360
the next video.