Now, let's come down and tie up all these functions to all the respective components and elements,
basically.
So for example, this day of filming on so.
For this form, we will have the one submit and there will be someone OK.
Also so for this form, we will be having our value that you didn't know when you did.
So that will be creating inside the settings and no validate and heard it would be on summit.
One summit and inside is that will be the function which we just created as the one summit function.
Inside the summit, that will be the annual summit.
No man and a.
Submit.
OK.
I guess that is enough.
Yeah.
And the summit is not coming to this day in Port Rapper, very good, but inside the input elements,
that would be all a bunch of things that we need to change actually and not change the inside the input
that would be this class name as input type, as number and name as work.
OK, so far, so good.
But now we would add two more things to this.
So that will be the one change like on the change, and that will be a function that will be the change.
Basically, I can drive this.
And all of the three components, right?
So let me try to do it, so I will press old.
And you can see I can write something tirelessly in all of the three components elements.
Three.
I'll write on change.
On change, and this is equal to and the curly braces and then change and then change symbol.
This I have done using the button I to key on the keyboard, but just press your key and like move your
cursor and select the area where you want to write like this.
OK, so on tune and bluejeans on June and June, in June and simple.
Now we will give the value to each and every input.
Which it should be explored.
OK, so here there will be a value.
Then new.
Equal to.
New time, what?
So what are?
But.
Values equal to new time might not work.
Same here, also.
Value is equal to.
New time, one thought.
Talk.
Next, inside of this bed would be value is equal to.
Neil Diamond thought long.
And.
Simple.
And this button is that Typekit Summerton said thank.
I think said the rock component is 100 percent completed, I guess.
We have also done this styling part and we have given everything like the functionality was in the script
and the hopes and all.
So next we will move on to.
Focus on next, we'll look at the countdown animation component for that.
Let us go to the Components folder, and here we will create the countdown animation component inside
this countdown animation.
So let us do that.
And an animation component will create a file here inside the components that will be.
Count.
Down.
Animation is.
OK.
So now what we'll do is we'll import that boilerplate code using our extension, so controls it could
be a snippet.
So are the FCC.
And put.
Now we will import some things now after this, after the election board will import, the very first
thing is the use context.
Use context and from React.
From the end.
And next, we will be importing something from the package we installed that a year ago, remember the
discount the entire time, what package we installed from the npm that is going to play a main role
here.
So that is the whole picture.
Because that is responsible for the countdown and all that, let us do that.
So let us first imported still will import that like import.
Gone down.
And vertical alignment.
Something like this sound filling is not going to act, you know, it's perfect.
Some downside of all time.
But on.
Phone down.
Yeah.
This one.
Import gone down.
Countdown Circle timer from the countdown timer that said.
Now what we'll do is we'll pass some props inside this so that we make use of those props inside the
gorgeous.
So let me pass some props inside the function or inside this object that will be key, that will be
timer, that will be animated.
That would be the children.
And I think that's a key time in return, children, I think that's it, OK?
Next after this, there will be the concert and inside this, there will be these top.
And many.
And.
This we will be making use from the use context, but from these settings concert text, which we are
going to build after this, so use context and service, we will party things.
For context, let me import it also, although we have not yet created it, but will imported the import.
So things context.
From.
I will create a folder here.
And naming as context, and after that, we'll be creating this phone, so integrating settings.
Context.
So we'll do it in a minute.
OK.
But after this, inside did a ton.
Will remove the active.
And we'll usually component this countdown timer component also.
So let me just Scorpius.
And inside the Senate on.
After this.
So this is it.
We will close this.
And it'll give us the closing back, but inside the opening deck, we will have a lot of things.
The very first thing is the key.
He is equal to key.
Next, we will be having is playing function now is playing.
Is it true or false?
So that is the animate.
Animate.
Next, we will be having the duration.
Like how much time it should be like animated, so duration is equal to.
Timer in 60.
Into the next, we'll be having the colors.
Colors and the colors there shouldn't be like this.
That is an ad, basically.
And let me just see what what are the colors?
So basically it's the theme and.
Inside of the main are aid, there are subsidies.
So the first one is as it as this is one that will be if these six.
And six or eight?
And then you can give a comma and then you can drive point three three.
OK, I will copy it three times because this is the only same thing.
Who will give a comma here?
Will paste, will give a comma and will paste, and we will be one of those comma just to make sure
that is all right.
OK, now we will like close this.
It's automatically close, and after that we will be giving this talk with.
OK, so what is this project?
I will explain you after this when we'll be reading the documentation.
We will ride the.
Look.
With.
And that will be equal to six.
After that, we'll be having the size.
And the size and equal to 220.
Next will be having deep brain color.
Get.
Which is also equal to this exclude.
Which is one five one.
And I'm thrilled to.
Three took.
On one night, two.
Now on complete, he will have a function like which will be calling on complete on.
Complete.
We have a function which will accept a function.
So that will be dysfunction, which will expect to function now inside of this.
There will be stop any mood.
Yeah, this one.
Yeah.
This one, this top element would be there inside of this and between this, that would be the chiller,
whatever is there that will come here.
So that will be the bill in the lower case.
And then we see it.
So that looks something like this right now will not fit into this, so things are going, OK, there's
a typo.
So things.
You said this was it, now we will go to the documentation and see what we have actually done, so that
will be doing in the next video.