1
00:00:00,060 --> 00:00:04,320
OK, so now we'll be creating such form or this search component.

2
00:00:04,770 --> 00:00:08,790
And this would be responsible for basically searching.

3
00:00:08,880 --> 00:00:09,180
OK.

4
00:00:09,640 --> 00:00:15,090
Let us first create the UAE, then we'll trade dark logic at the above.

5
00:00:15,450 --> 00:00:19,170
OK, so inside the written, I'll have a section.

6
00:00:19,170 --> 00:00:23,310
First of all, we will remove this device and we'll have a section.

7
00:00:25,930 --> 00:00:26,710
Election.

8
00:00:35,170 --> 00:00:43,270
OK, so why it's not providing the clothing back, OK, it does so inside the section will be having

9
00:00:43,270 --> 00:00:50,500
a form now form will be responsible for taking all of the input inside the form.

10
00:00:51,280 --> 00:00:53,560
I'll be having a div.

11
00:00:55,080 --> 00:01:00,350
And that they would be holding all of the label and the input.

12
00:01:00,670 --> 00:01:05,550
OK, so we're having our day with the glass animal bomb control.

13
00:01:05,820 --> 00:01:07,500
But as of now, we just give a tip.

14
00:01:08,550 --> 00:01:10,950
But I'm thinking to give the glasses at the end.

15
00:01:11,430 --> 00:01:14,400
First of all, let us see how it looks like without the spelling or not.

16
00:01:14,970 --> 00:01:16,770
So here I'll give a label.

17
00:01:18,720 --> 00:01:20,880
OK, label HD email four.

18
00:01:21,450 --> 00:01:22,860
And how do you write the name?

19
00:01:23,830 --> 00:01:30,220
And after the label will have then put food and how do you What?

20
00:01:32,820 --> 00:01:34,020
Typist text.

21
00:01:37,490 --> 00:01:45,050
And there will be some other things like I.D. and the name and on jeans and everything that will do.

22
00:01:45,500 --> 00:01:50,510
But as of now, let us just see how this looks.

23
00:01:53,110 --> 00:01:56,080
We need to import this inside our home component.

24
00:01:57,010 --> 00:01:58,210
You go and.

25
00:01:59,410 --> 00:02:01,240
Import this here inside this.

26
00:02:02,790 --> 00:02:03,090
If.

27
00:02:15,160 --> 00:02:15,910
Those from.

28
00:02:17,830 --> 00:02:20,380
It give us auto import, and yes, it does.

29
00:02:21,130 --> 00:02:24,070
And when I see it and when I go to the browser.

30
00:02:25,490 --> 00:02:27,560
Well, that is my I was on.

31
00:02:28,720 --> 00:02:29,260
Is my.

32
00:02:31,480 --> 00:02:32,650
And find my brother.

33
00:02:32,700 --> 00:02:35,140
Yeah, well, he had a very nasty.

34
00:02:35,230 --> 00:02:43,480
So there is a small sized box that's a small input field because we have not yet given any styling to

35
00:02:43,480 --> 00:02:43,690
it.

36
00:02:43,780 --> 00:02:45,640
So that desired looks like this.

37
00:02:47,290 --> 00:02:48,190
Let us give.

38
00:02:52,170 --> 00:03:00,930
So when you go to this search long and hard for this section, we'll be giving last names.

39
00:03:03,530 --> 00:03:06,210
Lastly, and that would be cool, too.

40
00:03:07,260 --> 00:03:08,360
S. Search.

41
00:03:13,730 --> 00:03:16,220
Or the form I'll be giving a to me.

42
00:03:17,280 --> 00:03:22,650
Last name, that last name is equal to this search form.

43
00:03:23,850 --> 00:03:26,700
Search and the poor.

44
00:03:28,350 --> 00:03:36,240
Will also give some on some merit function to it, but as of now, we could do things step by step inside

45
00:03:36,240 --> 00:03:36,510
the.

46
00:03:36,960 --> 00:03:39,180
Will be having on the glass.

47
00:03:40,260 --> 00:03:44,400
And that's going to be farm control.

48
00:03:44,970 --> 00:03:47,560
And I lost my last name.

49
00:03:47,580 --> 00:03:49,020
And that would be.

50
00:03:50,210 --> 00:03:50,660
On.

51
00:03:52,810 --> 00:03:53,740
And all.

52
00:03:55,290 --> 00:03:59,870
And for the label it's already given on, let me see.

53
00:04:05,180 --> 00:04:11,690
So you can see that is a beautiful search works here, and there doesn't feel that it was the magic

54
00:04:11,690 --> 00:04:13,460
of our CSIS.

55
00:04:14,120 --> 00:04:17,510
Let's go ahead and give some more functionality to it.

