1
00:00:00,240 --> 00:00:00,760
Beautiful.

2
00:00:01,080 --> 00:00:08,490
Now, the last thing that I would want is to add functionality to copy my hex value to the clipboard,

3
00:00:08,880 --> 00:00:16,500
and since I also want to display to the user that the value has been copied to the clipboard, I'll

4
00:00:16,500 --> 00:00:21,980
start by setting up the alert so I have my alert set value.

5
00:00:22,290 --> 00:00:27,400
And right after the paragraph, I'm going to set up my conditional rendering where I'm going to say

6
00:00:27,420 --> 00:00:36,900
if alert is true, then I would want to display a paragraph and then I'll add a class name here of alert

7
00:00:37,440 --> 00:00:38,030
and line.

8
00:00:38,070 --> 00:00:39,510
Inside of this paragraph.

9
00:00:39,720 --> 00:00:43,020
I'm just going to say copied to reboard.

10
00:00:43,470 --> 00:00:44,580
That's it.

11
00:00:45,240 --> 00:00:46,460
OK, beautiful.

12
00:00:46,740 --> 00:00:53,400
Now of course, it's going to be hidden because alert is false, but as always, we can still test that

13
00:00:53,400 --> 00:00:53,670
out.

14
00:00:54,060 --> 00:00:59,550
So maybe let's set this up as true just so we know for sure that we can see that.

15
00:01:00,690 --> 00:01:06,030
Let's go hashtag AF1 from zero to five and there is not all of them.

16
00:01:06,030 --> 00:01:10,520
Have this copy to the clipboard because, of course, alert is true.

17
00:01:10,860 --> 00:01:17,580
So let me set this up to a false and now I would want to set up on click on the article.

18
00:01:17,850 --> 00:01:24,960
Please keep in mind one thing where technically you can set up some kind of button or something like

19
00:01:24,960 --> 00:01:25,200
that.

20
00:01:25,410 --> 00:01:28,040
But in my case I just went with the whole square.

21
00:01:28,350 --> 00:01:32,310
So once you click on a square, then you'll copy to the clipboard.

22
00:01:32,430 --> 00:01:37,770
If you want, you can set up a button that, for example, appears as you're hovering or sky is the

23
00:01:37,770 --> 00:01:38,070
limit.

24
00:01:38,190 --> 00:01:39,780
You can really do whatever you want.

25
00:01:39,780 --> 00:01:46,320
I just went with the whole square where I once I click on a square notice, I have copied the clipboard

26
00:01:46,320 --> 00:01:53,010
and then of course I have that value in the clipboard as well, so I can just use this rather beautiful.

27
00:01:53,370 --> 00:01:55,220
So now let's navigate back.

28
00:01:55,230 --> 00:01:59,490
And of course, we would want to set up on click on the whole article.

29
00:01:59,790 --> 00:02:05,250
So we're going to go here with UNCLICK and this is just the show that you can add those limitlessness.

30
00:02:06,160 --> 00:02:12,580
Wherever you want or in this case, I'm looking on the article and now I would want to run my function

31
00:02:12,910 --> 00:02:15,580
now, if you want, you can set it up as a reference.

32
00:02:15,580 --> 00:02:21,070
In my case, however, I'm just going to go here and drop everything in line.

33
00:02:21,260 --> 00:02:24,210
So first I'll set my alert to be true.

34
00:02:24,490 --> 00:02:28,420
So that way it will display that, yeah, we copy this value to the clipboard.

35
00:02:28,660 --> 00:02:32,510
So of course our alert will show up and by default it is false.

36
00:02:33,010 --> 00:02:38,140
And second, if you're wondering how you can copy this value, should the clipboard.

37
00:02:38,440 --> 00:02:40,720
Well, we just need to go back to jouster planned.

38
00:02:40,930 --> 00:02:47,800
We go with navigator object, then we look for Clybourn property and there is a method by the name of

39
00:02:47,800 --> 00:02:51,960
Wright and you just need to decide what you would want to passion.

40
00:02:52,240 --> 00:02:55,810
So in my case, I'm looking for either hex value or hex.

