1
00:00:00,270 --> 00:00:04,530
OK, so let's add some further stylings to the media query.

2
00:00:05,040 --> 00:00:12,660
So right now, we just stick to the minimum width of 768 like this should be the minimum with for this

3
00:00:13,110 --> 00:00:14,370
style to be applied.

4
00:00:14,880 --> 00:00:17,970
OK, so that is what we have done so far.

5
00:00:18,600 --> 00:00:25,110
And let's apply some styling to the minimum width of twelve hundred pixels.

6
00:00:27,540 --> 00:00:28,140
After this.

7
00:00:29,030 --> 00:00:32,750
Will a media with that, will media and.

8
00:00:34,580 --> 00:00:36,720
It's not backed by the.

9
00:00:37,690 --> 00:00:39,280
And what we'll do is and.

10
00:00:40,740 --> 00:00:46,480
Inside is that it would be the minimum with minimum with, so that will be done in private.

11
00:00:47,400 --> 00:00:54,310
And there will be a colon and here will specify the with that would be twelve hundred pixels.

12
00:00:54,340 --> 00:00:54,620
OK.

13
00:00:55,670 --> 00:01:02,310
So inside this, what we'll do is we'll do action and center.

14
00:01:04,500 --> 00:01:15,460
And S. Senator will have the weight of the width will be 95 view with BW.

15
00:01:15,750 --> 00:01:19,350
And that is the total of the 95 percent of the total view.

16
00:01:20,650 --> 00:01:23,760
And next, we'll be having the great template.

17
00:01:24,120 --> 00:01:27,750
So that will be the great template and columns.

18
00:01:27,840 --> 00:01:29,730
So that would be one at.

19
00:01:30,540 --> 00:01:34,140
And next left and right, that would be one I.

20
00:01:35,040 --> 00:01:36,300
So that is what we have done.

21
00:01:36,310 --> 00:01:39,750
And one last thing we will do is we'll provide that for the fort.

22
00:01:39,760 --> 00:01:42,150
Also photo.

23
00:01:42,420 --> 00:01:45,780
And for that, that will be the height of 150 pixels.

24
00:01:46,910 --> 00:01:48,700
150 excellent.

25
00:01:49,340 --> 00:01:57,380
Let's just save it and let me start off the server, so and then start and the server is starting up.

26
00:01:58,190 --> 00:02:04,130
And what we do is we now check in the browser how things are going to tell them.

27
00:02:04,160 --> 00:02:10,640
Let me just create a file here that will be the target audience.

28
00:02:11,360 --> 00:02:15,850
And this particular file will be containing all our data.

29
00:02:15,860 --> 00:02:17,830
So we are not using any API here.

30
00:02:18,320 --> 00:02:25,160
We're just making use of the like the local storage in the project.

31
00:02:25,370 --> 00:02:26,600
So here will me.

32
00:02:27,230 --> 00:02:31,040
We have made a file that is the data stored as an inside this.

33
00:02:31,040 --> 00:02:38,000
That will be the data like all the images and the total prize and the description of the product.

34
00:02:38,030 --> 00:02:38,660
All of that.

35
00:02:39,050 --> 00:02:39,470
OK.

36
00:02:39,740 --> 00:02:46,070
So next, let us just go back to the browser and see how things are going in the committee fresh.

37
00:02:46,070 --> 00:02:47,930
And you can see that so beautiful.

38
00:02:48,410 --> 00:02:50,660
There is only one product here.

39
00:02:50,660 --> 00:02:55,700
It would be like if two or three products let me just go ahead and do that and throw it to you.

40
00:02:56,780 --> 00:02:59,960
So in the menu, let me copy this article.

41
00:03:01,090 --> 00:03:02,260
Two or three times.

42
00:03:02,530 --> 00:03:07,150
So based, based based, let me save it.

43
00:03:09,060 --> 00:03:10,140
Save it and.

44
00:03:11,350 --> 00:03:18,220
I just copied and pasted that article this up, this particular article like two or three times.

45
00:03:18,250 --> 00:03:18,540
OK.

46
00:03:19,420 --> 00:03:21,370
Or we'll just go and see.

47
00:03:23,910 --> 00:03:29,160
You can see there is a beautiful like grid system here, although that's not so beautiful because there

48
00:03:29,160 --> 00:03:33,420
is some space in between so that we'll fix it as soon as possible.

49
00:03:35,270 --> 00:03:39,170
But it looks like, but I'll put it looks better than before.

50
00:03:39,200 --> 00:03:45,590
OK, so next we'll go here and we'll do some more work to.

51
00:03:47,280 --> 00:03:53,760
We just remove all of that because we want only one article here or two or three.

52
00:03:54,620 --> 00:03:55,520
And prevent save.

53
00:03:56,170 --> 00:03:57,880
And that is what we wanted.

54
00:03:58,330 --> 00:04:04,120
But right now, these old values are static and we want to generate like dynamic values.

55
00:04:04,670 --> 00:04:06,520
We want to display them all.

56
00:04:06,520 --> 00:04:07,480
And just the one.

57
00:04:07,480 --> 00:04:13,900
This lion won this piece of code, and we don't want to rewrite it multiple times whenever we want to

58
00:04:13,900 --> 00:04:15,090
write about a new product.

59
00:04:15,340 --> 00:04:21,760
We don't want to, like copy this code again and again, and we don't want to, like, write so much

60
00:04:21,760 --> 00:04:22,300
lines of code.

61
00:04:22,300 --> 00:04:29,430
We want to use this piece of code whenever we got a new product from the Detroit.

62
00:04:29,640 --> 00:04:30,730
Yes, OK.