56
00:04:18,560 --> 00:04:22,100
So first of all, we we'll import by a global context here.

57
00:04:23,520 --> 00:04:24,030
So.

58
00:04:26,680 --> 00:04:31,780
Really important importance on this really important to use.

59
00:04:32,750 --> 00:04:33,320
This one.

60
00:04:34,840 --> 00:04:36,010
Global context.

61
00:04:38,670 --> 00:04:39,120
But on.

62
00:04:42,100 --> 00:04:42,550
Next.

63
00:04:45,110 --> 00:04:48,230
And next, we'll be importing are.

64
00:04:50,910 --> 00:04:53,430
That said, basically not importing anything.

65
00:04:54,410 --> 00:05:02,820
Well, next, we'll be setting the global context and context inside the search form function, who

66
00:05:02,840 --> 00:05:08,090
will be setting it as a contest inside the curly braces.

67
00:05:08,420 --> 00:05:12,500
We'll see this that aside form that.

68
00:05:13,960 --> 00:05:16,150
The judge from.

69
00:05:17,820 --> 00:05:20,970
That dumped I'm sorry, not done.

70
00:05:22,650 --> 00:05:25,140
And that will grab from the U.S.

71
00:05:26,290 --> 00:05:27,120
Floor can.

72
00:05:28,890 --> 00:05:30,960
So that is it.

73
00:05:31,740 --> 00:05:34,740
OK, I forgot to provide equal to his own.

74
00:05:35,590 --> 00:05:37,470
Yeah, that is it.

75
00:05:37,470 --> 00:05:40,950
We have grabbed the global context.

76
00:05:41,370 --> 00:05:42,530
Start searched on what?

77
00:05:43,520 --> 00:05:53,420
Next, we'll be giving concert so much value, and this is a venue basically, and this will restore

78
00:05:53,420 --> 00:05:54,410
to the dome.

79
00:05:55,250 --> 00:05:57,140
We'll be using use the roof.

80
00:05:58,140 --> 00:06:02,280
On this story, I thought I'd use that.

81
00:06:03,120 --> 00:06:09,690
And as of now, that's empty because there is no keyboard or there's no ring at the moment, which we

82
00:06:09,690 --> 00:06:10,970
can assign to this.

83
00:06:11,010 --> 00:06:11,360
OK.

84
00:06:13,650 --> 00:06:19,410
But as of now, it's empty, and we'll provide a separate column here.

85
00:06:20,340 --> 00:06:28,050
And next, we'll be giving some function to like just the water we type.

86
00:06:28,170 --> 00:06:29,070
So for that?

87
00:06:30,420 --> 00:06:33,080
What we'll do is we'll write some functions.

88
00:06:33,120 --> 00:06:35,340
So first of all, we'll.

89
00:06:36,780 --> 00:06:42,660
By the handle, Inge, who handles change would be inside the input.

90
00:06:43,920 --> 00:06:45,600
One day on June two.

91
00:06:46,780 --> 00:06:48,790
The handle change is right.

92
00:06:49,390 --> 00:06:54,160
I will give that name, and that would be third in.

93
00:06:56,050 --> 00:06:59,440
The cocktail is the name of the function and.

94
00:07:00,710 --> 00:07:05,360
Inside this, what we'll do is we'll start the search.

95
00:07:07,060 --> 00:07:07,570
To.

96
00:07:09,040 --> 00:07:10,710
Good value.

97
00:07:12,110 --> 00:07:13,310
Sergio Al-Udeid.

98
00:07:14,170 --> 00:07:15,760
Current thought.

99
00:07:21,710 --> 00:07:23,300
And we'll provide.

100
00:07:25,850 --> 00:07:26,960
And thesis.

101
00:07:29,410 --> 00:07:33,220
After that, we'll try to handle Summit Will, right?

102
00:07:34,110 --> 00:07:38,490
Function and make.

103
00:07:40,780 --> 00:07:43,090
We'll provide an argument that is.

104
00:07:45,690 --> 00:07:49,230
And from here, we'll return a diet.

105
00:07:51,050 --> 00:07:55,040
Reverend Default, you've the.

106
00:07:56,500 --> 00:08:03,190
What this will do is it will prevent the page from reloading whenever we hit the enter button in the

107
00:08:03,370 --> 00:08:06,490
input field, but that is very, very important.

108
00:08:08,580 --> 00:08:10,060
The daughter in the flight.

109
00:08:10,760 --> 00:08:16,830
And next, what we'll do is we'll create a news effect.

110
00:08:17,550 --> 00:08:18,590
Why are you as a phone?

111
00:08:18,600 --> 00:08:27,840
Because we want to like whenever we go to that particular website, for example, whenever I reload

