Beautiful in order to start working on a card item.
We're going to navigate to our component so I can just close all the tabs that I had open.
Then we're going to navigate to a card item which currently is just a hanging one.
And then before we start working on each individual item I just want to show you what we're gonna have.
So we're gonna have the image then we're gonna have title as well as the price.
Then an option to remove so button with a functionality of removing the item from the card as well as
increasing and decreasing the amount.
Now for increasing and decreasing amount we're going to use font awesome icons that are coming from
react icons.
So that is the library.
And again even though if you're using the starter project you're going to have already the package.
I'm sorry what command you need to run if let's say you had one install for your own project.
So I'm gonna type and PM and you know what.
I'm just gonna clear I'm gonna type and PM install dash dash save and then we'll just type react icons
like so.
So now we're installing the package.
And if you'd like to find out more info about the package.
Again just head over to your favorite search engine and type react icons and.
The first thing that's gonna pop up is gonna be the react icons not notify that com.
That's the link you're looking for.
And like I said this will be the command to install the library and then in order to use the library
you need to imported from reactor icons but then you need to pick which library you would want to use
whether you would want to use font awesome which by the way is going to be archives but you have more
options than that.
So you have material design type icons and all these ones so you just need to pick whatever icon you'd
want.
So that's why you need to head over and look at the docs and then check out which library this is going
to be coming from.
So if you fell over the font awesome again these would be the names of the icons.
So he would want some kind of icon.
Let's say digital ocean.
I'm gonna have to import f a digital ocean from the react icons forward slash FAA.
The FAA is important because that signals of which library we're exactly using now we haven't stolen
their package.
Let me write and pm start and then I can close the terminal and let's get started with our imports up
in our car.
So I'm going to go with import then I'm going to import two icons one is gonna be angle up and angled
down so angle up as well as comma angle F A angle down like so and that is coming from reactor icons
so react icons forwards slash FAA as well as eventually there's going to be caught context because you
see the functionality is essentially going to be coming from our context we still haven't set up these
functions we haven't set up the function for a movie we haven't set up a function for increasing or
decreasing the amount but eventually they're going to be coming from the car context so that's why right
away we can import our cars context so cart context and it is going to be from the context folder.
So let's head over to a context folder and then within the context folder we're looking for the car.
Jerry is all right now.
Eventually you're gonna we're gonna set up our functionality here so cart context.
This is where we're going to use the.
Use context to get our functions but we can right away start working on our return.
So how our return is gonna look like what can just get her off the heading ones I guess that's a good
start then for the article we're gonna have a class name of cart item and then within the article it
start with an image.
Now of course we haven't gotten any of these properties yet but remember we passed them down correct
in the cartridge just like we did with the product so up in a cart item I can just select which properties
I'm going to be looking for and the ones I would need would be I.D. image title price as well as the
amount.
So these are the things that I'm looking for and those are going to be again coming from our local cart.
If you're going to check it out your local cart.
These are the properties that you're going to have with each and every object.
So again title price I.D. and image and all that.
So let's head over back to cart item.
Now we have access to them and one by one let's start displaying them.
So we're going to start with image for the source.
I'm just gonna go with image landfall alternative we're gonna pass in the title we're going to pass
in the title and now I should have three items in my cart and when I say three items that obviously
means that I am gonna have three images and I can see that I'm going to have some random images as my
card items.
Then right after the image we're gonna have the I.D..
And then within the I.D. We're going to pass in a heading for as well as heading 5.
So heading for is gonna be for our title.
So let's access our title then let's save it.
We also would want to set up of course our price.
So we're gonna go with heading 5 and we're gonna have a dollar sign and we're going to look for the
price as well as we would want to have a button that would allow us to remove the item.
Again we don't have the functionality yet but eventually it's obviously going to be there.
So let's just write a button.
Now the button is gonna have type let's say button.
And then as far as classes we're gonna have a cart VPN and remove and remove hyphen B D and and then
within the button we're just gonna write remove and then we're going to set up a on click event listener
so click event listener and for the time being we're just gonna pass in the arrow function so anonymous
function.
So let's just write on click on let's just say that we would want to run our arrow function and we can
maybe set up some kind of console log or we're going to say item removed removed.
So that's what's gonna be in a console if we click on the remote we can click and let's just check our
developer tools in a console we have item or most awesome so then we're gonna have another dev.
So that's give us the first day of where we have the title as well as the price.
And we had our button.
Now we're gonna work on our second one where we're gonna have our increased amount decrease amount as
well as displaying the actual amount.
So we're gonna have another live like so and then we're gonna set up two buttons one for increasing
and one for decreasing and in the middle going to have our amount.
So maybe let's start with our paragraph with our amount.
So we're gonna have class name.
We're gonna have Item Amount class and then in here we're just gonna display our amount.
Let's write down our amount.
So we should have the amount of items that we have in the cart for that particular item.
And then like I said we're gonna have a button button like so again we can add type of button type of
button and for the button.
I don't know we can add maybe a angle up so let's get our angle up icon the one that we imported from
reactor icons let's say right.
Yes we should have the button but then of course we need to add two things we need to add a class name
and you're not.
Before I do that I'm going to copy paste it and I'm going to place it right after the paragraph.
So when we say that there's gonna be a different Phantasm icon.
So there's gonna be a f a angled down.
And then once I have added these changes now I'm going to add the classes as well as on click.
So let's write the class name then we're looking for cart median amount median.
So those are the classes.
And then also let's set up the on click so click event listener.
Again we're gonna do the same thing like we did with remove where there's gonna be a animals are a function
and then within the anonymous hero function let's just write mount increased increase like so.
And then four degrees button almost everything is gonna be the same.
Who are we still gonna have a class name amount.
Button.
Then 40 on click.
The amount is going to be decreased.
So I'm just gonna grab these two right now and then we're gonna add them for our second button.
What's copy pasted.
And we're the right amount.
Decreased decreased.
Let's say it.
And then once we press the button we have amount decreased.
And then of course once we press on the down button and then we have amount decreased.