1
00:00:00,210 --> 00:00:08,190
Now, let's come down and tie up all these functions to all the respective components and elements,

2
00:00:08,190 --> 00:00:08,700
basically.

3
00:00:09,720 --> 00:00:12,480
So for example, this day of filming on so.

4
00:00:16,140 --> 00:00:22,080
For this form, we will have the one submit and there will be someone OK.

5
00:00:22,320 --> 00:00:28,890
Also so for this form, we will be having our value that you didn't know when you did.

6
00:00:29,070 --> 00:00:37,290
So that will be creating inside the settings and no validate and heard it would be on summit.

7
00:00:40,450 --> 00:00:47,800
One summit and inside is that will be the function which we just created as the one summit function.

8
00:00:48,800 --> 00:00:51,850
Inside the summit, that will be the annual summit.

9
00:00:55,920 --> 00:00:58,020
No man and a.

10
00:00:59,490 --> 00:01:00,000
Submit.

11
00:01:01,280 --> 00:01:01,750
OK.

12
00:01:02,570 --> 00:01:03,590
I guess that is enough.

13
00:01:03,800 --> 00:01:04,040
Yeah.

14
00:01:05,060 --> 00:01:15,110
And the summit is not coming to this day in Port Rapper, very good, but inside the input elements,

15
00:01:15,770 --> 00:01:22,520
that would be all a bunch of things that we need to change actually and not change the inside the input

16
00:01:22,520 --> 00:01:27,540
that would be this class name as input type, as number and name as work.

17
00:01:27,920 --> 00:01:28,970
OK, so far, so good.

18
00:01:28,970 --> 00:01:33,650
But now we would add two more things to this.

19
00:01:34,610 --> 00:01:43,700
So that will be the one change like on the change, and that will be a function that will be the change.

20
00:01:47,170 --> 00:01:49,630
Basically, I can drive this.

21
00:01:51,450 --> 00:01:54,210
And all of the three components, right?

22
00:01:55,150 --> 00:02:01,540
So let me try to do it, so I will press old.

23
00:02:03,300 --> 00:02:08,590
And you can see I can write something tirelessly in all of the three components elements.

24
00:02:09,000 --> 00:02:09,120
Three.

25
00:02:10,080 --> 00:02:11,360
I'll write on change.

26
00:02:13,810 --> 00:02:23,410
On change, and this is equal to and the curly braces and then change and then change symbol.

27
00:02:24,190 --> 00:02:33,550
This I have done using the button I to key on the keyboard, but just press your key and like move your

28
00:02:33,550 --> 00:02:38,630
cursor and select the area where you want to write like this.

29
00:02:38,660 --> 00:02:43,630
OK, so on tune and bluejeans on June and June, in June and simple.

30
00:02:44,530 --> 00:02:47,590
Now we will give the value to each and every input.

31
00:02:48,730 --> 00:02:50,410
Which it should be explored.

32
00:02:50,950 --> 00:02:53,500
OK, so here there will be a value.

33
00:02:55,490 --> 00:02:56,060
Then new.

34
00:02:57,030 --> 00:02:57,900
Equal to.

35
00:02:59,870 --> 00:03:01,080
New time, what?

36
00:03:02,320 --> 00:03:05,100
So what are?

37
00:03:06,330 --> 00:03:06,690
But.

38
00:03:08,430 --> 00:03:10,380
Values equal to new time might not work.

39
00:03:10,650 --> 00:03:12,000
Same here, also.

40
00:03:13,250 --> 00:03:15,290
Value is equal to.

41
00:03:17,150 --> 00:03:18,410
New time, one thought.

42
00:03:19,700 --> 00:03:20,150
Talk.

43
00:03:22,300 --> 00:03:27,420
Next, inside of this bed would be value is equal to.

44
00:03:28,440 --> 00:03:31,330
Neil Diamond thought long.

45
00:03:32,580 --> 00:03:32,730
And.

46
00:03:34,270 --> 00:03:34,840
Simple.

47
00:03:35,680 --> 00:03:40,390
And this button is that Typekit Summerton said thank.

48
00:03:41,690 --> 00:03:47,420
I think said the rock component is 100 percent completed, I guess.

49
00:03:47,870 --> 00:03:54,410
We have also done this styling part and we have given everything like the functionality was in the script

50
00:03:54,410 --> 00:03:55,240
and the hopes and all.

51
00:03:55,970 --> 00:03:58,670
So next we will move on to.

52
00:04:00,320 --> 00:04:05,810
Focus on next, we'll look at the countdown animation component for that.

53
00:04:05,930 --> 00:04:13,070
Let us go to the Components folder, and here we will create the countdown animation component inside

54
00:04:13,070 --> 00:04:15,320
this countdown animation.

