OK, so now let's work on a single color component.
So for that, I will need to, first of all, need to create this boilerplate code so that I've already
done, who know what I'll do with that?
Inside this single function, I'll pass some props or that will be on the job and then I'll pass the
word.
And this is the vehicle.
I like the percentage of the column, basically.
And then I'll pass the index and then I'll pass the X.
And not violence, it's color.
All right.
So that is a.
That is our TV lead index, hex and color.
OK, so next inside this function.
What we do is that will create some of the folks you hawks.
So we'll, first of all, create the alert, so alert will be noted here alert and then we'll be setting
the alert both set alert and then we'll provide a stay at home care, use it.
And that will be false.
So this alert is I will tell you whenever like we copy something to the clipboard, so then we will
be making use of this right now.
Just forget we have just defined this and just forget after defining this, forget it.
OK, so now we will next.
We will.
First of all, we import some of the three things here saw it from the first of all, we have to import.
They use the state hokum because we have used it here, but we have not like imported it.
So that was thrown at.
So here I will try to use state.
And I will also import you the fact use the fact, because we may be using this or we may not be using
or just for other friends.
OK, now next, we want to do is that we want to like if I go to the browser and show you inside this
whenever we are getting the color.
So, for example.
That is the original color.
Wait, let me spin underserved first.
In our country.
So.
Let me go to the project, and this is the color generator and as we type and start.
And sort of spin up my server, and once it spins off my server, I'm sure you like where from where
we are getting the data and all and where we want to actually.
Like getting the data and how we want to convert it and how we want to display it, so.
Okay, well, I just started my site or my server was not running, so I let time to come on and start
and then I run the server.
So now it's taking a little time to start off.
We'll wait till the server starts off.
Okay?
And I, what is up and running?
So when I go here and I open my booth.
And the part I've heard.
Blue and gold colours.
Who had I seen nothing, and when I go to the Red Bulls inside this company.
And if I go and start to add component and for the blue, if I guard those colors.
Okay, so I am not getting any color.
Maybe I should have, but I have to control them log and then I have to see.
So.
Okay.
That is an ecology at.
OK.
We can tell when true or false from here, you can see.
OK, so that is not the point here.
So then we have to like whatever the color we get.
No, that is, and it is the pneumatic form.
Then we have to convert train into the string and separate with the commas.
Right now, we can't see it.
For some reason, maybe we can control or log it and see that's not an issue at all.
I'm telling you that is enough.
So then we have to convert it into like order to form, and then we could join it and form one color
and separate it with the comma.
So that is what we are going to do now.
Let me go to the browser.
Oh, it is my bra, not browser, my I.D..
And here what we'll do is we'll create another concern that constant will be VCD and that will do is
odd job start doing so now we join it and in in like in between, we'll provide this.
Goma's, after joining, there will be commas in between.
All right, then we'll have another constant.
So that will be Hex no admin to Hex.
We convert auditable to Hex and then we grab the hex value.
OK, so this is not like if we're converting something, we need distorted song, right?
So they're going to be gone.
X is equal to R GB to Hex, and then inside this will pass R O R D, we will lose.
So we are using our restructuring restructuring here.
That is the object of already structuring, but will use R D B to successfully parse this and this is
a separate operator.
Remember, once we've discussed about this, so this is split, operate it on what it does.
Is that it?
It just spread to the order array or object, like if an object contains so many like classes and so
many elements.
So this restructuring the object by split open, it does simply like copies every each and every element,
one by one port or render or map each and every element one by one.
Not necessarily copying.
Copying.
OK, so that we have done.
And next, we want to create an R and you wait here.
So how color will look like and what should be that?
So things like that should be there.
So here I will create an article I, the leader did and then create an article.
Article?
Let me read the article before the article, I'll give some glasses my last name and I'll give up last
name of.
Class name and that class name will be like color, so what color is this?
Now this is the color which which we have searched.
And according to that, only we grab the colors OK.
So now let me provide this again, the template reference and had our first color night and small letters
colored.
And there will be a dollar sign.
And inside this, that would be index, not index, not index index index.
And that index would be greater than 10.
And.
We'll put and there and here and and and life alert should be.
Now, whatever this class is angry, whatever we are creating that is related to us and then we'll be
in the system, we discuss everything in detail.
OK, we are done with this.
Now we want to provide some inland styling for this, so that would be in line styling style is equal
to background color.
Now what would be the background color of this particular article?
This will be the color of the selector color, which we are getting.
OK, so that will be not.
This will provide template literals, so that will be on GB and inside this, that is up and this is
a dollar sign.
And so this that will be BCG know whatever we go out from here.
This the same thing as here, BCG and then it is the temperature is closed.
OK, now inside the article, there would be some values that would be the weight of the color and there
would be the hex scored on that particular color.
So, for example, that is a red color.
So there will be a hex code for that, for that color particular and there will be percentage of bonus
in that particular article box.
So what we do is we provide a filter and we'll give it a class name, so.
Class name would be percentage of value by percentage value.
Because this will be containing the pattern.
OK.
So, for example, fifty five percent like this for her, I will provide our dynamic value, so that
will be very.
Be it those there to next will have another bag or another Adobe tag, and we will give it a class name.
And last name and this will have the color venue.
OK.
A lower value means what the Heck's called alert.
Well, you.
We'll provide some type of script, so hacks.
Well, this is the color.
This right here, this is what we are using here.
OK, so that's it for this now we'll move farther and we'll provide some more functionalities here.
But here I will just console log the hex value of console dot log and I will console of the Hex.
No, I can just see it.
And.
Okay, I think this is it will also add copy to clipboard functionality.
And but now we want to render this inside our main component inside our dogs.
What we have not yet imported it that.
So we'll do that and we'll also create the copy to clipboard functionality will add a copy to clipboard
functionality now.
So I guess in this, so more would be done, more could be done.
What else will we have left out?
We want to create some styling soon that also will create focus on the next video will confirm this
and not after death and see how the data has been rendered.
We'll and then next, we'll give some styling and then next, we'll add a copy to clipboard functionality
so that we bring in the further.
In the photo session.
To see in the next one.