1
00:00:00,720 --> 00:00:01,650
Welcome to this video.

2
00:00:01,950 --> 00:00:09,990
So until the last video, we saw how to run the hard coated part of the movies like I Give You Movies.

3
00:00:11,030 --> 00:00:17,390
In abductors have given a set of four movies, hardcore, and these movies are basically we are printing

4
00:00:17,390 --> 00:00:18,020
them on the screen.

5
00:00:18,260 --> 00:00:23,850
So now in this video, we can see how to dynamically bring the movies like get the movies from the or

6
00:00:23,960 --> 00:00:30,020
IMDb API that we saw in the previous videos, and then implement the surge feature so that the user

7
00:00:30,020 --> 00:00:31,100
will have a surge barrier.

8
00:00:31,910 --> 00:00:33,310
The title, which they search.

9
00:00:33,350 --> 00:00:38,270
Yet you will get to able to see the movies that are that are present with that title.

10
00:00:38,790 --> 00:00:39,800
See how to implement that.

11
00:00:40,200 --> 00:00:46,490
The first thing we have to have a title as a movies over here and then a search box, we will create

12
00:00:46,490 --> 00:00:47,360
those components.

13
00:00:48,510 --> 00:00:55,410
One is search box component and another one is Mobil, extending the insect component and creating those

14
00:00:55,410 --> 00:00:56,160
two components.

15
00:00:57,000 --> 00:00:58,440
One is more A-list heading.

16
00:01:00,310 --> 00:01:01,330
A jazz sex.

17
00:01:02,910 --> 00:01:03,930
And the other one is.

18
00:01:05,720 --> 00:01:07,160
Search box lodges.

19
00:01:08,650 --> 00:01:09,420
Birchbox.

20
00:01:10,520 --> 00:01:13,250
So much start getting six.

21
00:01:18,200 --> 00:01:22,070
So now we're the country and the concert is turning.

22
00:01:34,740 --> 00:01:40,260
So it will take some props and props to be using the arrow function.

23
00:01:41,280 --> 00:01:45,120
So these games you have this, you can create a function called more interesting and then use everything

24
00:01:45,120 --> 00:01:48,500
but simply as an arrow function to decrease the amount of code.

25
00:01:50,810 --> 00:01:51,830
Mescal will return.

26
00:01:53,060 --> 00:01:53,570
I do.

27
00:01:56,360 --> 00:01:57,740
With platinum coal.

28
00:02:01,820 --> 00:02:02,270
Column.

29
00:02:04,770 --> 00:02:06,030
This will contain natural.

30
00:02:07,590 --> 00:02:08,670
It drops that hitting.

31
00:02:13,570 --> 00:02:18,670
So they have created a separate component for the list here is that we'll have two different beheadings.

32
00:02:18,670 --> 00:02:23,620
That one is the movies heading the movies that appear from the search, but another is the favorite

33
00:02:23,620 --> 00:02:29,530
had changed of writing two different ones that we can create a component and said, send the props and

34
00:02:29,530 --> 00:02:31,110
that it is movies, our favorites.

35
00:02:31,120 --> 00:02:32,080
You can check it.

36
00:02:32,090 --> 00:02:32,740
Not if you can.

37
00:02:32,740 --> 00:02:38,130
If you want to already watch it, want to watch your watch list.

38
00:02:38,500 --> 00:02:43,450
So to have these components, you can simply use the single component by changing your prop.

39
00:02:43,450 --> 00:02:50,320
Whenever you send the prop troop from abroad that you can just send it in the way you want, like one

40
00:02:50,320 --> 00:02:51,250
time I can send.

41
00:02:52,240 --> 00:02:58,630
Movies heading another day, my kids and favorites are I can send my my list are already watched like

42
00:02:58,630 --> 00:02:58,840
that.

43
00:02:59,810 --> 00:03:01,700
So we have to export this.

44
00:03:10,460 --> 00:03:13,610
So now we are done with the movie, Liz Cheney and I will create such search box.

45
00:03:20,830 --> 00:03:27,450
Regarding the search box function to export it well, it will also take drops on our battle function.

46
00:03:29,800 --> 00:03:32,470
Well, we have written something and we'll read it, I mean, I do.

