OK, so right now, I'm in my I.D. that visual studio code, and I thought, what is running successfully?
Well, before like moving further, I want to just install the package, which we discussed.
That is the well-used Argus.
So I will install it.
Before that, I need to stop the software with controls.
And I'll clear this all, and I'll install the package with the command and be in and install.
You can also use just I either shortcut for install npm II and then the name of the package.
So that will be values targets and then you need to press enter.
So then it will take a few few seconds and values to our guests will be installed in our project.
So it's installing.
And.
As you can see, our package has been successfully installed, so once it showed this kind of message.
So that means your package is successfully installed.
OK, so now we can just clear test and again run our site over there.
Artisan PMS dark.
And you can just minimize it, so you can also open the terminal with the shortcut on the keyboard that
is controlled plus back pick the key above above the tab is known as the backpack, so you can also
open from that so you can also close it from that control plus backpack and it will hide the terminal.
So maybe it's not working now.
I hope you can open it and you can close it with control perspective.
So that sort.
Now, let's go ahead and start building that application to what we'll do is we'll create the things
and the averages only like, don't we don't need to create another component or we can even create,
but there's no like problem with that.
So we'll create this in the gorgeous.
So first of all, let me just, uh.
In the bill.
Like in place of live, we can also put this syntactic sugar from like which in react because the fragments,
so this act so that they won't listen to this now we can have multiple dips.
Remember, there is unnecessarily of one alternative.
You can't provide like eight one eight one eight one, and that is no Dave to wrap them.
There should be a day of wrapping all of the like elements.
OK, so now I've provided this fragment extremely now.
What I do is, first of all, I'll give it two or three with the ending of the generator.
So color.
Generator generator.
OK, so now we basically we need to wrap this inside a section, so let me create a section.
And we'll wrap this inside a section subsection below.
Have a form which will be expected and like whenever we type the value, so we need a form like we need
input field and we need some metric.
So for that, we'll be using a form, so that will be a form below the H3.
We can create a form and then it will be a form and action as such.
We have not like we are not going to put anything but Typekit we can put.
Typekit will be not type off type text.
And hold until we can, we can later.
First of all, let me just finish.
You like the basic structure we are creating, not the final thing.
So this will be the farm and inside the farm there will be an input field, so.
And for all, if you can leave it like, don't need this Typekit, you can put that directly in, then
what will I need to put that?
OK, so in the input field?
This is the input type is text, so and then what we'll we'll provide.
A place holder may be.
Police will which will see eye color, maybe we'll change it later on with the default color value,
but as of now, we'll just put type color and after the input field, we'll have a button.
OK, so that button will be.
Type of some summit.
I hope of some red button.
I met.
And there will be attacks inside the town, which will see.
Submit or I can say.
Generate colors, get colors.
I got creative with these things.
Got colors.
OK, so this is all for the beginning.
Let me just save it.
And when I go back to the browser, you can see we have got like basic structure.
So then what feel where will type or color?
And this is the button which will like it was, which was fired off a function and their function will
give us the colors.
So this is the basic structure and this is the herding color generator.
OK.
So let me add some functionality to it.
First of all.
So first of all, I need to provide a function like whenever I type.
Here are some things so bad things should be recorded somewhere that should be available, that need
that will keep.
OK, sorry, sorry.
Sorry, the screen was stuck.
Let me repeat again.
What I was saying is that we need to provide our variable.
So which of which will record all of the data, which we are typing.
So we need to provide our variable for the color as well, like whatever the color we are typing.
And then it will also form a list and everything will be going to that.
First of all, let me create a contest I use.
I use state content for that.
I need to.
It's important that you from the app.
You spared and.
Inside this function will be at a constant state.
A U.S.
State that will be followed and a function calls.
Said color.
And that will be equal to a U.S.
Stay.
And here inside this, there will be default will like the initial value so that can be even left out
blank.
No issues with that.
We can also leave in blank.
No, we'll provide a function in this input for you or which will like fire off whenever we type something
for.
We can create a function outside also and then call it on giving the engine.
But we can also do it in line.
I like to do it in line.
So for that, I need to provide function here like that is on change and so on.
Change and calibrations because this is JavaScript for being fired off for function inside this, that
will be taking an argument of me or event.
Also, you can type.
And now we will set the color like said color, who?
They went door to door and knew.
That's it.
Now we will also provide a value to this input, one that can be having a value and that value would
be color.
Same thing.
What we declared here.
This is the value.
No, let me save it and let us go back to the browser and check if things are going the way they should.
So right now, I'm in the browser.
And OK, let me just do one more thing.
Let me just console log like whatever is there.
So let me just console console.log for what we'll do is here will create a function.
Like, I was trying to console like I was thinking to console log in, but I will show you another method
of seeing like what is being changed in our project.
Let me go to the browser and I go to the browser.
That is no change.
Yes.
So first of all, let me open that don't have to button.
This is the control, and I have installed a really cool extension, which is known as a react developer
tools.
So you should also go ahead and install it.
It is available for Chrome also and Firefox also.
So I'm using Firefox right now.
So having started for Firefox, once you install that, you can just press F12 and go to this thing
right here and then you can go to the conference.
Now it will show us all the components, all the status and all props and all everything.
So just take a look just to keep an eye, keep an eye on this state.
But whenever I type something that should be a change in this if we have successfully like in the state.
So let me just disappear something.
Let me type a color name.
So maybe new you can see, as I was typing, it was getting recorded here.
And now let me just to Newton.
The state is changing, maybe I'll write a law about it like it works according to that.
And if I write, read or anything, I write anything I write, but that is regarded and that OK, if
I use state working perfectly for next, what we'll do is we'll move further and create something more
and.
We'll also add a constant for the error.
Like whenever we like user types, any color which is not defined or any gibberish tax types before
that, what we need to display that will do in the next video.