1
00:00:00,180 --> 00:00:07,650
OK, so after the button, you will, Howard, do you know, with the class name of the timer container,

2
00:00:08,760 --> 00:00:10,980
what's the class name and start timer?

3
00:00:12,660 --> 00:00:21,600
Contained so inside this do that would be the like component, which is responsible to show the timer,

4
00:00:21,600 --> 00:00:28,350
so that is another do which will be having a class name of timer, wrapper, timer.

5
00:00:31,150 --> 00:00:31,720
Sapper.

6
00:00:33,430 --> 00:00:33,760
OK.

7
00:00:35,010 --> 00:00:36,990
So inside this wrapper.

8
00:00:37,930 --> 00:00:41,110
We will have the countdown animation component.

9
00:00:41,710 --> 00:00:42,010
OK.

10
00:00:43,670 --> 00:00:45,560
Well, let's call it so.

11
00:00:48,830 --> 00:00:51,200
Going down any mission now.

12
00:00:52,670 --> 00:00:53,690
This is a component.

13
00:00:54,590 --> 00:00:58,640
Now all of the props which we created in, let me show you.

14
00:01:00,560 --> 00:01:09,110
Like these these props now they are asking for all value for those values will be provided in the obnoxious.

15
00:01:09,890 --> 00:01:10,250
OK.

16
00:01:11,190 --> 00:01:11,940
So here.

17
00:01:13,940 --> 00:01:17,870
Well, the key we will be giving people a total.

18
00:01:19,870 --> 00:01:20,440
And.

19
00:01:21,550 --> 00:01:23,230
For the time, also same.

20
00:01:27,650 --> 00:01:28,190
And.

21
00:01:29,340 --> 00:01:30,120
For the enemy.

22
00:01:32,240 --> 00:01:35,240
There will be these start enumerate start.

23
00:01:36,670 --> 00:01:37,360
Animate.

24
00:01:38,350 --> 00:01:38,890
Now.

25
00:01:40,840 --> 00:01:46,840
For the like, this was not this requires our closing tech as well.

26
00:01:48,520 --> 00:01:49,300
So.

27
00:01:51,220 --> 00:01:54,610
We will provide it a closing tag.

28
00:01:55,300 --> 00:01:57,040
Cool, cool, cool, cool, cool.

29
00:01:57,990 --> 00:01:59,950
Now the inside of this, there will be the children.

30
00:02:02,290 --> 00:02:03,340
And we'll pass it to.

31
00:02:06,050 --> 00:02:06,500
Senator.

32
00:02:08,040 --> 00:02:16,440
So after this are like mode, the debate will be closed and there will be the last move after this all

33
00:02:16,440 --> 00:02:23,390
happened, so there will be a last step which will be having a last minute button rapper button.

34
00:02:24,770 --> 00:02:29,660
Remember, we already gave up styling for this in the first, I think in the second or third video,

35
00:02:29,660 --> 00:02:33,590
we gave the styling for this particular day of.

36
00:02:34,970 --> 00:02:38,990
And ahead, we'll be having Delbarton component.

37
00:02:39,960 --> 00:02:40,350
And.

38
00:02:42,910 --> 00:02:46,810
So now we'll be providing the vital.

39
00:02:48,100 --> 00:02:54,580
Which is equal to start after that, there will be the acting class.

40
00:02:55,760 --> 00:02:56,260
Uh.

41
00:02:58,820 --> 00:02:59,690
Active class.

42
00:03:00,140 --> 00:03:06,590
And this is equal to no, we should not be solved any minute starting.

43
00:03:07,070 --> 00:03:10,340
If it is not, then it should be active.

44
00:03:11,940 --> 00:03:23,040
And otherwise they should be on be fined OK and undefined, and but they will close.

45
00:03:23,830 --> 00:03:28,050
Not again will do the same thing for the boss.

46
00:03:28,380 --> 00:03:29,520
This was for the start, right?

47
00:03:29,910 --> 00:03:31,140
We'll be having for the boss.

48
00:03:33,110 --> 00:03:35,840
OK, still here we'll be having a title.

49
00:03:38,290 --> 00:03:38,650
All right.

50
00:03:39,170 --> 00:03:42,190
And that is equal to falls.

51
00:03:43,260 --> 00:03:44,880
And an active class.

52
00:03:46,390 --> 00:03:49,990
Acting Class B start.

53
00:03:51,300 --> 00:03:51,960
Any need?

54
00:03:52,770 --> 00:03:58,470
And if this is true, then it said to the.

55
00:04:00,850 --> 00:04:05,500
Active and otherwise, this will be undefined.

56
00:04:07,410 --> 00:04:13,920
Right after that, we'll be having the call that function and which we forgot in our.

57
00:04:15,580 --> 00:04:17,950
Arthur Burton, we're here will be having that.

58
00:04:19,970 --> 00:04:24,050
Call back and inside this will be passing before as time.

59
00:04:26,120 --> 00:04:26,810
Exactly.

