1
00:00:00,450 --> 00:00:06,690
OK, so now let's go ahead and give some functionality to the little button inside Pomodoro.

2
00:00:06,870 --> 00:00:08,280
Let me see if this CCIs.

3
00:00:09,610 --> 00:00:18,460
And I've come here and now I will be adding some functionality here after the Pomodoro thing will go

4
00:00:18,460 --> 00:00:19,600
on up to the site Pomodoro.

5
00:00:20,380 --> 00:00:21,130
So here.

6
00:00:23,890 --> 00:00:27,160
For the very first thing is that we will import some things.

7
00:00:27,880 --> 00:00:32,470
So what will be important is the U.S. trade talks.

8
00:00:32,680 --> 00:00:36,240
The very first thing is we'll be importing the used to talk in the US context.

9
00:00:37,030 --> 00:00:39,670
And after that, we will be moving further.

10
00:00:40,270 --> 00:00:42,290
So let me do that here.

11
00:00:42,310 --> 00:00:48,160
You can import into one line, you can write three export U.S. trade while defining that is also perfect,

12
00:00:48,160 --> 00:00:54,880
but just define what want like import ones and then forget that is the best thing.

13
00:00:55,600 --> 00:01:01,000
I tried again and again use context and use.

14
00:01:02,570 --> 00:01:02,810
It.

15
00:01:03,840 --> 00:01:04,230
OK.

16
00:01:04,260 --> 00:01:05,460
The important part is done.

17
00:01:08,050 --> 00:01:08,950
Now what will do?

18
00:01:10,120 --> 00:01:17,320
It will create a hook right after the function, will create a hook that will be Konst and.

19
00:01:18,360 --> 00:01:20,580
Let me explain in the structure of the straight talk.

20
00:01:21,650 --> 00:01:23,240
To hear that is available.

21
00:01:25,290 --> 00:01:29,580
Well, for example, I'm creating a new standard variable here and here that is a function which is

22
00:01:29,580 --> 00:01:35,720
responsible to change that variable and it will be set new timer.

23
00:01:38,130 --> 00:01:40,020
And this will be equal to use state.

24
00:01:41,400 --> 00:01:43,890
You step inside of this.

25
00:01:45,100 --> 00:01:49,630
I will be having some initial values to this particular object.

26
00:01:49,900 --> 00:01:58,420
Now how will we know this is an object like whatever we provide inside this, you state this year while

27
00:01:58,420 --> 00:02:02,500
initializing, if I provide her to a fault that will be a boolean.

28
00:02:02,740 --> 00:02:07,120
If I provide her quotations, then it will be a string.

29
00:02:07,330 --> 00:02:11,500
If I provide here square brackets that then it would be an error.

30
00:02:11,680 --> 00:02:14,320
If I provide her calibrations, then it would be an object.

31
00:02:14,630 --> 00:02:20,830
So you don't need to, like, define it separately like anywhere else.

32
00:02:21,070 --> 00:02:27,370
You can just provide that particular symbol that corresponds to that particular data type.

33
00:02:27,820 --> 00:02:30,250
Then it would be defined automatically.

34
00:02:30,250 --> 00:02:32,340
You don't need to work extra work to define that.

35
00:02:32,890 --> 00:02:33,280
OK.

36
00:02:34,220 --> 00:02:37,310
So now I've done a Columbus's here, that means this is an object.

37
00:02:38,330 --> 00:02:44,390
But OK, so now let me give some initial value and initial thing to this object.

38
00:02:45,350 --> 00:02:47,450
So the first one would be work.

39
00:02:48,600 --> 00:02:50,620
And our broadcast.

40
00:02:50,880 --> 00:02:53,640
It will be just fun and.

41
00:02:54,900 --> 00:02:56,930
We will give our value of point to.

42
00:02:58,990 --> 00:03:00,550
In the beginning.

43
00:03:02,740 --> 00:03:06,910
That then will have the shark is a short break.

44
00:03:08,470 --> 00:03:10,690
But it will be point one.

45
00:03:12,260 --> 00:03:13,760
And then it will be a long.

46
00:03:16,160 --> 00:03:20,060
Order will be four and five next field be active.

47
00:03:20,420 --> 00:03:25,380
Now what is active like when we go to the page and we see.

48
00:03:25,400 --> 00:03:28,610
So what would be the active tab open by default?

49
00:03:28,610 --> 00:03:29,840
That will be work?

50
00:03:31,270 --> 00:03:32,820
And if the string.

51
00:03:33,420 --> 00:03:42,150
Oh, I forgot to put on my hat, I put a semicolon or semicolon instead of comma, so that should not

52
00:03:42,150 --> 00:03:45,150
be done, otherwise it throw an error.