47
00:03:35,880 --> 00:03:37,330
The class name.

48
00:03:39,400 --> 00:03:45,490
So if you remember, these are the last names that I'm taking from bootstrap, assembling small in the

49
00:03:45,490 --> 00:03:49,030
forward means the site it should occupy in that homepage.

50
00:03:50,870 --> 00:03:52,460
So you can have input.

51
00:03:55,320 --> 00:03:56,640
Input with some props.

52
00:04:05,310 --> 00:04:07,290
So we have a last name.

53
00:04:11,050 --> 00:04:12,400
As farm control.

54
00:04:16,720 --> 00:04:19,510
So the value will be brought to value.

55
00:04:23,300 --> 00:04:24,170
On change.

56
00:04:26,380 --> 00:04:31,270
So, you know, unless Yankees valiant on change when we write the code for the search box and AB dodges

57
00:04:31,270 --> 00:04:32,770
shortly, we'll do that shortly.

58
00:04:36,120 --> 00:04:37,200
So even.

59
00:04:42,730 --> 00:04:43,450
Drops duck.

60
00:04:45,350 --> 00:04:49,840
So that such value as even not.

61
00:04:53,980 --> 00:04:54,070
A.

62
00:04:56,010 --> 00:04:56,230
The.

63
00:04:58,880 --> 00:04:59,360
And then.

64
00:05:00,500 --> 00:05:02,990
Soledad will be Typekit such.

65
00:05:07,450 --> 00:05:13,650
So now you may have doubts like why we are writing the value as sending the project value to the value

66
00:05:13,660 --> 00:05:16,060
and then performing now on chain function.

67
00:05:16,510 --> 00:05:18,400
So now go to abduct Jess.

68
00:05:21,320 --> 00:05:28,970
Here so since, like we used a constant for movies like an hour, I'll be removing this hot water part.

69
00:05:34,280 --> 00:05:37,280
It will be an empty RFU refresh, it will get an empty.

70
00:05:38,860 --> 00:05:39,570
Thank you.

71
00:05:39,740 --> 00:05:47,200
So we are not getting anything because a remote default is so similar to movies will be creating a hook

72
00:05:47,200 --> 00:05:53,500
for such money, so there'll be such a value, the value that the user is typing into the search bar.

73
00:05:53,710 --> 00:05:57,220
And to change that value will call a function called sex triangle.

74
00:05:59,090 --> 00:05:59,350
I.

75
00:06:00,540 --> 00:06:07,070
So initially, it will be R and B, because the user will not type anything initially whenever you read

76
00:06:07,080 --> 00:06:11,580
anything with the help of such search value function will change asset search value constant.

77
00:06:14,320 --> 00:06:18,930
So after this, now we have to create a search box component, right?

78
00:06:20,000 --> 00:06:21,560
So that I'll be doing it.

79
00:06:22,040 --> 00:06:27,370
So about the movies list, and we have another revision about this rule.

80
00:06:28,760 --> 00:06:34,830
So he had inside the container, flew fluid, will have a division with glass.

81
00:06:36,140 --> 00:06:36,920
A division.

82
00:06:41,230 --> 00:06:46,460
Glass animals now will be calling the Bootstrap Plaza Store Day Flex Fuel.

83
00:06:47,830 --> 00:06:52,000
A few are bootstrapped lives and a few other custom classes that we'll see shortly.

84
00:06:53,980 --> 00:06:54,970
I line items.

85
00:06:57,370 --> 00:06:57,880
Senator.

86
00:07:00,060 --> 00:07:05,370
And B minus four and B minus the Bush, our plans for our alignment and everything.

87
00:07:06,210 --> 00:07:10,320
So once this is done, we'll call the movie listed in component.

88
00:07:13,630 --> 00:07:14,770
We'll be illustrating.

89
00:07:17,630 --> 00:07:19,700
We have to send some props late, say, to the heading.

90
00:07:19,910 --> 00:07:27,820
We have this heading heading will be moist since we are only one to like, display the movies that are

91
00:07:27,830 --> 00:07:31,610
searched by the user, not the favorites of which he had it into his favorite.

92
00:07:32,180 --> 00:07:33,620
So you can see I have seen that.

