1
00:00:00,210 --> 00:00:05,850
OK, so now let's move further, so as we would have done this here is a little so we can just write

2
00:00:06,360 --> 00:00:11,700
recipes for their parents or do our work like if we just write recipes here.

3
00:00:12,330 --> 00:00:15,570
It will also do the same thing, but that will do it.

4
00:00:15,600 --> 00:00:19,000
Only the saltwater 2.0 has no problem with that.

5
00:00:19,020 --> 00:00:27,720
So now what we'll do is we'll move forward to the farm bill where everything is being done to.

6
00:00:30,120 --> 00:00:37,530
So we'll wrap this all up from the hiding, whatever it is that will wrap it inside a form because whenever

7
00:00:37,530 --> 00:00:42,930
we like type the key word, so then we'll press enter.

8
00:00:42,930 --> 00:00:44,730
So we should get dessert, right?

9
00:00:45,210 --> 00:00:47,280
So we'll wrap everything inside.

10
00:00:47,280 --> 00:00:51,030
The form for that is what we are going to do.

11
00:00:51,030 --> 00:00:58,830
So and I put the form tag that would be fun of last name would be.

12
00:01:04,750 --> 00:01:05,110
From.

13
00:01:07,060 --> 00:01:13,330
That said, we'll close this below, maybe after this move.

14
00:01:15,220 --> 00:01:16,480
When is this trip going?

15
00:01:19,010 --> 00:01:21,020
Search for so.

16
00:01:23,120 --> 00:01:30,320
This actually, we have given a day, right, so what we can do is just change this into a form that

17
00:01:30,320 --> 00:01:32,600
will be also a good like is.

18
00:01:33,780 --> 00:01:35,010
This is here and.

19
00:01:36,900 --> 00:01:41,610
This is a I'm sorry, but we changed into a form that would be a good choice.

20
00:01:43,230 --> 00:01:49,170
I think I made a mistake like I just put baby in student form.

21
00:01:49,710 --> 00:01:50,730
That's what I did.

22
00:01:50,730 --> 00:01:53,790
I think that was not required at all.

23
00:01:54,070 --> 00:01:56,340
But we just it was a form.

24
00:01:58,020 --> 00:01:58,420
And.

25
00:02:00,190 --> 00:02:06,820
This because I realize episodes from I've already created that this was the only cast which we were

26
00:02:06,820 --> 00:02:09,170
given trying to give to form.

27
00:02:09,310 --> 00:02:13,060
So it's already there, so there's no there's no need to like create on the form.

28
00:02:13,550 --> 00:02:14,980
We're just tentative to form.

29
00:02:15,130 --> 00:02:21,780
All right now, what we want to do is whenever we type on a keyboard and when we press stories on how

30
00:02:21,790 --> 00:02:22,270
to enter.

31
00:02:22,690 --> 00:02:24,880
So I don't want the page to reload, right?

32
00:02:25,290 --> 00:02:29,830
They could react based on that only we don't want pages to reload and reload and reload.

33
00:02:30,190 --> 00:02:37,750
I just want to reload down whenever I hit, and I want the data in like below without reloading the

34
00:02:37,750 --> 00:02:38,140
page.

35
00:02:38,830 --> 00:02:44,320
Or I create a function here below the right recipe in full through the function.

36
00:02:44,860 --> 00:02:46,300
So they're going to be on some Mac.

37
00:02:48,350 --> 00:02:49,840
Bonds made.

38
00:02:50,990 --> 00:02:52,070
So it will take.

39
00:02:53,970 --> 00:02:59,470
The second string, basically, so here it will be a function that will be making an argument that dizzy

40
00:02:59,490 --> 00:03:01,200
or event, you contract the event also.

41
00:03:02,040 --> 00:03:03,810
And what did I do?

42
00:03:05,790 --> 00:03:10,710
So here what we'll do is we'll type e dot prevent.

43
00:03:11,900 --> 00:03:13,160
Oh, my God.

44
00:03:15,460 --> 00:03:16,090
Default.

45
00:03:18,810 --> 00:03:23,580
This is a function for what this will do is event or prevent default.