55
00:04:16,040 --> 00:04:18,440
So let us do that.

56
00:04:21,820 --> 00:04:27,460
And an animation component will create a file here inside the components that will be.

57
00:04:29,310 --> 00:04:29,910
Count.

58
00:04:31,560 --> 00:04:32,130
Down.

59
00:04:34,100 --> 00:04:35,540
Animation is.

60
00:04:37,750 --> 00:04:38,080
OK.

61
00:04:39,290 --> 00:04:46,600
So now what we'll do is we'll import that boilerplate code using our extension, so controls it could

62
00:04:46,610 --> 00:04:48,380
be a snippet.

63
00:04:48,380 --> 00:04:49,850
So are the FCC.

64
00:04:50,970 --> 00:04:51,380
And put.

65
00:04:52,520 --> 00:05:01,070
Now we will import some things now after this, after the election board will import, the very first

66
00:05:01,070 --> 00:05:02,360
thing is the use context.

67
00:05:04,410 --> 00:05:07,190
Use context and from React.

68
00:05:09,470 --> 00:05:11,330
From the end.

69
00:05:12,850 --> 00:05:20,610
And next, we will be importing something from the package we installed that a year ago, remember the

70
00:05:20,610 --> 00:05:28,290
discount the entire time, what package we installed from the npm that is going to play a main role

71
00:05:28,300 --> 00:05:28,750
here.

72
00:05:29,740 --> 00:05:31,270
So that is the whole picture.

73
00:05:32,590 --> 00:05:37,180
Because that is responsible for the countdown and all that, let us do that.

74
00:05:38,850 --> 00:05:42,480
So let us first imported still will import that like import.

75
00:05:45,150 --> 00:05:46,410
Gone down.

76
00:05:51,810 --> 00:05:56,470
And vertical alignment.

77
00:05:58,290 --> 00:06:04,960
Something like this sound filling is not going to act, you know, it's perfect.

78
00:06:05,510 --> 00:06:07,080
Some downside of all time.

79
00:06:08,270 --> 00:06:08,780
But on.

80
00:06:14,290 --> 00:06:15,490
Phone down.

81
00:06:19,850 --> 00:06:20,180
Yeah.

82
00:06:20,390 --> 00:06:20,840
This one.

83
00:06:21,710 --> 00:06:22,800
Import gone down.

84
00:06:23,050 --> 00:06:28,580
Countdown Circle timer from the countdown timer that said.

85
00:06:29,720 --> 00:06:36,980
Now what we'll do is we'll pass some props inside this so that we make use of those props inside the

86
00:06:37,220 --> 00:06:37,820
gorgeous.

87
00:06:38,460 --> 00:06:45,040
So let me pass some props inside the function or inside this object that will be key, that will be

88
00:06:45,050 --> 00:06:47,930
timer, that will be animated.

89
00:06:48,860 --> 00:06:50,540
That would be the children.

90
00:06:51,970 --> 00:06:56,560
And I think that's a key time in return, children, I think that's it, OK?

91
00:06:57,300 --> 00:07:04,180
Next after this, there will be the concert and inside this, there will be these top.

92
00:07:05,820 --> 00:07:06,660
And many.

93
00:07:09,050 --> 00:07:09,650
And.

94
00:07:11,180 --> 00:07:20,720
This we will be making use from the use context, but from these settings concert text, which we are

95
00:07:20,720 --> 00:07:27,770
going to build after this, so use context and service, we will party things.

96
00:07:30,900 --> 00:07:37,260
For context, let me import it also, although we have not yet created it, but will imported the import.

97
00:07:41,250 --> 00:07:42,990
So things context.

98
00:07:44,620 --> 00:07:45,100
From.

99
00:07:46,100 --> 00:07:47,850
I will create a folder here.

100
00:07:49,100 --> 00:07:54,290
And naming as context, and after that, we'll be creating this phone, so integrating settings.

101
00:07:55,860 --> 00:07:56,460
Context.

102
00:07:57,480 --> 00:07:59,700
So we'll do it in a minute.

103
00:07:59,880 --> 00:08:00,220
OK.

104
00:08:01,090 --> 00:08:03,180
But after this, inside did a ton.

105
00:08:04,620 --> 00:08:05,670
Will remove the active.

106
00:08:07,250 --> 00:08:11,840
And we'll usually component this countdown timer component also.

107
00:08:12,470 --> 00:08:13,760
So let me just Scorpius.

108
00:08:16,890 --> 00:08:18,810
And inside the Senate on.

109
00:08:20,610 --> 00:08:21,330
After this.

110
00:08:23,310 --> 00:08:24,960
So this is it.

111
00:08:27,380 --> 00:08:29,090
We will close this.