93
00:07:33,620 --> 00:07:39,620
I've said there had been signs at the woman was initiating and catching this props and said the production

94
00:07:39,620 --> 00:07:40,490
at Edinburgh.

95
00:07:41,000 --> 00:07:42,800
So that is how I can tell that.

96
00:07:43,040 --> 00:07:48,920
So if you want the same thing, like if you want to have a favorite heading, then you have to send

97
00:07:48,920 --> 00:07:53,240
the movie with favorites as the extorting replacing the movies.

98
00:07:53,630 --> 00:07:56,420
So that is how simple like we work with components.

99
00:07:57,490 --> 00:08:00,400
So long as it is done, then we need to have a search box.

100
00:08:04,970 --> 00:08:07,630
It will also off, you know.

101
00:08:08,710 --> 00:08:09,180
Props.

102
00:08:10,580 --> 00:08:11,750
Such value will be.

103
00:08:13,430 --> 00:08:14,180
Such value.

104
00:08:17,110 --> 00:08:18,430
Said such rally will be.

105
00:08:20,200 --> 00:08:21,040
It's such value.

106
00:08:22,880 --> 00:08:24,740
So basically, we're sending a functional audit.

107
00:08:25,930 --> 00:08:29,470
So, but such value props, you are sending that search value.

108
00:08:30,580 --> 00:08:36,430
So as you can see in the search box at our desks inside the value, we are losing the value that we

109
00:08:36,430 --> 00:08:37,300
got from the props.

110
00:08:37,600 --> 00:08:41,410
That value is nothing but simply a search value constant that we are using it.

111
00:08:42,130 --> 00:08:45,430
And similarly, if I said search relative, you are sending the same cellular function.

112
00:08:45,910 --> 00:08:48,160
So this is usually said the value of search value.

113
00:08:48,520 --> 00:08:52,690
So lock Minneapolis on change whenever the search button input changes.

114
00:08:52,900 --> 00:08:58,720
It will take that event and then it will use the search value function and change the value of the constant.

115
00:08:59,140 --> 00:09:03,400
Don't even dare to conduct value that is the current value present internet search box.

116
00:09:04,180 --> 00:09:06,880
So this is what basically we are doing in our projects.

117
00:09:08,700 --> 00:09:15,210
So once we are done with that now, you can go to our proxies and basically use some styling.

118
00:09:16,080 --> 00:09:22,770
Now I'll be doing some styling part like we are using bootstrap for majority of the styling, but also

119
00:09:22,770 --> 00:09:28,320
there will be some changes that we want rather than bootstrap like some customized changes so that we

120
00:09:28,320 --> 00:09:29,610
are going to adapt or see.

121
00:09:33,060 --> 00:09:34,410
The background color will be.

122
00:09:36,110 --> 00:09:39,520
Hashtag one four one four four one four one four one four.

123
00:09:39,980 --> 00:09:42,410
So you can choose or like it's not.

124
00:09:42,590 --> 00:09:48,470
And I said that you have people only these colors you can go to color, you wear that other color palette

125
00:09:48,470 --> 00:09:52,970
that are produced by different developers, the white and the realtime web development field.

126
00:09:53,240 --> 00:09:57,380
So you can use your favorite color palette, you can see the exact copy.

127
00:09:57,560 --> 00:10:01,580
It is color hunt, dot, you know, website name you can check out.

128
00:10:02,180 --> 00:10:07,550
So basically, this is what I am using to for painting purpose, organize any colors off represent.

129
00:10:07,550 --> 00:10:10,820
You can change the styling the way you want to look your website.

130
00:10:13,810 --> 00:10:14,200
And then.

131
00:10:16,380 --> 00:10:18,270
Talk movie app.

132
00:10:20,390 --> 00:10:25,280
But all inside, well, we have all the rules should have a overflew access order.

133
00:10:29,340 --> 00:10:30,480
Alex FRAP should be no.

134
00:10:34,040 --> 00:10:34,380
You know what?

135
00:10:37,630 --> 00:10:39,460
Not image container.

136
00:10:45,020 --> 00:10:46,520
Position should be relayed to.