63
00:04:30,850 --> 00:04:36,610
So first of all, let me just grab the data, which we have.

64
00:04:36,730 --> 00:04:42,400
So let me copy it and we'll go to Peter audience and hit and pasted.

65
00:04:44,580 --> 00:04:53,550
OK, so when I pasted it here, so you can see that is like array of objects inside that we have all

66
00:04:53,550 --> 00:05:01,680
the data like this, is it for a particular product that is at category price and that is an image and

67
00:05:01,910 --> 00:05:02,970
and all of that stuff?

68
00:05:03,480 --> 00:05:05,880
Let me just save it because we are not going to touch it again.

69
00:05:06,510 --> 00:05:15,750
And now what we'll do is we'll go to our menu and Category two like filter out the data to filter out

70
00:05:15,750 --> 00:05:19,530
the category and all all of that stuff will be done now.

71
00:05:19,950 --> 00:05:25,470
The knowledge they delete this photo because we don't need it anymore, because we are going to generate.

72
00:05:28,430 --> 00:05:29,390
Dynamic values.

73
00:05:29,510 --> 00:05:32,960
So we'll just leave it as it is, and we'll save it.

74
00:05:33,710 --> 00:05:42,560
And next, what we'll do now is that the first of all, we can go to many dogs or even categories dogs,

75
00:05:42,860 --> 00:05:43,310
but.

76
00:05:46,830 --> 00:05:51,750
What I decided is that we can go to the category first.

77
00:05:52,260 --> 00:05:58,350
OK, so let us go to the category doctors and write some code there.

78
00:05:59,010 --> 00:06:04,530
OK, so right now we are in the category of tests and we don't need to import anything.

79
00:06:05,160 --> 00:06:08,040
We just need to filter the item.

80
00:06:08,050 --> 00:06:11,910
So in the category, in the category, function will pass.

81
00:06:12,540 --> 00:06:14,700
I'll check inside this.

82
00:06:14,700 --> 00:06:16,890
There will be categories.

83
00:06:19,120 --> 00:06:29,830
Coma, three total items and inside the return, there will be some mapping and all we want to map the

84
00:06:29,830 --> 00:06:31,720
data and.

85
00:06:32,980 --> 00:06:39,060
Inside this lake, after the button, we'll have some JavaScript here.

86
00:06:39,650 --> 00:06:47,080
There will be the curly braces, so here we'll write categories got map.

87
00:06:48,500 --> 00:06:58,100
And this will expect to function and inside this that will provide that ability and and will the index.

88
00:06:58,670 --> 00:06:58,990
OK.

89
00:07:01,050 --> 00:07:04,590
And here that is really a factor of function.

90
00:07:05,800 --> 00:07:14,200
And we'll have a written statement, and inside the return, we'll have this item.

91
00:07:18,090 --> 00:07:20,190
We'll bring this here in the button.

92
00:07:20,700 --> 00:07:24,370
And now in this button, there will be different, different things.

93
00:07:24,390 --> 00:07:24,690
OK.

94
00:07:25,970 --> 00:07:32,120
So the first thing is the type of this button that obviously a button or type is.

95
00:07:33,580 --> 00:07:34,000
Biden.

96
00:07:36,520 --> 00:07:44,950
Next, we already have given the class name, and here will give the key, the key will be the index.

97
00:07:46,720 --> 00:07:56,290
Index and we'll have our own click function basically, so we'll write that in in inland code.

98
00:07:58,600 --> 00:08:04,630
Go on, click and it will try to function.

99
00:08:06,520 --> 00:08:07,300
That will be.

100
00:08:09,100 --> 00:08:13,110
Peter items, Peter.

101
00:08:14,320 --> 00:08:19,160
Items and inside this will pass the category.

102
00:08:20,170 --> 00:08:20,480
OK.

103
00:08:21,520 --> 00:08:29,860
And next between this button, let me just say between this button that is is degrees written there.

104
00:08:29,860 --> 00:08:37,530
So this will be the dynamic thing and here will write category at the.

105
00:08:39,190 --> 00:08:39,970
And we'll see, save it.

106
00:08:42,230 --> 00:08:48,770
But as of now, I don't think there will be much changes in that app because the categories and all

107
00:08:48,860 --> 00:08:56,750
of this is not defined by it because we have not felt like we'll call this and we look like we just

108
00:08:56,750 --> 00:08:59,570
passed the props will use it inside our app.

109
00:08:59,580 --> 00:09:00,320
Gorgeous.

110
00:09:00,920 --> 00:09:10,220
OK, so first of all, let us just create our menu dogs and then we'll go to the app.

111
00:09:10,220 --> 00:09:10,850
Gorgeous.

112
00:09:11,520 --> 00:09:14,000
Well, I don't want to like directly jump into the.

113
00:09:15,150 --> 00:09:19,210
Abdul, because we are going step by step here.

114
00:09:19,230 --> 00:09:26,490
All of these functions, the category, the category and the food that I like all of that right now,

115
00:09:26,490 --> 00:09:32,480
we've just passed the box once we go to the board is that we will write all the functions from scratch

116
00:09:32,490 --> 00:09:36,690
and what is the actual action that will be done in the abductees?

117
00:09:38,300 --> 00:09:45,980
OK, so now we'll write some code in the menu, daughters, but because right now that everything is

118
00:09:45,980 --> 00:09:55,850
just static, we have just Typekit inside the browser and that is just the just hardcoded thing so that

119
00:09:55,850 --> 00:09:57,620
we don't want to happen.

120
00:09:58,220 --> 00:10:00,650
So that will do the next video.