60
00:04:27,200 --> 00:04:38,220
But here we'll be passing this time downward call back, and it will be the start timer.

61
00:04:39,140 --> 00:04:41,900
Now I hope this is clear.

62
00:04:43,050 --> 00:04:43,710
And.

63
00:04:45,110 --> 00:04:53,030
Now we should have the closing of the old three and which is there, so anybody could think of Gordon's

64
00:04:53,030 --> 00:04:53,580
de facto.

65
00:04:53,640 --> 00:04:56,510
Now let us provide a little bit of styling which was left.

66
00:04:56,770 --> 00:04:58,340
So let me go to the.

67
00:04:59,790 --> 00:05:05,290
Next door to CSIS, and there is some little stylings of that old just copy paste because that is a

68
00:05:05,290 --> 00:05:05,950
similar one.

69
00:05:06,580 --> 00:05:09,580
So let me just do that in our.

70
00:05:10,860 --> 00:05:11,280
Second.

71
00:05:12,700 --> 00:05:14,680
Then go to next door to the USS.

72
00:05:17,310 --> 00:05:24,570
So this was the styling, which I didn't like a global styling for the font and all and the font family

73
00:05:24,570 --> 00:05:27,390
and everything else so that we just did.

74
00:05:28,710 --> 00:05:30,000
Now, look, can we save it?

75
00:05:31,410 --> 00:05:34,980
And let me just see on the browser if things are going well.

76
00:05:36,190 --> 00:05:38,200
So I'll open up the terminal.

77
00:05:41,340 --> 00:05:48,230
It's opening, and I'll go to the folder where my product is at a signing window.

78
00:05:48,660 --> 00:05:51,300
And I don't npm start.

79
00:05:51,860 --> 00:05:57,690
Now this will start up a server on up or ten thousand on the local post and we will be able to see the

80
00:05:57,690 --> 00:05:58,980
changes on the.

81
00:05:59,880 --> 00:06:00,390
Browser.

82
00:06:01,930 --> 00:06:08,940
We are seeing an error because we did not import the context in here from the settings context.

83
00:06:09,540 --> 00:06:10,410
Let me do that.

84
00:06:11,530 --> 00:06:12,280
Import.

85
00:06:16,170 --> 00:06:17,760
There are things context.

86
00:06:20,330 --> 00:06:20,900
From.

87
00:06:32,270 --> 00:06:33,270
And taxed.

88
00:06:33,320 --> 00:06:35,650
Andy Serwer, thanks.

89
00:06:36,380 --> 00:06:36,950
We save it.

90
00:06:40,560 --> 00:06:45,960
We are having an add on the things context.

91
00:06:47,840 --> 00:06:48,950
On the line, the six.

92
00:06:50,490 --> 00:06:53,610
OK, there's a spelling mistake of few paid.

93
00:06:57,760 --> 00:06:59,050
We just did.

94
00:07:00,730 --> 00:07:04,000
I think things are working perfectly.

95
00:07:07,930 --> 00:07:11,620
Let me go to the browser and check now if it is there or not.

96
00:07:14,160 --> 00:07:17,550
No, when I tried to go to the pros, can you see?

97
00:07:18,890 --> 00:07:19,400
Yes.

98
00:07:20,000 --> 00:07:23,750
So it has been a year, but let me let me check if that works properly.

99
00:07:23,750 --> 00:07:24,980
So that is odd.

100
00:07:26,860 --> 00:07:33,010
Input page where we have to give the input like what is the amount of time, so let me just leave it

101
00:07:33,010 --> 00:07:35,870
as it is, which should be the default?

102
00:07:35,890 --> 00:07:41,200
Yes, the default was 12 seconds now and it's time the timer should start.

103
00:07:41,980 --> 00:07:44,620
And yes, it is working properly.

104
00:07:45,070 --> 00:07:46,900
The time we started, let me try to pause it.

105
00:07:47,290 --> 00:07:48,490
Yes, it is working.

106
00:07:48,970 --> 00:07:50,590
And let me start it again.

107
00:07:51,680 --> 00:07:54,830
Yes, it works fine, look at page two zero and let's see what happens.

108
00:07:55,800 --> 00:07:59,970
And yeah, it is working as expected.

109
00:08:00,340 --> 00:08:02,100
No, let me see the brakes one.

110
00:08:02,240 --> 00:08:03,110
A short break.

111
00:08:03,340 --> 00:08:04,770
Thirty two point six.

112
00:08:05,790 --> 00:08:06,960
That is the six seconds.

113
00:08:06,990 --> 00:08:07,860
So let me start.

114
00:08:08,730 --> 00:08:11,040
And yes, that is also working fine.

115
00:08:11,910 --> 00:08:14,340
Let me see the long break.

116
00:08:15,500 --> 00:08:18,650
Just for the 30 seconds, and that also works fine.

117
00:08:19,980 --> 00:08:27,120
If you try to bother to start and that is working fine and now let us try to go to these settings and