46
00:03:23,610 --> 00:03:31,710
What will do is it will prevent the side from being like reloading whenever we present or we like some

47
00:03:31,950 --> 00:03:37,350
of the query, but it will prevent the app to reload.

48
00:03:37,620 --> 00:03:38,040
That's it.

49
00:03:38,460 --> 00:03:43,850
And also, when we submit the form I want, the data that will be gepris have been full.

50
00:03:45,360 --> 00:03:46,260
So that's what we want.

51
00:03:46,900 --> 00:03:47,760
And just save it.

52
00:03:49,280 --> 00:03:54,290
When I go back to the U.S., so when I pressed.

53
00:03:56,670 --> 00:03:57,300
OK.

54
00:03:57,390 --> 00:03:59,390
OK, OK, it's it's reloading.

55
00:04:00,170 --> 00:04:05,970
Something's wrong, something is wrong, but when we go back, yeah.

56
00:04:14,590 --> 00:04:20,650
If what everything is, I think everything this thing looks good so far and.

57
00:04:22,260 --> 00:04:26,940
But I think we have not called this function right on click on something.

58
00:04:27,180 --> 00:04:28,680
We are not inside this form.

59
00:04:28,690 --> 00:04:33,870
We should include this function then released to world without calling any function cannot work in this

60
00:04:33,870 --> 00:04:34,110
war.

61
00:04:34,640 --> 00:04:37,080
So how dumb thing was that?

62
00:04:37,350 --> 00:04:37,890
All right.

63
00:04:38,400 --> 00:04:44,100
So inside this weird name like that, the name of the function that is on summit again.

64
00:04:45,490 --> 00:04:46,340
On Summit.

65
00:04:46,360 --> 00:04:52,030
Of course not this on summit, and then we'll save it.

66
00:04:53,240 --> 00:04:54,910
Now we go back here.

67
00:04:56,180 --> 00:05:04,130
But as you can see, things are coming from the API, but the page is not the learning that is the best

68
00:05:04,130 --> 00:05:04,520
part.

69
00:05:04,970 --> 00:05:09,620
And that magic happened to you due to the event or prevent default.

70
00:05:10,340 --> 00:05:12,950
So this line here is really, really important.

71
00:05:12,980 --> 00:05:16,370
You can also put a comment here that this.

72
00:05:17,550 --> 00:05:17,970
Will.

73
00:05:19,430 --> 00:05:22,820
When Apple forbids.

74
00:05:24,390 --> 00:05:27,060
From reloading.

75
00:05:28,190 --> 00:05:29,870
This is a really, really important concept.

76
00:05:30,590 --> 00:05:32,870
You can just learn it.

77
00:05:33,290 --> 00:05:36,680
OK, so next what we'll do is now we'll go to the.

78
00:05:37,750 --> 00:05:43,960
And now we want to give the customer like, you know, we want Typekit and we want the data.

79
00:05:44,230 --> 00:05:52,510
So what we do is we create on the street wearable that will be storing where it is.

80
00:05:53,410 --> 00:05:59,440
So it will be query and a function will be.

81
00:06:00,460 --> 00:06:05,170
So gritty, I'm following that game, I'm following the camel guessing you.

82
00:06:06,340 --> 00:06:13,120
So that is the first thing, things a small and then you need loot capital, so greedy and said gritty,

83
00:06:13,120 --> 00:06:14,920
and it was.

84
00:06:15,840 --> 00:06:25,190
State and the initial value would be empty, so now we'll save it, and now the it's showing that said,

85
00:06:25,200 --> 00:06:26,940
good integrity is not used anywhere.

86
00:06:27,780 --> 00:06:33,440
So what we'll do is we'll go to this form.

87
00:06:33,990 --> 00:06:36,330
So inside the phone, we have the input tag.

88
00:06:36,750 --> 00:06:37,590
So how do we?

89
00:06:39,780 --> 00:06:46,500
We'll throw a function which is on change, so whenever any moment is going on, like whenever we are

90
00:06:46,500 --> 00:06:54,300
typing something here or there should be something like one change why this is happening.

