1
00:00:00,300 --> 00:00:03,810
OK, so now let's work on a single color component.

2
00:00:03,910 --> 00:00:11,850
So for that, I will need to, first of all, need to create this boilerplate code so that I've already

3
00:00:11,850 --> 00:00:14,520
done, who know what I'll do with that?

4
00:00:16,170 --> 00:00:26,250
Inside this single function, I'll pass some props or that will be on the job and then I'll pass the

5
00:00:26,250 --> 00:00:26,670
word.

6
00:00:27,420 --> 00:00:28,660
And this is the vehicle.

7
00:00:28,680 --> 00:00:31,110
I like the percentage of the column, basically.

8
00:00:31,470 --> 00:00:37,800
And then I'll pass the index and then I'll pass the X.

9
00:00:38,710 --> 00:00:42,630
And not violence, it's color.

10
00:00:43,950 --> 00:00:44,420
All right.

11
00:00:45,300 --> 00:00:46,110
So that is a.

12
00:00:48,660 --> 00:00:52,680
That is our TV lead index, hex and color.

13
00:00:53,190 --> 00:00:56,310
OK, so next inside this function.

14
00:00:57,600 --> 00:01:03,860
What we do is that will create some of the folks you hawks.

15
00:01:04,380 --> 00:01:12,930
So we'll, first of all, create the alert, so alert will be noted here alert and then we'll be setting

16
00:01:12,930 --> 00:01:22,080
the alert both set alert and then we'll provide a stay at home care, use it.

17
00:01:22,320 --> 00:01:25,260
And that will be false.

18
00:01:26,350 --> 00:01:33,430
So this alert is I will tell you whenever like we copy something to the clipboard, so then we will

19
00:01:33,430 --> 00:01:35,920
be making use of this right now.

20
00:01:35,980 --> 00:01:39,790
Just forget we have just defined this and just forget after defining this, forget it.

21
00:01:40,270 --> 00:01:43,300
OK, so now we will next.

22
00:01:43,310 --> 00:01:43,840
We will.

23
00:01:44,830 --> 00:01:51,900
First of all, we import some of the three things here saw it from the first of all, we have to import.

24
00:01:51,910 --> 00:01:57,450
They use the state hokum because we have used it here, but we have not like imported it.

25
00:01:57,460 --> 00:01:58,390
So that was thrown at.

26
00:01:59,020 --> 00:02:01,720
So here I will try to use state.

27
00:02:03,200 --> 00:02:11,600
And I will also import you the fact use the fact, because we may be using this or we may not be using

28
00:02:12,230 --> 00:02:14,810
or just for other friends.

29
00:02:15,590 --> 00:02:26,750
OK, now next, we want to do is that we want to like if I go to the browser and show you inside this

30
00:02:26,750 --> 00:02:28,670
whenever we are getting the color.

31
00:02:28,700 --> 00:02:31,520
So, for example.

32
00:02:32,640 --> 00:02:35,030
That is the original color.

33
00:02:38,510 --> 00:02:41,090
Wait, let me spin underserved first.

34
00:02:41,720 --> 00:02:42,290
In our country.

35
00:02:43,310 --> 00:02:43,760
So.

36
00:02:45,750 --> 00:02:52,500
Let me go to the project, and this is the color generator and as we type and start.

37
00:02:54,070 --> 00:02:59,470
And sort of spin up my server, and once it spins off my server, I'm sure you like where from where

38
00:02:59,470 --> 00:03:03,820
we are getting the data and all and where we want to actually.

39
00:03:05,370 --> 00:03:11,730
Like getting the data and how we want to convert it and how we want to display it, so.

40
00:03:12,180 --> 00:03:20,010
Okay, well, I just started my site or my server was not running, so I let time to come on and start

41
00:03:20,010 --> 00:03:21,630
and then I run the server.

42
00:03:22,080 --> 00:03:24,490
So now it's taking a little time to start off.

43
00:03:25,450 --> 00:03:27,060
We'll wait till the server starts off.

44
00:03:27,060 --> 00:03:27,420
Okay?

45
00:03:27,420 --> 00:03:28,860
And I, what is up and running?

46
00:03:29,520 --> 00:03:34,650
So when I go here and I open my booth.

47
00:03:36,580 --> 00:03:38,230
And the part I've heard.

48
00:03:39,910 --> 00:03:42,550
Blue and gold colours.

49
00:03:43,610 --> 00:03:48,690
Who had I seen nothing, and when I go to the Red Bulls inside this company.

50
00:03:48,740 --> 00:03:55,490
And if I go and start to add component and for the blue, if I guard those colors.

51
00:03:56,660 --> 00:04:00,280
Okay, so I am not getting any color.

52
00:04:02,710 --> 00:04:07,570
Maybe I should have, but I have to control them log and then I have to see.

