1 00:00:00,480 --> 00:00:03,050 Beautiful in order to start working on a card item. 2 00:00:03,270 --> 00:00:08,880 We're going to navigate to our component so I can just close all the tabs that I had open. 3 00:00:08,940 --> 00:00:13,980 Then we're going to navigate to a card item which currently is just a hanging one. 4 00:00:14,040 --> 00:00:19,920 And then before we start working on each individual item I just want to show you what we're gonna have. 5 00:00:20,370 --> 00:00:24,560 So we're gonna have the image then we're gonna have title as well as the price. 6 00:00:24,730 --> 00:00:31,380 Then an option to remove so button with a functionality of removing the item from the card as well as 7 00:00:31,380 --> 00:00:34,000 increasing and decreasing the amount. 8 00:00:34,190 --> 00:00:40,020 Now for increasing and decreasing amount we're going to use font awesome icons that are coming from 9 00:00:40,320 --> 00:00:41,730 react icons. 10 00:00:41,730 --> 00:00:43,030 So that is the library. 11 00:00:43,080 --> 00:00:49,860 And again even though if you're using the starter project you're going to have already the package. 12 00:00:49,890 --> 00:00:54,670 I'm sorry what command you need to run if let's say you had one install for your own project. 13 00:00:54,840 --> 00:00:56,960 So I'm gonna type and PM and you know what. 14 00:00:57,000 --> 00:01:04,890 I'm just gonna clear I'm gonna type and PM install dash dash save and then we'll just type react icons 15 00:01:05,100 --> 00:01:05,730 like so. 16 00:01:05,730 --> 00:01:07,410 So now we're installing the package. 17 00:01:07,620 --> 00:01:10,930 And if you'd like to find out more info about the package. 18 00:01:10,930 --> 00:01:17,340 Again just head over to your favorite search engine and type react icons and. 19 00:01:17,340 --> 00:01:21,970 The first thing that's gonna pop up is gonna be the react icons not notify that com. 20 00:01:22,180 --> 00:01:23,710 That's the link you're looking for. 21 00:01:23,760 --> 00:01:29,400 And like I said this will be the command to install the library and then in order to use the library 22 00:01:30,270 --> 00:01:35,310 you need to imported from reactor icons but then you need to pick which library you would want to use 23 00:01:35,660 --> 00:01:39,900 whether you would want to use font awesome which by the way is going to be archives but you have more 24 00:01:39,900 --> 00:01:40,740 options than that. 25 00:01:40,920 --> 00:01:47,090 So you have material design type icons and all these ones so you just need to pick whatever icon you'd 26 00:01:47,100 --> 00:01:47,700 want. 27 00:01:47,760 --> 00:01:53,570 So that's why you need to head over and look at the docs and then check out which library this is going 28 00:01:53,570 --> 00:01:54,690 to be coming from. 29 00:01:54,690 --> 00:01:59,550 So if you fell over the font awesome again these would be the names of the icons. 30 00:01:59,550 --> 00:02:01,380 So he would want some kind of icon. 31 00:02:01,500 --> 00:02:03,030 Let's say digital ocean. 32 00:02:03,030 --> 00:02:10,870 I'm gonna have to import f a digital ocean from the react icons forward slash FAA. 33 00:02:10,890 --> 00:02:16,710 The FAA is important because that signals of which library we're exactly using now we haven't stolen 34 00:02:16,710 --> 00:02:17,850 their package. 35 00:02:17,850 --> 00:02:25,140 Let me write and pm start and then I can close the terminal and let's get started with our imports up 36 00:02:25,230 --> 00:02:26,300 in our car. 37 00:02:26,610 --> 00:02:32,420 So I'm going to go with import then I'm going to import two icons one is gonna be angle up and angled 38 00:02:32,420 --> 00:02:44,150 down so angle up as well as comma angle F A angle down like so and that is coming from reactor icons 39 00:02:44,570 --> 00:02:52,290 so react icons forwards slash FAA as well as eventually there's going to be caught context because you 40 00:02:52,290 --> 00:02:57,630 see the functionality is essentially going to be coming from our context we still haven't set up these 41 00:02:57,630 --> 00:03:03,720 functions we haven't set up the function for a movie we haven't set up a function for increasing or 42 00:03:03,720 --> 00:03:09,510 decreasing the amount but eventually they're going to be coming from the car context so that's why right 43 00:03:09,510 --> 00:03:18,470 away we can import our cars context so cart context and it is going to be from the context folder. 44 00:03:18,920 --> 00:03:25,480 So let's head over to a context folder and then within the context folder we're looking for the car. 45 00:03:25,520 --> 00:03:28,010 Jerry is all right now. 46 00:03:28,010 --> 00:03:32,650 Eventually you're gonna we're gonna set up our functionality here so cart context. 47 00:03:32,650 --> 00:03:34,090 This is where we're going to use the. 48 00:03:34,090 --> 00:03:40,040 Use context to get our functions but we can right away start working on our return. 49 00:03:40,040 --> 00:03:45,230 So how our return is gonna look like what can just get her off the heading ones I guess that's a good 50 00:03:45,230 --> 00:03:53,970 start then for the article we're gonna have a class name of cart item and then within the article it 51 00:03:53,970 --> 00:03:55,420 start with an image. 52 00:03:55,490 --> 00:04:01,310 Now of course we haven't gotten any of these properties yet but remember we passed them down correct 53 00:04:01,400 --> 00:04:07,460 in the cartridge just like we did with the product so up in a cart item I can just select which properties 54 00:04:07,460 --> 00:04:16,010 I'm going to be looking for and the ones I would need would be I.D. image title price as well as the 55 00:04:16,100 --> 00:04:16,990 amount. 56 00:04:17,000 --> 00:04:22,260 So these are the things that I'm looking for and those are going to be again coming from our local cart. 57 00:04:22,520 --> 00:04:24,470 If you're going to check it out your local cart. 58 00:04:24,620 --> 00:04:28,270 These are the properties that you're going to have with each and every object. 59 00:04:28,280 --> 00:04:32,180 So again title price I.D. and image and all that. 60 00:04:32,180 --> 00:04:34,370 So let's head over back to cart item. 61 00:04:34,460 --> 00:04:38,390 Now we have access to them and one by one let's start displaying them. 62 00:04:38,900 --> 00:04:41,750 So we're going to start with image for the source. 63 00:04:41,840 --> 00:04:49,530 I'm just gonna go with image landfall alternative we're gonna pass in the title we're going to pass 64 00:04:49,530 --> 00:04:55,410 in the title and now I should have three items in my cart and when I say three items that obviously 65 00:04:55,410 --> 00:05:01,200 means that I am gonna have three images and I can see that I'm going to have some random images as my 66 00:05:01,290 --> 00:05:02,490 card items. 67 00:05:02,490 --> 00:05:05,210 Then right after the image we're gonna have the I.D.. 68 00:05:05,490 --> 00:05:10,970 And then within the I.D. We're going to pass in a heading for as well as heading 5. 69 00:05:11,000 --> 00:05:14,220 So heading for is gonna be for our title. 70 00:05:14,220 --> 00:05:18,810 So let's access our title then let's save it. 71 00:05:18,860 --> 00:05:22,500 We also would want to set up of course our price. 72 00:05:22,590 --> 00:05:28,620 So we're gonna go with heading 5 and we're gonna have a dollar sign and we're going to look for the 73 00:05:28,620 --> 00:05:34,650 price as well as we would want to have a button that would allow us to remove the item. 74 00:05:34,650 --> 00:05:39,080 Again we don't have the functionality yet but eventually it's obviously going to be there. 75 00:05:39,090 --> 00:05:41,090 So let's just write a button. 76 00:05:41,220 --> 00:05:45,400 Now the button is gonna have type let's say button. 77 00:05:45,410 --> 00:05:55,410 And then as far as classes we're gonna have a cart VPN and remove and remove hyphen B D and and then 78 00:05:55,410 --> 00:06:01,380 within the button we're just gonna write remove and then we're going to set up a on click event listener 79 00:06:01,500 --> 00:06:07,440 so click event listener and for the time being we're just gonna pass in the arrow function so anonymous 80 00:06:07,630 --> 00:06:08,310 function. 81 00:06:08,520 --> 00:06:15,480 So let's just write on click on let's just say that we would want to run our arrow function and we can 82 00:06:15,480 --> 00:06:21,170 maybe set up some kind of console log or we're going to say item removed removed. 83 00:06:21,270 --> 00:06:27,750 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 84 00:06:27,810 --> 00:06:33,900 developer tools in a console we have item or most awesome so then we're gonna have another dev. 85 00:06:33,930 --> 00:06:38,240 So that's give us the first day of where we have the title as well as the price. 86 00:06:38,290 --> 00:06:40,160 And we had our button. 87 00:06:40,210 --> 00:06:46,300 Now we're gonna work on our second one where we're gonna have our increased amount decrease amount as 88 00:06:46,300 --> 00:06:49,020 well as displaying the actual amount. 89 00:06:49,060 --> 00:06:55,570 So we're gonna have another live like so and then we're gonna set up two buttons one for increasing 90 00:06:55,630 --> 00:07:00,060 and one for decreasing and in the middle going to have our amount. 91 00:07:00,220 --> 00:07:03,170 So maybe let's start with our paragraph with our amount. 92 00:07:03,310 --> 00:07:05,380 So we're gonna have class name. 93 00:07:05,560 --> 00:07:10,840 We're gonna have Item Amount class and then in here we're just gonna display our amount. 94 00:07:11,620 --> 00:07:13,040 Let's write down our amount. 95 00:07:13,120 --> 00:07:18,200 So we should have the amount of items that we have in the cart for that particular item. 96 00:07:18,280 --> 00:07:26,500 And then like I said we're gonna have a button button like so again we can add type of button type of 97 00:07:26,500 --> 00:07:28,600 button and for the button. 98 00:07:28,600 --> 00:07:36,340 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 99 00:07:36,340 --> 00:07:38,290 reactor icons let's say right. 100 00:07:38,320 --> 00:07:43,090 Yes we should have the button but then of course we need to add two things we need to add a class name 101 00:07:43,530 --> 00:07:44,020 and you're not. 102 00:07:44,020 --> 00:07:49,730 Before I do that I'm going to copy paste it and I'm going to place it right after the paragraph. 103 00:07:49,780 --> 00:07:52,900 So when we say that there's gonna be a different Phantasm icon. 104 00:07:53,590 --> 00:07:57,190 So there's gonna be a f a angled down. 105 00:07:57,190 --> 00:08:01,420 And then once I have added these changes now I'm going to add the classes as well as on click. 106 00:08:01,960 --> 00:08:09,130 So let's write the class name then we're looking for cart median amount median. 107 00:08:09,130 --> 00:08:10,240 So those are the classes. 108 00:08:10,540 --> 00:08:15,130 And then also let's set up the on click so click event listener. 109 00:08:15,130 --> 00:08:23,170 Again we're gonna do the same thing like we did with remove where there's gonna be a animals are a function 110 00:08:23,560 --> 00:08:31,000 and then within the anonymous hero function let's just write mount increased increase like so. 111 00:08:31,060 --> 00:08:34,690 And then four degrees button almost everything is gonna be the same. 112 00:08:34,690 --> 00:08:36,510 Who are we still gonna have a class name amount. 113 00:08:36,510 --> 00:08:37,290 Button. 114 00:08:37,370 --> 00:08:39,190 Then 40 on click. 115 00:08:39,370 --> 00:08:41,100 The amount is going to be decreased. 116 00:08:41,110 --> 00:08:47,730 So I'm just gonna grab these two right now and then we're gonna add them for our second button. 117 00:08:47,790 --> 00:08:48,900 What's copy pasted. 118 00:08:49,290 --> 00:08:50,890 And we're the right amount. 119 00:08:50,890 --> 00:08:53,910 Decreased decreased. 120 00:08:54,100 --> 00:08:54,870 Let's say it. 121 00:08:54,910 --> 00:08:58,720 And then once we press the button we have amount decreased. 122 00:08:58,720 --> 00:09:04,070 And then of course once we press on the down button and then we have amount decreased.