OK, so now what we'll do is we'll import are a package which we have just to be installed at the beginning
of the project, so that was valued or guess or we'll import like values from.
Values?
Yes, right.
Both.
That said.
David.
And now what we are going to do is I'm going to create a list.
Now this will grab the colors from the lake package, you know.
So for that, I'm creating a list.
Now this will be the list of colors.
OK.
So later on, we'll do like map this, how to map this list and all will do that.
But right now we'll just to create a list so that can be list.
Of course, I'm using you to create the list.
List and set list.
Will be set list, and they used to.
The you state and inside this, there will be like, first of all, there will be a default value.
On a default value is that whenever we all the paid, so we should see some of the things like by default,
like I explained, you let me just show you in the browser or like when I go to the website, there
should be some default value and which will show me some colors.
If I don't provide that to my page will look empty and I don't want that to happen.
I want my page to look like little faded up with colors or not.
So that's why I on.
I'm giving that thing also inside I used it, what I do is I create a new and a new and of values values
which me important in writing this thing.
So values inside this.
What I do is I'll provide a default color value.
Who maybe I put a lower value in the moment that should be in the Hex before Hector should have a hashtag
starting.
OK, so this is what I am going to provide.
And next, what I'll do is I'll explain like can we take you to the documentation of this?
So when I go to work, it's just.
See, this is where we are going into this lot color dot org and inside this, there is an argument
we can pass 10, 20, 30, whatever.
According to that, we'll will be getting the values and change.
OK, so we are not looking at this right now.
We are just looking at this function, this matter right now.
Of course, we can go ahead and explore this package.
So when you go to this occasion, there are a lot of methods, a lot of colors, shades, shades and
whatever you want.
Like however you want to implement that in your project.
This is like wide, wide package, and you can see there are so many downloads to look like.
It's a widely used package.
So what I'm trying to say is that you can make use of it.
But in this photo, Tony, we're just going to use this this one.
OK, so color on that is what I'm going to do here or inside the values.
No, well, it was dark.
All OK.
And be passing in here as I've never been, but we may change it in the coming time when we progress
with the project.
Okay, now here I can provide a parenthesis to my old man.
Sorry, bad with my talk.
OK, now what we want to do is that we want to set the list and we want to like as soon as we type.
So we want the close right, we want the colors.
So that is what we are going to do here.
So after the event or prevent default, what I do is I'll implement the try and the blocks.
So maybe I'm having a little cold, that's why my daughters is in bed with me.
OK, so we'll add a try and catch so inside the eye, what we want to do is we want to request the color
so light colored.
No, I'm assigning a variable here because light so light colors is equal to new and inside the values
and news values.
And inside this, we'll pass that color.
Now which color is that we are passing?
This is this color.
Whatever we Typekit inside that input, it will take that color.
It will take that key word from here in this available and we will pass this inside those values, which
is the package or edible or package function.
So after passing this, we want all as of now, we'll give 10.
And now what we did here is that we requested the colors for this particular color.
Well, you know, this is hard coded.
And now I explained why we did this.
We did this just to show it on the home page when when we cannot search for any color by default, there
will be shades related to this color.
So I hope you understand next to what we'll do is we'll start the list, said the list.
And what the list will be said to.
That will be list will be set two colors.
And now after this, we'll add up catalog.
Now if, for example, if there is an error.
So for that, we as the go to block.
So it's not all.
I did a mistake expert to not have be so bad.
It will be error or you can you can rent it or whatever people are.
Also, so I'll write error and we'll set the error.
There that are to do.
Now here is what we are making, the use of that used it.
We created this, this.
This hope is now being utilized whenever that is an error, it will set it to true and it will come
here and the last name for the input will be start to erode and binder of the input will be changed
to data collected, which indicates that that is an error and the entry is not valid.
So that is the use of this catch block.
And of course, we want to know what the are, so we will console log in or console or log inside this
we log what does that error console log error and only just save it?
And let me see if that is something else remaining here.
We've implemented the handle some and on general Tommy Adams and but now we have hit the button.
So now everything else is done.
But we want to get the callers, so we will controlled our blog and we'll see if you are getting the
calls or not.
So let us go to our.
But I also.
All right, OK, I will open my console.
And the fire type start typing here, nothing really happened, and no.
There was something that it was not all, and I took it out when attempting to proprietary resource.
Maybe it's because we are internet.
If I just truly loaded.
No, no, no, no, no, actually, our throat is not running.
And PM Dr.
Okay.
If this happens, if you don't get on your cell phone, well, whatever changes you make, that will
not be reflected on the browser.
So that is really important that you check that your server is running whatever component you have created.
That component is important in the app drawer or not.
So that is really, really important.
It's the starting us out of what that does to give it just you a couple of seconds.
Once her chores they're done for will move to the port on which the server is running.
Okay.
Okay, now it's running.
It's running.
OK, we are here.
Let me talk.
Just now when I type something.
Or do we get something not to let us go to this?
Components.
And app component.
You can see that is.
Yeah.
We are getting data.
We are getting data, so.
That means this type of column that will be read.
And when I look at coloured people that are acting like, you see.
The state did start to read and the state this a state is fired at a state of world because red is a
valid name and we get all the data, we get all the data like according to the colors, we get all the
areas and objects regarding the colors we get.
That means our app is working fine.
It's me type another like, invalid name.
So it will show that the state to fall through, but it's not doing that.
No.
Why?
And if pressure?
It did start to fall and maybe some British.
But right.
I'm not getting any callers.
He'll do that.
I will take a look in the way it will be.
It will be good if we check it in the UAE.
So next we'll be creating the color component for what is what is that?
Is that, first of all, let me create a section down here.
So inside, like after this, we'll create another section, so section and this section would be for
the poor showing the colors, OK, so I'll give it like right now it will be empty.
We will create another component, which will mean more than a single color, and we'll import that
component here.
And with the help of that component, we'll be able to display all the colors related to the key word
which you have searched for.
That is what we are going to do next.
So next, we are going to create another component, which will be known as single color.
And we will work on it.