112
00:08:27,840 --> 00:08:33,480
this, I want the focus to be on this form on this input field.

113
00:08:34,110 --> 00:08:35,640
That is what I want to do.

114
00:08:35,880 --> 00:08:37,800
Before that, I'll be using you as the fact.

115
00:08:39,850 --> 00:08:44,500
I can import it from here, or I can just try to get dirty with effect.

116
00:08:44,800 --> 00:08:47,410
If you're if I'm using it for just one dime.

117
00:08:49,760 --> 00:08:54,410
After discussing this on Stern Hill, right?

118
00:08:55,970 --> 00:08:59,690
The act thought it was a fact.

119
00:09:00,230 --> 00:09:03,530
And inside this, what will do is.

120
00:09:05,940 --> 00:09:10,050
So that was astronaut square bracket.

121
00:09:10,710 --> 00:09:11,090
OK.

122
00:09:11,610 --> 00:09:14,130
Inside the use fact, what we'll do is set.

123
00:09:15,580 --> 00:09:16,360
But it's done.

124
00:09:17,380 --> 00:09:18,730
And here Will.

125
00:09:20,270 --> 00:09:24,380
But not this, not true when you talk to when you.

126
00:09:26,590 --> 00:09:27,970
Virtual value dot.

127
00:09:29,470 --> 00:09:31,590
Surrendered focus.

128
00:09:34,240 --> 00:09:42,340
And this is a function that will set the focus to that particular input, which is responsible for getting

129
00:09:42,340 --> 00:09:44,770
the input from the user.

130
00:09:45,110 --> 00:09:45,460
OK.

131
00:09:45,940 --> 00:09:47,790
And that is it.

132
00:09:47,800 --> 00:09:49,810
We will provide an empty array here.

133
00:09:50,710 --> 00:09:56,920
No, this is the dependency area which is responsible for the execution of this particular function.

134
00:09:57,260 --> 00:09:58,540
So this is their dependency.

135
00:09:58,960 --> 00:10:04,720
And if it's empty, that means function will execute on when the injury lords.

136
00:10:06,530 --> 00:10:10,180
Next, we'll be providing some functionality.

137
00:10:10,310 --> 00:10:14,870
First of all, let us go to the form and here let us provide an on some mic.

138
00:10:15,880 --> 00:10:18,670
On Summit, and here we'll provide handle some of the.

139
00:10:21,290 --> 00:10:30,770
And next, we'll go to the input type, and here will do is, first of all, Typekit text means.

140
00:10:33,430 --> 00:10:33,850
And.

141
00:10:36,090 --> 00:10:36,480
I'd.

142
00:10:38,050 --> 00:10:40,110
Is equal to fame.

143
00:10:44,480 --> 00:10:49,100
Is equal to vote to a new vote, will you?

144
00:10:49,580 --> 00:10:56,600
Next, we'll be having on change and change that will be equal to such bill.

145
00:10:57,990 --> 00:10:59,310
But not value.

146
00:11:03,100 --> 00:11:03,620
Surgical.

147
00:11:05,120 --> 00:11:07,280
And I'll provide a place where live here.

148
00:11:08,150 --> 00:11:21,800
Please hold up, and that will be equal to this urge for the dog, duck and David and I go to the browser.

149
00:11:24,270 --> 00:11:24,620
First.

150
00:11:28,130 --> 00:11:33,410
There's a problem, see, African text is not defined with.

151
00:11:34,890 --> 00:11:35,300
Taken.

152
00:11:43,570 --> 00:11:43,780
And.

153
00:11:48,090 --> 00:11:57,090
That is because I forgot to declare that, so we like glanced at and text is equal to.

154
00:12:00,370 --> 00:12:01,240
The thought.

155
00:12:02,920 --> 00:12:09,730
Create context and then this when I save it and now when I go to the browser.

156
00:12:11,480 --> 00:12:16,040
Yes, that is some that are still children is not defined.

157
00:12:19,340 --> 00:12:21,500
Let me see what the spelling.

158
00:12:22,830 --> 00:12:26,250
OK, the spelling was wrong, so let me correct it.

159
00:12:28,510 --> 00:12:29,770
Yeah, save it.

160
00:12:30,070 --> 00:12:31,240
I hope that works now.

161
00:12:34,780 --> 00:12:35,320
Is this.

162
00:12:39,190 --> 00:12:43,120
So now it works, we were having a small error that was just a typo.

163
00:12:43,840 --> 00:12:50,470
And the next will be moving on to locating a surge functionality and you already actually added the

164
00:12:50,650 --> 00:12:58,720
functionality, but to like display the vote results on the screen along with all the details from the

165
00:12:58,720 --> 00:12:59,200
API.

166
00:12:59,860 --> 00:13:01,300
So that will do in the next review.