41
00:02:56,060 --> 00:03:00,910
That's up to you, since I'm already using hex value in here in a paragraph, I'm just going to pass

42
00:03:00,910 --> 00:03:06,100
in my hex value, the one that I was struggling to find from the library.

43
00:03:06,460 --> 00:03:13,360
So now of course, we can just start I have color generator setup and then again, I know it might be

44
00:03:13,360 --> 00:03:18,730
a little bit boring, but it is the fastest color that I can generate and I go with my color.

45
00:03:19,000 --> 00:03:25,180
So now what is going to happen that once we click noticed we have copied to the clipboard.

46
00:03:25,480 --> 00:03:29,920
So if we navigate here, there is our color, so now we can use it.

47
00:03:30,250 --> 00:03:36,730
So the last thing that I would want is to somehow hide it after three seconds because I think it is

48
00:03:36,730 --> 00:03:37,720
just a better look.

49
00:03:37,720 --> 00:03:45,880
If we can go here and then all of them have this copy that the clipboard would be nice, that essentially

50
00:03:45,880 --> 00:03:48,680
after three seconds, it goes away.

51
00:03:48,790 --> 00:03:52,150
So what we could do is set up a use of.

52
00:03:53,160 --> 00:03:59,190
Where I say each and every time we value for a lot changes, more than I'm going to do something more

53
00:03:59,190 --> 00:04:06,920
is going to be not something that is just going to be setting up the timeout to clear the value formula.

54
00:04:07,310 --> 00:04:13,470
Some say once the alert changes, then I would want to run my set timeline so that time out is going

55
00:04:13,470 --> 00:04:18,910
to be looking for two things for the callback function, as well as in how long it needs to run.

56
00:04:19,380 --> 00:04:24,690
Now, remember one thing, though, I would want to clear out as well.

57
00:04:24,960 --> 00:04:30,750
And since I have covered that already in plenty of projects as well as the Turrill, I'm not going to

58
00:04:30,750 --> 00:04:31,590
go into details.

59
00:04:31,590 --> 00:04:32,160
All right.

60
00:04:32,160 --> 00:04:34,320
Or just set up my cleanup function.

61
00:04:34,590 --> 00:04:38,760
So the set time out will return a value.

62
00:04:39,180 --> 00:04:41,220
So time out here.

63
00:04:41,430 --> 00:04:48,480
And that is equal to my set time out and on my callback function, of course, first.

64
00:04:48,750 --> 00:04:49,930
And then in how long?

65
00:04:50,070 --> 00:04:52,290
I don't know, three seconds, one second.

66
00:04:52,290 --> 00:04:53,160
Whatever you want.

67
00:04:53,520 --> 00:05:00,660
And then let's set all art back to false so of passing the false and then every time I click.

68
00:05:00,900 --> 00:05:02,400
I also would want to clean it up.

69
00:05:02,700 --> 00:05:08,150
So I'm going to say, you know what, before I set up another timeout, let me clear out the first one.

70
00:05:08,490 --> 00:05:13,020
So I go with clear timeout, clear timeout, and then I pass.

71
00:05:13,020 --> 00:05:18,040
And the value that I got back from the initial set final.

72
00:05:18,480 --> 00:05:24,560
So now, of course, what happens and I think I can do it this time on a small screen as well.

73
00:05:24,570 --> 00:05:27,900
So again, yes, we're going back in the same color.

74
00:05:28,170 --> 00:05:29,060
There it is.

75
00:05:29,070 --> 00:05:30,360
Now I have my colors.

76
00:05:30,690 --> 00:05:35,780
So once I click copy to the clipboard and after three seconds it disappears.

77
00:05:36,060 --> 00:05:40,430
So I'm here, here, here, here and everywhere you click.

78
00:05:40,860 --> 00:05:45,550
Now, the last thing what I would want is to go back to the ABAJO.

79
00:05:45,600 --> 00:05:46,020
Yes.

80
00:05:46,350 --> 00:05:51,450
And set up some kind of default value, because like I said, in my opinion, this is not the best look

81
00:05:51,660 --> 00:05:57,630
where basically we have colored generator, but we're not suggesting to the user what actually is happening.