91
00:06:56,310 --> 00:06:56,820
All right.

92
00:06:56,820 --> 00:07:03,570
So here what we'll do is we'll write an in line function, vital function to the Zaffar title.

93
00:07:03,990 --> 00:07:07,950
So here what will be the case is that we want to send the query.

94
00:07:10,250 --> 00:07:13,970
Like, whenever we type something so that should be stored in equity wearable.

95
00:07:14,420 --> 00:07:17,360
So an event or dot dot.

96
00:07:19,640 --> 00:07:22,140
And also, we will give this input of a.

97
00:07:23,530 --> 00:07:24,040
So.

98
00:07:25,340 --> 00:07:26,900
That will be equal to.

99
00:07:28,120 --> 00:07:28,510
Ready.

100
00:07:31,960 --> 00:07:41,020
Ready for this, is it, and now we will go to our API endpoint and we will change this hardcoded chicken

101
00:07:41,020 --> 00:07:44,680
into the ready, so instead of this, it can.

102
00:07:45,750 --> 00:07:47,880
What I do is I'll add this.

103
00:07:50,160 --> 00:07:54,240
Now, script to go ahead, it will be witty.

104
00:07:55,200 --> 00:07:56,340
I hope this is good.

105
00:07:57,520 --> 00:07:58,860
And you're right, yeah.

106
00:08:02,630 --> 00:08:11,660
That's right, and now on clicking the button like we should gather data so wedded on something like,

107
00:08:12,380 --> 00:08:19,220
oh, maybe I go back here and up or something, something, maybe I type.

108
00:08:21,140 --> 00:08:25,250
Angle, some things are not changing, but when I get the recipe.

109
00:08:26,030 --> 00:08:32,900
So you see something has come from the end point and let me just check if it contains something related

110
00:08:32,900 --> 00:08:33,770
to mangle or not.

111
00:08:34,800 --> 00:08:35,070
Yeah.

112
00:08:35,310 --> 00:08:41,720
Mango, frozen yogurt, so that means our end point is working fine because when I Typekit here mango,

113
00:08:41,730 --> 00:08:49,250
so the data which we are receiving back is related to mango only you can see a mango and passion fruit

114
00:08:49,260 --> 00:08:51,570
eyes, mango, frozen yogurt.

115
00:08:52,470 --> 00:08:54,780
And then we have the.

116
00:08:56,720 --> 00:08:58,980
Which which Mango is.

117
00:08:59,000 --> 00:09:01,760
OK, so now our end point is working fine, I guess.

118
00:09:03,250 --> 00:09:08,190
Now we want to move further now, let's do something about this problem.

119
00:09:08,340 --> 00:09:09,780
So let us just finish this.

120
00:09:10,230 --> 00:09:14,130
First of all, let me just dialogue, but will style it.

121
00:09:14,380 --> 00:09:16,290
Let me go back to the.

122
00:09:18,340 --> 00:09:20,410
Corridor and let me go to the CSIS.

123
00:09:21,710 --> 00:09:24,350
But what is the last name for that?

124
00:09:25,520 --> 00:09:28,180
OK, that is a health label.

125
00:09:29,260 --> 00:09:33,830
So we'll go ahead and file the App Health label now.

126
00:09:39,180 --> 00:09:40,770
We keep our excuses here.

127
00:09:41,710 --> 00:09:46,030
So the class name is at health labels will have.

128
00:09:47,590 --> 00:09:49,860
The school and the school and.

129
00:09:51,130 --> 00:09:54,580
Labels that we just checked label or labels.

130
00:09:55,970 --> 00:10:02,740
Upheld labels, OK, OK, you can just copy and paste that is more productive, I think, because we

131
00:10:02,740 --> 00:10:08,200
usually do spelling mistakes like we are humans, so that is the most common thing.

132
00:10:11,410 --> 00:10:16,310
Compelling, I think I will give the same only maybe seven and eight.

133
00:10:17,430 --> 00:10:22,740
For seven years, for top and bottom and on each pixel is for.

134
00:10:23,980 --> 00:10:29,620
Left and right next will give modern left because it was.

