OK, so let's add some further stylings to the media query.
So right now, we just stick to the minimum width of 768 like this should be the minimum with for this
style to be applied.
OK, so that is what we have done so far.
And let's apply some styling to the minimum width of twelve hundred pixels.
After this.
Will a media with that, will media and.
It's not backed by the.
And what we'll do is and.
Inside is that it would be the minimum with minimum with, so that will be done in private.
And there will be a colon and here will specify the with that would be twelve hundred pixels.
OK.
So inside this, what we'll do is we'll do action and center.
And S. Senator will have the weight of the width will be 95 view with BW.
And that is the total of the 95 percent of the total view.
And next, we'll be having the great template.
So that will be the great template and columns.
So that would be one at.
And next left and right, that would be one I.
So that is what we have done.
And one last thing we will do is we'll provide that for the fort.
Also photo.
And for that, that will be the height of 150 pixels.
150 excellent.
Let's just save it and let me start off the server, so and then start and the server is starting up.
And what we do is we now check in the browser how things are going to tell them.
Let me just create a file here that will be the target audience.
And this particular file will be containing all our data.
So we are not using any API here.
We're just making use of the like the local storage in the project.
So here will me.
We have made a file that is the data stored as an inside this.
That will be the data like all the images and the total prize and the description of the product.
All of that.
OK.
So next, let us just go back to the browser and see how things are going in the committee fresh.
And you can see that so beautiful.
There is only one product here.
It would be like if two or three products let me just go ahead and do that and throw it to you.
So in the menu, let me copy this article.
Two or three times.
So based, based based, let me save it.
Save it and.
I just copied and pasted that article this up, this particular article like two or three times.
OK.
Or we'll just go and see.
You can see there is a beautiful like grid system here, although that's not so beautiful because there
is some space in between so that we'll fix it as soon as possible.
But it looks like, but I'll put it looks better than before.
OK, so next we'll go here and we'll do some more work to.
We just remove all of that because we want only one article here or two or three.
And prevent save.
And that is what we wanted.
But right now, these old values are static and we want to generate like dynamic values.
We want to display them all.
And just the one.
This lion won this piece of code, and we don't want to rewrite it multiple times whenever we want to
write about a new product.
We don't want to, like copy this code again and again, and we don't want to, like, write so much
lines of code.
We want to use this piece of code whenever we got a new product from the Detroit.
Yes, OK.
So first of all, let me just grab the data, which we have.
So let me copy it and we'll go to Peter audience and hit and pasted.
OK, so when I pasted it here, so you can see that is like array of objects inside that we have all
the data like this, is it for a particular product that is at category price and that is an image and
and all of that stuff?
Let me just save it because we are not going to touch it again.
And now what we'll do is we'll go to our menu and Category two like filter out the data to filter out
the category and all all of that stuff will be done now.
The knowledge they delete this photo because we don't need it anymore, because we are going to generate.
Dynamic values.
So we'll just leave it as it is, and we'll save it.
And next, what we'll do now is that the first of all, we can go to many dogs or even categories dogs,
but.
What I decided is that we can go to the category first.
OK, so let us go to the category doctors and write some code there.
OK, so right now we are in the category of tests and we don't need to import anything.
We just need to filter the item.
So in the category, in the category, function will pass.
I'll check inside this.
There will be categories.
Coma, three total items and inside the return, there will be some mapping and all we want to map the
data and.
Inside this lake, after the button, we'll have some JavaScript here.
There will be the curly braces, so here we'll write categories got map.
And this will expect to function and inside this that will provide that ability and and will the index.
OK.
And here that is really a factor of function.
And we'll have a written statement, and inside the return, we'll have this item.
We'll bring this here in the button.
And now in this button, there will be different, different things.
OK.
So the first thing is the type of this button that obviously a button or type is.
Biden.
Next, we already have given the class name, and here will give the key, the key will be the index.
Index and we'll have our own click function basically, so we'll write that in in inland code.
Go on, click and it will try to function.
That will be.
Peter items, Peter.
Items and inside this will pass the category.
OK.
And next between this button, let me just say between this button that is is degrees written there.
So this will be the dynamic thing and here will write category at the.
And we'll see, save it.
But as of now, I don't think there will be much changes in that app because the categories and all
of this is not defined by it because we have not felt like we'll call this and we look like we just
passed the props will use it inside our app.
Gorgeous.
OK, so first of all, let us just create our menu dogs and then we'll go to the app.
Gorgeous.
Well, I don't want to like directly jump into the.
Abdul, because we are going step by step here.
All of these functions, the category, the category and the food that I like all of that right now,
we've just passed the box once we go to the board is that we will write all the functions from scratch
and what is the actual action that will be done in the abductees?
OK, so now we'll write some code in the menu, daughters, but because right now that everything is
just static, we have just Typekit inside the browser and that is just the just hardcoded thing so that
we don't want to happen.
So that will do the next video.