53
00:04:08,340 --> 00:04:08,970
So.

54
00:04:10,100 --> 00:04:11,260
Okay.

55
00:04:11,290 --> 00:04:13,480
That is an ecology at.

56
00:04:14,530 --> 00:04:14,850
OK.

57
00:04:18,480 --> 00:04:21,390
We can tell when true or false from here, you can see.

58
00:04:22,020 --> 00:04:23,810
OK, so that is not the point here.

59
00:04:24,300 --> 00:04:28,080
So then we have to like whatever the color we get.

60
00:04:28,080 --> 00:04:31,050
No, that is, and it is the pneumatic form.

61
00:04:31,050 --> 00:04:35,070
Then we have to convert train into the string and separate with the commas.

62
00:04:35,790 --> 00:04:37,180
Right now, we can't see it.

63
00:04:37,440 --> 00:04:42,000
For some reason, maybe we can control or log it and see that's not an issue at all.

64
00:04:42,190 --> 00:04:43,440
I'm telling you that is enough.

65
00:04:43,830 --> 00:04:49,890
So then we have to convert it into like order to form, and then we could join it and form one color

66
00:04:49,890 --> 00:04:51,300
and separate it with the comma.

67
00:04:51,690 --> 00:04:53,910
So that is what we are going to do now.

68
00:04:55,350 --> 00:04:56,520
Let me go to the browser.

69
00:04:58,470 --> 00:05:02,370
Oh, it is my bra, not browser, my I.D..

70
00:05:02,850 --> 00:05:14,310
And here what we'll do is we'll create another concern that constant will be VCD and that will do is

71
00:05:14,310 --> 00:05:24,180
odd job start doing so now we join it and in in like in between, we'll provide this.

72
00:05:24,660 --> 00:05:27,570
Goma's, after joining, there will be commas in between.

73
00:05:27,840 --> 00:05:32,310
All right, then we'll have another constant.

74
00:05:32,320 --> 00:05:35,850
So that will be Hex no admin to Hex.

75
00:05:36,150 --> 00:05:39,630
We convert auditable to Hex and then we grab the hex value.

76
00:05:39,630 --> 00:05:44,940
OK, so this is not like if we're converting something, we need distorted song, right?

77
00:05:45,240 --> 00:05:46,530
So they're going to be gone.

78
00:05:47,710 --> 00:05:59,640
X is equal to R GB to Hex, and then inside this will pass R O R D, we will lose.

79
00:05:59,650 --> 00:06:03,310
So we are using our restructuring restructuring here.

80
00:06:03,640 --> 00:06:11,650
That is the object of already structuring, but will use R D B to successfully parse this and this is

81
00:06:11,650 --> 00:06:12,700
a separate operator.

82
00:06:12,780 --> 00:06:17,500
Remember, once we've discussed about this, so this is split, operate it on what it does.

83
00:06:17,500 --> 00:06:18,190
Is that it?

84
00:06:19,590 --> 00:06:26,440
It just spread to the order array or object, like if an object contains so many like classes and so

85
00:06:26,440 --> 00:06:27,070
many elements.

86
00:06:27,310 --> 00:06:33,940
So this restructuring the object by split open, it does simply like copies every each and every element,

87
00:06:33,940 --> 00:06:38,220
one by one port or render or map each and every element one by one.

88
00:06:38,290 --> 00:06:39,790
Not necessarily copying.

89
00:06:40,330 --> 00:06:40,780
Copying.

90
00:06:40,930 --> 00:06:42,490
OK, so that we have done.

91
00:06:42,760 --> 00:06:47,800
And next, we want to create an R and you wait here.

92
00:06:48,130 --> 00:06:51,790
So how color will look like and what should be that?

93
00:06:53,030 --> 00:06:55,490
So things like that should be there.

94
00:06:56,120 --> 00:07:02,810
So here I will create an article I, the leader did and then create an article.

95
00:07:03,640 --> 00:07:04,700
Article?

96
00:07:06,650 --> 00:07:16,730
Let me read the article before the article, I'll give some glasses my last name and I'll give up last

97
00:07:16,730 --> 00:07:17,780
name of.

98
00:07:20,930 --> 00:07:27,520
Class name and that class name will be like color, so what color is this?

99
00:07:27,790 --> 00:07:32,920
Now this is the color which which we have searched.

100
00:07:33,310 --> 00:07:36,400
And according to that, only we grab the colors OK.

101
00:07:36,700 --> 00:07:47,530
So now let me provide this again, the template reference and had our first color night and small letters

102
00:07:47,530 --> 00:07:48,100
colored.

103
00:07:48,700 --> 00:07:50,500
And there will be a dollar sign.

104
00:07:50,500 --> 00:07:57,370
And inside this, that would be index, not index, not index index index.