53
00:03:46,180 --> 00:03:46,600
OK.

54
00:03:46,630 --> 00:03:48,610
I think we are done with this now.

55
00:03:49,990 --> 00:03:52,570
We will create another constant.

56
00:03:54,280 --> 00:04:00,550
Then we will be getting it from another like we'll be creating global context and with the help of the

57
00:04:00,560 --> 00:04:03,610
global context, will be creating this further.

58
00:04:04,440 --> 00:04:09,120
So what will be the global context, it will be settings context to look or less, are things going

59
00:04:09,120 --> 00:04:11,580
to context which will be creating in a minute?

60
00:04:12,300 --> 00:04:22,350
But that isn't just to do some things better than the concert and update.

61
00:04:25,090 --> 00:04:26,590
And execute.

62
00:04:28,430 --> 00:04:39,080
And this is a call to use in text and inside of this, that it would be things.

63
00:04:41,570 --> 00:04:42,250
Context.

64
00:04:44,910 --> 00:04:49,010
So now, after the certain context will create a constant.

65
00:04:50,070 --> 00:04:56,280
Now this context will be responsible for handling the changes in the input as simple as that.

66
00:04:56,760 --> 00:04:59,700
Like whenever the user typed anything inside the input field.

67
00:04:59,700 --> 00:05:06,150
So this handle chain will be responsible for that content handle change.

68
00:05:08,300 --> 00:05:11,980
And don't change that would being put in put.

69
00:05:14,120 --> 00:05:17,660
And insert of this, that it would be what we want to create.

70
00:05:19,070 --> 00:05:20,300
Now that would be concert.

71
00:05:21,670 --> 00:05:22,510
And and.

72
00:05:24,870 --> 00:05:27,900
Name and defend.

73
00:05:30,580 --> 00:05:36,960
This is a completely random thing, and we will give input out target number.

74
00:05:38,080 --> 00:05:39,640
Now there will be a huge statement.

75
00:05:43,270 --> 00:05:43,750
Oops!

76
00:05:45,530 --> 00:05:46,280
After that.

77
00:05:48,180 --> 00:05:49,410
Be having a suit, certainly.

78
00:05:53,000 --> 00:05:56,660
Now, what is this sweet statement doing here?

79
00:05:57,970 --> 00:06:06,370
This will be specifying the action of the buttons, like when it's work, what should be the functionality,

80
00:06:06,370 --> 00:06:10,870
what should be the variable that is restarting, when it is break.

81
00:06:12,190 --> 00:06:14,740
Language break long breaks from short break.

82
00:06:15,070 --> 00:06:17,050
According to the Act, this will be functioning.

83
00:06:20,000 --> 00:06:23,630
So inside this switch will have the new.

84
00:06:25,570 --> 00:06:28,090
Name is the thing that will be like bidding.

85
00:06:29,120 --> 00:06:30,740
So curly braces.

86
00:06:31,750 --> 00:06:35,290
And inside of here, we will hear the case.

87
00:06:37,420 --> 00:06:41,260
Now in like, remember like just imagine the work.

88
00:06:42,900 --> 00:06:45,180
So for that, what we need to do.

89
00:06:45,840 --> 00:06:46,920
Oh, man.

90
00:06:50,150 --> 00:06:54,530
Yeah, now for one, what we need to do is we need to set the new timer.

91
00:06:55,670 --> 00:06:56,150
So.

92
00:06:57,100 --> 00:06:57,580
New.

93
00:06:59,180 --> 00:06:59,390
What?

94
00:07:00,860 --> 00:07:01,270
And.

95
00:07:03,750 --> 00:07:06,530
The start of this will use the word open to.

96
00:07:08,560 --> 00:07:11,580
That will be the new timer.

97
00:07:13,770 --> 00:07:14,760
Oh, man.

98
00:07:16,430 --> 00:07:17,630
And now.

99
00:07:18,920 --> 00:07:26,690
So inside this sad new time world, there are so many of the elements inside this object who will be

100
00:07:26,720 --> 00:07:33,320
handling only this work one when it works, then we have this talk, then we have the long, then we

101
00:07:33,320 --> 00:07:35,960
have the activism before that, that is for sure.

102
00:07:37,170 --> 00:07:37,450
So.

103
00:07:39,300 --> 00:07:41,520
Now we will tie further.

104
00:07:42,420 --> 00:07:44,580
Who will be doing this work?

105
00:07:47,920 --> 00:07:50,290
Bars and.

106
00:07:51,900 --> 00:07:53,630
And we'll give you.

107
00:07:55,810 --> 00:07:59,620
Well, next, we'll be creating another case, this was for the workers.

108
00:08:00,070 --> 00:08:03,610
Now after that, we'll be giving the brakes treatment.

