OK, so after the button, you will, Howard, do you know, with the class name of the timer container,
what's the class name and start timer?
Contained so inside this do that would be the like component, which is responsible to show the timer,
so that is another do which will be having a class name of timer, wrapper, timer.
Sapper.
OK.
So inside this wrapper.
We will have the countdown animation component.
OK.
Well, let's call it so.
Going down any mission now.
This is a component.
Now all of the props which we created in, let me show you.
Like these these props now they are asking for all value for those values will be provided in the obnoxious.
OK.
So here.
Well, the key we will be giving people a total.
And.
For the time, also same.
And.
For the enemy.
There will be these start enumerate start.
Animate.
Now.
For the like, this was not this requires our closing tech as well.
So.
We will provide it a closing tag.
Cool, cool, cool, cool, cool.
Now the inside of this, there will be the children.
And we'll pass it to.
Senator.
So after this are like mode, the debate will be closed and there will be the last move after this all
happened, so there will be a last step which will be having a last minute button rapper button.
Remember, we already gave up styling for this in the first, I think in the second or third video,
we gave the styling for this particular day of.
And ahead, we'll be having Delbarton component.
And.
So now we'll be providing the vital.
Which is equal to start after that, there will be the acting class.
Uh.
Active class.
And this is equal to no, we should not be solved any minute starting.
If it is not, then it should be active.
And otherwise they should be on be fined OK and undefined, and but they will close.
Not again will do the same thing for the boss.
This was for the start, right?
We'll be having for the boss.
OK, still here we'll be having a title.
All right.
And that is equal to falls.
And an active class.
Acting Class B start.
Any need?
And if this is true, then it said to the.
Active and otherwise, this will be undefined.
Right after that, we'll be having the call that function and which we forgot in our.
Arthur Burton, we're here will be having that.
Call back and inside this will be passing before as time.
Exactly.
But here we'll be passing this time downward call back, and it will be the start timer.
Now I hope this is clear.
And.
Now we should have the closing of the old three and which is there, so anybody could think of Gordon's
de facto.
Now let us provide a little bit of styling which was left.
So let me go to the.
Next door to CSIS, and there is some little stylings of that old just copy paste because that is a
similar one.
So let me just do that in our.
Second.
Then go to next door to the USS.
So this was the styling, which I didn't like a global styling for the font and all and the font family
and everything else so that we just did.
Now, look, can we save it?
And let me just see on the browser if things are going well.
So I'll open up the terminal.
It's opening, and I'll go to the folder where my product is at a signing window.
And I don't npm start.
Now this will start up a server on up or ten thousand on the local post and we will be able to see the
changes on the.
Browser.
We are seeing an error because we did not import the context in here from the settings context.
Let me do that.
Import.
There are things context.
From.
And taxed.
Andy Serwer, thanks.
We save it.
We are having an add on the things context.
On the line, the six.
OK, there's a spelling mistake of few paid.
We just did.
I think things are working perfectly.
Let me go to the browser and check now if it is there or not.
No, when I tried to go to the pros, can you see?
Yes.
So it has been a year, but let me let me check if that works properly.
So that is odd.
Input page where we have to give the input like what is the amount of time, so let me just leave it
as it is, which should be the default?
Yes, the default was 12 seconds now and it's time the timer should start.
And yes, it is working properly.
The time we started, let me try to pause it.
Yes, it is working.
And let me start it again.
Yes, it works fine, look at page two zero and let's see what happens.
And yeah, it is working as expected.
No, let me see the brakes one.
A short break.
Thirty two point six.
That is the six seconds.
So let me start.
And yes, that is also working fine.
Let me see the long break.
Just for the 30 seconds, and that also works fine.
If you try to bother to start and that is working fine and now let us try to go to these settings and
give the.
I paused and let me try to go to the settings and give the custom time.
But let me give some custom like two minutes and let me try to set the timer two minutes.
Then we try to start and start the eight already started.
So that means we have successfully created an order application and the project is successfully created
and it's working perfectly fine.
So let me try to make it one minute.
One minute and start the timer.
Yeah, that works perfectly fine, too.
That does it for the project, guys, I hope you have learned a lot.
We made the use of extensively movie made use of the global context, and it was it in the abroad years,
we made use of many, many different, different functions.
I know this was a little bit complicated by it.
And if you think that you did not understand properly or you did not understand at all, these go through
the videos again.
You will connect the dots because that is how things work.
And one and one piece of advice I would like to give you whenever you are watching any audio or any
kind of like a tutorial, video or chapter, which is that, you know, video form on any course video
calls.
So what you need to do is fast to need to watch it like a movie.
You don't have to touch the keyboard.
You don't have to write any code.
So then you like you just think that, OK, this is the introduction.
VIDEO And and this is just to I have to just see to get the introduction to this topic and what I was
being taught so that you get familiar with that terms.
What is the terms?
What is the function?
Basically, you will get familiar with the plot of the project and with the plot of the technology,
which is being used.
So the first time like, don't stress too much just to watch it as like a movie kind of thing.
Just try to understand what is happening.
Don't try to do it on yourself on the very first time.
Just try to understand it.
Like what is happening, what is happening, why this is doing, what will happen next and try to use
your brain and try to understand the plot.
That's it.
And in the next turn, when you go through that course again, that time you need to pause the video
and decode yourself around it and see that time, you know, to do so, most of the people be like,
get frustrated because they watch it for one minute deposit and they try to know what's in it to understand
the plot of the application and the technology which is being used.
So that is why this is really, really important.
So if anyone has just watched it for the first time, and if you are feeling that, I do not understand
anything.
Please now watch it once or after you have already watched.
Now go to it once again and now try to quote.
Don't try to code in the very first time when you just see anything.
All you need to do is jump in the coordinated and you start typing.
No.
Now you need to do it in the second half.
That does it for the product, guys.
I hope you have enjoyed a lot, so keep learning and the thinking.