105
00:07:57,370 --> 00:07:59,620
And that index would be greater than 10.

106
00:08:00,430 --> 00:08:01,120
And.

107
00:08:02,390 --> 00:08:11,270
We'll put and there and here and and and life alert should be.

108
00:08:13,470 --> 00:08:20,230
Now, whatever this class is angry, whatever we are creating that is related to us and then we'll be

109
00:08:20,230 --> 00:08:22,530
in the system, we discuss everything in detail.

110
00:08:24,170 --> 00:08:25,780
OK, we are done with this.

111
00:08:25,790 --> 00:08:32,780
Now we want to provide some inland styling for this, so that would be in line styling style is equal

112
00:08:32,780 --> 00:08:34,760
to background color.

113
00:08:34,790 --> 00:08:37,700
Now what would be the background color of this particular article?

114
00:08:38,300 --> 00:08:43,670
This will be the color of the selector color, which we are getting.

115
00:08:43,970 --> 00:08:45,770
OK, so that will be not.

116
00:08:45,890 --> 00:08:53,380
This will provide template literals, so that will be on GB and inside this, that is up and this is

117
00:08:54,110 --> 00:08:55,110
a dollar sign.

118
00:08:55,130 --> 00:09:00,350
And so this that will be BCG know whatever we go out from here.

119
00:09:00,350 --> 00:09:08,540
This the same thing as here, BCG and then it is the temperature is closed.

120
00:09:08,930 --> 00:09:16,850
OK, now inside the article, there would be some values that would be the weight of the color and there

121
00:09:16,850 --> 00:09:19,880
would be the hex scored on that particular color.

122
00:09:21,290 --> 00:09:23,390
So, for example, that is a red color.

123
00:09:23,390 --> 00:09:28,940
So there will be a hex code for that, for that color particular and there will be percentage of bonus

124
00:09:29,300 --> 00:09:31,670
in that particular article box.

125
00:09:32,180 --> 00:09:39,830
So what we do is we provide a filter and we'll give it a class name, so.

126
00:09:43,310 --> 00:09:50,180
Class name would be percentage of value by percentage value.

127
00:09:51,420 --> 00:09:53,550
Because this will be containing the pattern.

128
00:09:53,700 --> 00:09:54,000
OK.

129
00:09:54,600 --> 00:10:02,010
So, for example, fifty five percent like this for her, I will provide our dynamic value, so that

130
00:10:02,010 --> 00:10:02,790
will be very.

131
00:10:03,910 --> 00:10:12,540
Be it those there to next will have another bag or another Adobe tag, and we will give it a class name.

132
00:10:13,820 --> 00:10:17,120
And last name and this will have the color venue.

133
00:10:17,460 --> 00:10:17,750
OK.

134
00:10:18,860 --> 00:10:21,910
A lower value means what the Heck's called alert.

135
00:10:24,380 --> 00:10:24,920
Well, you.

136
00:10:29,050 --> 00:10:31,570
We'll provide some type of script, so hacks.

137
00:10:32,530 --> 00:10:34,320
Well, this is the color.

138
00:10:35,200 --> 00:10:37,620
This right here, this is what we are using here.

139
00:10:39,640 --> 00:10:46,570
OK, so that's it for this now we'll move farther and we'll provide some more functionalities here.

140
00:10:47,940 --> 00:10:56,670
But here I will just console log the hex value of console dot log and I will console of the Hex.

141
00:10:58,490 --> 00:11:00,610
No, I can just see it.

142
00:11:01,380 --> 00:11:02,060
And.

143
00:11:03,800 --> 00:11:10,190
Okay, I think this is it will also add copy to clipboard functionality.

144
00:11:10,730 --> 00:11:18,260
And but now we want to render this inside our main component inside our dogs.

145
00:11:18,500 --> 00:11:20,490
What we have not yet imported it that.

146
00:11:20,510 --> 00:11:26,870
So we'll do that and we'll also create the copy to clipboard functionality will add a copy to clipboard

147
00:11:26,870 --> 00:11:27,760
functionality now.

148
00:11:28,490 --> 00:11:35,560
So I guess in this, so more would be done, more could be done.

149
00:11:35,840 --> 00:11:38,240
What else will we have left out?

150
00:11:38,250 --> 00:11:44,360
We want to create some styling soon that also will create focus on the next video will confirm this

151
00:11:44,360 --> 00:11:47,230
and not after death and see how the data has been rendered.

152
00:11:47,830 --> 00:11:53,420
We'll and then next, we'll give some styling and then next, we'll add a copy to clipboard functionality

153
00:11:54,420 --> 00:11:56,360
so that we bring in the further.

154
00:11:57,340 --> 00:11:58,210
In the photo session.

155
00:11:59,470 --> 00:12:00,850
To see in the next one.