135
00:10:30,910 --> 00:10:35,530
Going a little closer, so it will be six pixels will be the margin.

136
00:10:36,010 --> 00:10:37,960
Max will give the border radius.

137
00:10:40,760 --> 00:10:44,530
Moderate as of four, maybe five pixels.

138
00:10:44,720 --> 00:10:45,650
Let me just save it.

139
00:10:46,430 --> 00:10:50,180
Let me just go back to the browser and see.

140
00:10:51,470 --> 00:10:56,060
I think I need to give a little more moderate use.

141
00:10:57,040 --> 00:10:59,010
But it's not over.

142
00:10:59,030 --> 00:11:02,150
Maybe I can give it how much I've given her.

143
00:11:02,780 --> 00:11:04,010
It's been back since.

144
00:11:04,370 --> 00:11:05,560
Oh, OK.

145
00:11:05,600 --> 00:11:10,280
Maybe I can just give the been in check outlooks from 15.

146
00:11:12,190 --> 00:11:13,240
It doesn't look sober.

147
00:11:13,610 --> 00:11:15,290
It looks quite small to me.

148
00:11:16,170 --> 00:11:19,290
So what can we do about it?

149
00:11:19,800 --> 00:11:22,230
Maybe I can increase its size.

150
00:11:23,320 --> 00:11:24,280
ABC's.

151
00:11:25,570 --> 00:11:28,540
Let me just I will make it first of all, 10 and I.

152
00:11:29,850 --> 00:11:31,320
The for incitement.

153
00:11:32,270 --> 00:11:34,920
It's copied this line from here yesterday.

154
00:11:35,690 --> 00:11:39,050
One says maybe we can give it to the plane would be good.

155
00:11:40,220 --> 00:11:40,730
I don't know.

156
00:11:41,400 --> 00:11:43,700
He's just checking this looks quite.

157
00:11:44,880 --> 00:11:50,280
Quite similar, actually, but not so quite some of those who like to be like Putin.

158
00:11:51,450 --> 00:11:56,730
So when I go back, yeah, looks like pretty well, looks pretty seem.

159
00:11:57,940 --> 00:12:05,050
OK, so now you are used basically like done all, we want to add functionality to this also.

160
00:12:05,410 --> 00:12:06,370
So let's go back.

161
00:12:07,270 --> 00:12:14,780
And here what we'll do is let me just close this first point, so I'll have to create another state

162
00:12:14,920 --> 00:12:16,090
you state available for it.

163
00:12:16,180 --> 00:12:17,350
So that will be.

164
00:12:18,850 --> 00:12:22,810
And what will be its label.

165
00:12:22,850 --> 00:12:25,000
So that will be health label.

166
00:12:27,750 --> 00:12:29,870
And the function will be set.

167
00:12:33,560 --> 00:12:34,150
Label.

168
00:12:35,120 --> 00:12:35,540
All right.

169
00:12:36,360 --> 00:12:39,570
And its initial value.

170
00:12:42,520 --> 00:12:43,440
Would be.

171
00:12:44,580 --> 00:12:47,580
Maybe we can we can just of vegetarian.

172
00:12:48,990 --> 00:12:50,360
Vegetarian.

173
00:12:50,490 --> 00:12:50,790
Yeah.

174
00:12:51,870 --> 00:12:55,410
This will be the initial, you know, let me just jump in to the point.

175
00:12:56,210 --> 00:12:58,650
And it's alcohol free right now.

176
00:12:59,680 --> 00:13:02,970
So maybe we can just add alcohol free.

177
00:13:04,700 --> 00:13:05,480
All vegetarian.

178
00:13:06,520 --> 00:13:17,760
Saying So how do we do the same thing which we did for the Sun and this will add health labor?

179
00:13:17,800 --> 00:13:18,340
Okay.

180
00:13:19,290 --> 00:13:22,300
And it is so smart we can all agree to save it.

181
00:13:23,380 --> 00:13:28,720
And now we want to add like different, different labels in the drop down.

182
00:13:28,720 --> 00:13:33,790
Right now, there are no dropdown like voices in the dropdown so that we do in the next video.