137
00:10:51,760 --> 00:10:58,060
Transition should be transformed, which is basically that never to be over, but under the immediate

138
00:10:58,060 --> 00:11:02,600
it should like it should zoom a bit like, so we have to know on which we are already.

139
00:11:02,990 --> 00:11:05,950
So for we should have a transition on the image.

140
00:11:05,950 --> 00:11:11,440
Content at Transform should be zero point two x outside the cold front holding in our by.

141
00:11:16,740 --> 00:11:18,630
No image content and what?

142
00:11:20,240 --> 00:11:25,010
So Hobart is a sort of class that we have to use column and check water for our classes and then be

143
00:11:25,010 --> 00:11:25,910
in documentation.

144
00:11:26,360 --> 00:11:26,900
If you want.

145
00:11:28,200 --> 00:11:30,510
I'll be attending Castle 2.0.

146
00:11:33,300 --> 00:11:34,620
And then transforming risk.

147
00:11:34,850 --> 00:11:41,480
We are increasing the scale of bit whenever the a person user hovers on to an image or to a movie and.

148
00:11:43,860 --> 00:11:44,820
Skin should be one point.

149
00:11:45,210 --> 00:11:46,410
It increases by point one.

150
00:11:49,110 --> 00:11:51,880
So once this is done, they are to be watched as well.

151
00:11:52,080 --> 00:11:52,320
Do.

152
00:11:55,480 --> 00:12:01,430
So we are not going to be a doctor using this intended audience, we're not calling this search box,

153
00:12:01,430 --> 00:12:02,500
so we'll call that.

154
00:12:04,250 --> 00:12:05,290
It can both.

155
00:12:07,470 --> 00:12:08,430
Search box.

156
00:12:10,980 --> 00:12:11,340
From.

157
00:12:12,820 --> 00:12:14,380
Not large components.

158
00:12:15,740 --> 00:12:16,310
Flash.

159
00:12:17,490 --> 00:12:18,180
Such was.

160
00:12:23,080 --> 00:12:27,100
Does not contract before next week and said the surge box oxygen before about to explode.

161
00:12:28,850 --> 00:12:29,480
Export.

162
00:12:30,930 --> 00:12:31,530
Default.

163
00:12:33,010 --> 00:12:35,710
Such books, so I think it should work, yeah.

164
00:12:36,070 --> 00:12:42,130
So now we can see, like we have completed 19 implementation of title and such, but very few scenes

165
00:12:42,130 --> 00:12:45,400
at the branches instead of sending movies, value added.

166
00:12:47,100 --> 00:12:49,650
Yeah, instead of war, which I've been envisioning favorites.

167
00:12:54,160 --> 00:12:59,140
We're going to initiate new favorites like it is, the whole beard is not refreshing, it is only changing

168
00:12:59,140 --> 00:13:01,120
the component that we are changing.

169
00:13:01,120 --> 00:13:02,270
So that is the beauty of the act.

170
00:13:02,270 --> 00:13:03,490
It works with confidence.

171
00:13:03,750 --> 00:13:07,570
Rather than refreshing the whole page, it will only refresh the components that are changing.

172
00:13:07,930 --> 00:13:12,850
So this allows for the like, the time it will time complexity and the space complexity.

173
00:13:13,030 --> 00:13:14,530
So that is how it works.

174
00:13:14,530 --> 00:13:14,860
React.

175
00:13:14,860 --> 00:13:17,650
So that's where it is most popular framework in the technology.

176
00:13:19,150 --> 00:13:23,860
So they want movies and objects reusable, like the kind of the same component for using various things,

177
00:13:23,890 --> 00:13:28,930
and then once we are going to the favorites section, then we can use the same component instead of

178
00:13:28,930 --> 00:13:31,630
sending movies, Wilkinson had the musical to favorites.

179
00:13:32,530 --> 00:13:38,650
So if you have a search or really can search, but how to like based on the search value, how to render

180
00:13:38,650 --> 00:13:45,160
the images like how to search the movies to that movies, that data we are getting from that the right

181
00:13:45,190 --> 00:13:51,510
step where you are in that search feature so that the dynamic, the dynamic combination of what we see

182
00:13:51,590 --> 00:13:52,180
in the next few.