109
00:08:03,790 --> 00:08:04,480
No break.

110
00:08:06,770 --> 00:08:12,380
And after the break, I will be giving another guest, so this article is.

111
00:08:13,870 --> 00:08:14,440
Sort.

112
00:08:17,130 --> 00:08:17,450
But it.

113
00:08:21,970 --> 00:08:24,010
That new.

114
00:08:26,100 --> 00:08:26,760
I would.

115
00:08:29,530 --> 00:08:34,600
And then again, we'll use the spirit operator that will be new.

116
00:08:37,040 --> 00:08:37,340
I'm.

117
00:08:39,240 --> 00:08:44,190
And then we'll give this for this short one for Shark.

118
00:08:47,080 --> 00:08:47,560
Short.

119
00:08:53,610 --> 00:08:54,810
And that will be of value.

120
00:08:57,270 --> 00:08:57,610
OK.

121
00:08:58,440 --> 00:09:01,710
So again, we will give a break after this.

122
00:09:05,740 --> 00:09:07,840
Is it the long break?

123
00:09:11,020 --> 00:09:21,370
And this will be applicable for that, Neil Diamond, and this will be applicable for.

124
00:09:23,980 --> 00:09:28,090
Neil, I am old and long.

125
00:09:29,840 --> 00:09:30,650
It's really long.

126
00:09:32,310 --> 00:09:32,910
Fast.

127
00:09:34,590 --> 00:09:34,950
And.

128
00:09:36,970 --> 00:09:39,190
And we'll pause of value inside.

129
00:09:41,320 --> 00:09:42,940
After that break.

130
00:09:45,050 --> 00:09:47,120
Norman Riggs treatment and we served.

131
00:09:48,510 --> 00:09:55,110
So, Bill, now we have given the functionality to like which tab we are switching.

132
00:09:55,410 --> 00:10:00,660
And according to which switch the tab, the function will be executed now.

133
00:10:02,190 --> 00:10:03,860
Will provide a handle some.

134
00:10:05,440 --> 00:10:12,670
Like when we pressed the button and that time about down to what it will be doing before that will be

135
00:10:12,670 --> 00:10:13,710
providing some.

136
00:10:14,860 --> 00:10:15,580
Things now.

137
00:10:17,250 --> 00:10:18,170
Let's do it.

138
00:10:20,260 --> 00:10:27,070
After the break and after this, all all is done will create another function that will be concert.

139
00:10:30,000 --> 00:10:30,780
And I'll.

140
00:10:32,970 --> 00:10:33,310
Some.

141
00:10:37,170 --> 00:10:42,090
And that will be we will be creating a federal function now for this.

142
00:10:42,990 --> 00:10:43,440
So.

143
00:10:44,570 --> 00:10:49,400
That would be part of the function and.

144
00:10:51,870 --> 00:10:55,080
Basic function now here we will write.

145
00:10:56,300 --> 00:11:03,500
A court now, basically what is the general natural behavior of a form, if you know an enrichment?

146
00:11:03,500 --> 00:11:07,580
Also what it does is that when and where do we submit a form?

147
00:11:07,590 --> 00:11:11,330
So it's the natural tendency is to rephrase the entire page.

148
00:11:12,250 --> 00:11:15,500
That said, there's the basic functionality of any form.

149
00:11:16,650 --> 00:11:22,230
Like, whenever we are, like, for example, we provide it in the settings that we rent and we give

150
00:11:22,230 --> 00:11:28,380
the timer and we set the time, so it will refresh the page, but that's not what we want.

151
00:11:28,830 --> 00:11:30,210
We don't want the page to refresh.

152
00:11:30,250 --> 00:11:37,220
So for that, we will make use of this very nice and useful double scoop property.

153
00:11:37,620 --> 00:11:41,550
We will pass EA or event here and here.

154
00:11:43,840 --> 00:11:48,010
After this, we will type e dot.

155
00:11:50,630 --> 00:11:51,170
They weren't.

156
00:11:52,770 --> 00:11:53,480
D Ford.

157
00:11:55,990 --> 00:11:56,410
That's it.

158
00:11:58,390 --> 00:11:59,800
And after this, we'll.

159
00:12:00,760 --> 00:12:02,290
Update execute.

160
00:12:07,000 --> 00:12:09,010
And will pass new family inside this.

161
00:12:13,120 --> 00:12:13,810
That is it.

162
00:12:14,480 --> 00:12:16,660
So this will prevent it from like.

163
00:12:19,800 --> 00:12:20,940
Surrendered from the.

164
00:12:22,090 --> 00:12:27,190
Reloading and then it will be done now we'll make use of all of the songs in the service, so we'll

165
00:12:27,190 --> 00:12:28,240
do that in the next video.