112
00:08:31,150 --> 00:08:37,000
And it'll give us the closing back, but inside the opening deck, we will have a lot of things.

113
00:08:37,450 --> 00:08:39,070
The very first thing is the key.

114
00:08:41,360 --> 00:08:43,130
He is equal to key.

115
00:08:44,120 --> 00:08:50,690
Next, we will be having is playing function now is playing.

116
00:08:51,440 --> 00:08:54,440
Is it true or false?

117
00:08:55,670 --> 00:08:56,970
So that is the animate.

118
00:08:59,020 --> 00:08:59,570
Animate.

119
00:09:00,280 --> 00:09:02,570
Next, we will be having the duration.

120
00:09:02,590 --> 00:09:07,630
Like how much time it should be like animated, so duration is equal to.

121
00:09:09,570 --> 00:09:11,830
Timer in 60.

122
00:09:16,260 --> 00:09:18,300
Into the next, we'll be having the colors.

123
00:09:19,870 --> 00:09:25,020
Colors and the colors there shouldn't be like this.

124
00:09:26,220 --> 00:09:27,690
That is an ad, basically.

125
00:09:28,620 --> 00:09:32,760
And let me just see what what are the colors?

126
00:09:33,570 --> 00:09:36,650
So basically it's the theme and.

127
00:09:38,560 --> 00:09:41,550
Inside of the main are aid, there are subsidies.

128
00:09:42,100 --> 00:09:49,930
So the first one is as it as this is one that will be if these six.

129
00:09:51,720 --> 00:09:52,650
And six or eight?

130
00:09:54,720 --> 00:09:58,890
And then you can give a comma and then you can drive point three three.

131
00:10:01,020 --> 00:10:06,300
OK, I will copy it three times because this is the only same thing.

132
00:10:08,130 --> 00:10:09,450
Who will give a comma here?

133
00:10:11,040 --> 00:10:18,390
Will paste, will give a comma and will paste, and we will be one of those comma just to make sure

134
00:10:18,390 --> 00:10:20,970
that is all right.

135
00:10:23,030 --> 00:10:28,040
OK, now we will like close this.

136
00:10:28,440 --> 00:10:32,990
It's automatically close, and after that we will be giving this talk with.

137
00:10:37,270 --> 00:10:38,760
OK, so what is this project?

138
00:10:39,040 --> 00:10:43,390
I will explain you after this when we'll be reading the documentation.

139
00:10:45,020 --> 00:10:45,890
We will ride the.

140
00:10:48,380 --> 00:10:48,890
Look.

141
00:10:51,120 --> 00:10:51,390
With.

142
00:10:53,350 --> 00:10:56,190
And that will be equal to six.

143
00:10:58,380 --> 00:10:59,940
After that, we'll be having the size.

144
00:11:02,360 --> 00:11:05,680
And the size and equal to 220.

145
00:11:07,620 --> 00:11:09,660
Next will be having deep brain color.

146
00:11:11,260 --> 00:11:11,410
Get.

147
00:11:19,070 --> 00:11:22,610
Which is also equal to this exclude.

148
00:11:24,400 --> 00:11:27,490
Which is one five one.

149
00:11:29,290 --> 00:11:31,150
And I'm thrilled to.

150
00:11:32,730 --> 00:11:33,180
Three took.

151
00:11:34,440 --> 00:11:36,390
On one night, two.

152
00:11:38,160 --> 00:11:45,150
Now on complete, he will have a function like which will be calling on complete on.

153
00:11:46,310 --> 00:11:47,060
Complete.

154
00:11:48,480 --> 00:11:51,810
We have a function which will accept a function.

155
00:11:54,770 --> 00:11:59,780
So that will be dysfunction, which will expect to function now inside of this.

156
00:11:59,810 --> 00:12:01,070
There will be stop any mood.

157
00:12:05,230 --> 00:12:06,040
Yeah, this one.

158
00:12:08,900 --> 00:12:09,200
Yeah.

159
00:12:09,260 --> 00:12:16,100
This one, this top element would be there inside of this and between this, that would be the chiller,

160
00:12:16,940 --> 00:12:19,660
whatever is there that will come here.

161
00:12:19,670 --> 00:12:23,210
So that will be the bill in the lower case.

162
00:12:25,010 --> 00:12:26,860
And then we see it.

163
00:12:28,350 --> 00:12:34,830
So that looks something like this right now will not fit into this, so things are going, OK, there's

164
00:12:34,830 --> 00:12:35,430
a typo.

165
00:12:36,910 --> 00:12:38,110
So things.

166
00:12:40,120 --> 00:12:48,970
You said this was it, now we will go to the documentation and see what we have actually done, so that

167
00:12:48,970 --> 00:12:50,590
will be doing in the next video.