118
00:08:28,470 --> 00:08:29,250
give the.

119
00:08:30,630 --> 00:08:35,670
I paused and let me try to go to the settings and give the custom time.

120
00:08:36,080 --> 00:08:45,000
But let me give some custom like two minutes and let me try to set the timer two minutes.

121
00:08:45,790 --> 00:08:48,300
Then we try to start and start the eight already started.

122
00:08:49,180 --> 00:08:56,220
So that means we have successfully created an order application and the project is successfully created

123
00:08:56,670 --> 00:08:58,560
and it's working perfectly fine.

124
00:08:59,170 --> 00:09:02,100
So let me try to make it one minute.

125
00:09:03,780 --> 00:09:05,280
One minute and start the timer.

126
00:09:06,360 --> 00:09:09,090
Yeah, that works perfectly fine, too.

127
00:09:09,420 --> 00:09:13,200
That does it for the project, guys, I hope you have learned a lot.

128
00:09:13,620 --> 00:09:20,160
We made the use of extensively movie made use of the global context, and it was it in the abroad years,

129
00:09:20,160 --> 00:09:23,490
we made use of many, many different, different functions.

130
00:09:24,180 --> 00:09:26,610
I know this was a little bit complicated by it.

131
00:09:27,180 --> 00:09:33,030
And if you think that you did not understand properly or you did not understand at all, these go through

132
00:09:33,180 --> 00:09:34,170
the videos again.

133
00:09:34,170 --> 00:09:38,460
You will connect the dots because that is how things work.

134
00:09:38,640 --> 00:09:45,330
And one and one piece of advice I would like to give you whenever you are watching any audio or any

135
00:09:45,330 --> 00:09:53,820
kind of like a tutorial, video or chapter, which is that, you know, video form on any course video

136
00:09:53,820 --> 00:09:54,140
calls.

137
00:09:54,570 --> 00:09:57,690
So what you need to do is fast to need to watch it like a movie.

138
00:09:57,930 --> 00:09:59,640
You don't have to touch the keyboard.

139
00:09:59,640 --> 00:10:01,350
You don't have to write any code.

140
00:10:01,750 --> 00:10:06,390
So then you like you just think that, OK, this is the introduction.

141
00:10:06,390 --> 00:10:15,960
VIDEO And and this is just to I have to just see to get the introduction to this topic and what I was

142
00:10:15,960 --> 00:10:18,750
being taught so that you get familiar with that terms.

143
00:10:18,750 --> 00:10:19,620
What is the terms?

144
00:10:19,900 --> 00:10:20,670
What is the function?

145
00:10:20,880 --> 00:10:26,580
Basically, you will get familiar with the plot of the project and with the plot of the technology,

146
00:10:26,580 --> 00:10:27,360
which is being used.

147
00:10:27,720 --> 00:10:33,830
So the first time like, don't stress too much just to watch it as like a movie kind of thing.

148
00:10:33,840 --> 00:10:35,670
Just try to understand what is happening.

149
00:10:35,940 --> 00:10:38,760
Don't try to do it on yourself on the very first time.

150
00:10:38,760 --> 00:10:39,960
Just try to understand it.

151
00:10:40,860 --> 00:10:46,500
Like what is happening, what is happening, why this is doing, what will happen next and try to use

152
00:10:46,500 --> 00:10:48,690
your brain and try to understand the plot.

153
00:10:48,900 --> 00:10:49,350
That's it.

154
00:10:49,620 --> 00:10:56,340
And in the next turn, when you go through that course again, that time you need to pause the video

155
00:10:56,520 --> 00:11:03,540
and decode yourself around it and see that time, you know, to do so, most of the people be like,

156
00:11:03,540 --> 00:11:09,750
get frustrated because they watch it for one minute deposit and they try to know what's in it to understand

157
00:11:09,750 --> 00:11:13,410
the plot of the application and the technology which is being used.

158
00:11:13,750 --> 00:11:16,770
So that is why this is really, really important.

159
00:11:17,010 --> 00:11:23,760
So if anyone has just watched it for the first time, and if you are feeling that, I do not understand

160
00:11:23,760 --> 00:11:24,150
anything.

161
00:11:24,600 --> 00:11:29,430
Please now watch it once or after you have already watched.

162
00:11:29,430 --> 00:11:32,760
Now go to it once again and now try to quote.

163
00:11:32,770 --> 00:11:36,810
Don't try to code in the very first time when you just see anything.

164
00:11:36,810 --> 00:11:40,140
All you need to do is jump in the coordinated and you start typing.

165
00:11:40,190 --> 00:11:40,390
No.

166
00:11:40,950 --> 00:11:42,990
Now you need to do it in the second half.

167
00:11:43,620 --> 00:11:45,660
That does it for the product, guys.

168
00:11:45,660 --> 00:11:49,200
I hope you have enjoyed a lot, so keep learning and the thinking.