82
00:05:57,930 --> 00:06:05,160
So I'm going to go back to my state for my list and I'm going to say new values when I remember we needed

83
00:06:05,160 --> 00:06:08,130
to pass in some kind of value.

84
00:06:08,580 --> 00:06:13,380
So in my case, I'm going to go with hard coded value of my orange color.

85
00:06:13,590 --> 00:06:19,740
So I know that you're probably sick of this color already, but I'm going to go with strength and hashtag

86
00:06:19,740 --> 00:06:29,100
EF one five zero to five and then all right away, invoke my all and I'll pass in the ten, so I'll

87
00:06:29,100 --> 00:06:29,610
save it.

88
00:06:29,820 --> 00:06:37,110
So by default, I'll have this placeholder in my input and I'll also have these squares not let me finally

89
00:06:37,350 --> 00:06:38,880
talk about this thing.

90
00:06:39,060 --> 00:06:41,850
So the number that we're passing in.

91
00:06:42,270 --> 00:06:51,210
So if you'll notice, we have the base color and then if we pass in the time, what that means is that

92
00:06:51,240 --> 00:06:55,650
we will set up the tent as well as the shades.

93
00:06:56,080 --> 00:06:58,650
Hundred percent divided by ten.

94
00:06:59,130 --> 00:07:05,670
So we have this all method that generates that generate tense and shades.

95
00:07:06,090 --> 00:07:13,200
And then since I passed in the turn, it generated tense, divided one hundred percent by ten.

96
00:07:13,500 --> 00:07:20,130
So that's why I have tense changing by 10 percent because I know that hundred divided by ten essentially

97
00:07:20,130 --> 00:07:20,820
is ten.

98
00:07:21,150 --> 00:07:25,530
That's why I have these ten tense and the same works with shades.

99
00:07:25,830 --> 00:07:32,550
So if you'll start changing these behaviors around what is going to happen, your array is also going

100
00:07:32,550 --> 00:07:33,020
to change.

101
00:07:33,300 --> 00:07:40,380
So now what I'm saying here, if I pass in twenty, that means that I would want to divide those hundred

102
00:07:40,380 --> 00:07:42,180
percent by twenty.

103
00:07:42,600 --> 00:07:44,570
So essentially I have less values.

104
00:07:44,580 --> 00:07:44,970
Why?

105
00:07:45,280 --> 00:07:50,580
Well, because I have my best color and then I divide hundred by twenty.

106
00:07:51,060 --> 00:07:51,510
Correct.

107
00:07:51,720 --> 00:07:59,900
So I get back my ten but I only have five points because I move from value to value by twenty percent.

108
00:08:00,240 --> 00:08:07,080
So if for example, I'm going to go with one, that just means that I'm going to have hundred values

109
00:08:07,710 --> 00:08:13,430
for the tenth because we're dividing hundred by one and then also watershed's.

110
00:08:13,740 --> 00:08:20,670
Now if you want you can set up a application where of course the user can change this value as well.

111
00:08:21,000 --> 00:08:22,230
That is definitely option.

112
00:08:22,470 --> 00:08:29,210
In my case, I just went with a hardcoded value where I said then and then or here.

113
00:08:29,580 --> 00:08:31,140
So this is my default value.

114
00:08:31,290 --> 00:08:36,690
And also when I'm checking for the form submission, I also hardcoded that then.

115
00:08:36,810 --> 00:08:43,770
But you can definitely set up some kind of select or something that controls the amount of colors as

116
00:08:43,770 --> 00:08:44,010
well.

117
00:08:44,400 --> 00:08:45,870
That is our application.

118
00:08:45,870 --> 00:08:48,360
Hopefully you enjoyed it.

119
00:08:48,480 --> 00:08:52,290
I mean, I know you probably got sick of me typing the orange color.

120
00:08:52,830 --> 00:08:55,800
I think that is the fastest car for me to type.

121
00:08:55,830 --> 00:09:01,290
That's why I was using as far as generating some nice colors, because otherwise I would have went with

122
00:09:01,290 --> 00:09:04,920
hashtag Datatel and I hope to see your next project.