1 00:00:00,360 --> 00:00:08,150 Not bad, we've got two components out of the way and now let's tackle the big one, the cart item, 2 00:00:08,520 --> 00:00:14,790 and let's do it slowly step by step, just so we are still on the same page. 3 00:00:15,240 --> 00:00:21,900 And as far as the imports we've got react, we have styled components, we have format price since, 4 00:00:21,900 --> 00:00:23,850 of course, our want to format the price. 5 00:00:24,240 --> 00:00:27,300 Now, I'll also use the amount of buttons. 6 00:00:27,570 --> 00:00:31,680 So something that we used in the add to cart component. 7 00:00:32,010 --> 00:00:37,920 And we'll have to do a little bit of logic over here as well, since it is looking for three values 8 00:00:38,310 --> 00:00:45,300 and then we have a trashcan which is just going to be in a button and then use court context, because 9 00:00:45,300 --> 00:00:52,020 when I would want to do is grab two functions out of the context in the car item. 10 00:00:52,050 --> 00:00:58,770 I would want to use the function of remove item so I'll be able to remove the item as well as the toggle 11 00:00:58,770 --> 00:00:59,200 amount. 12 00:00:59,490 --> 00:01:01,190 So check it out in a complete project. 13 00:01:01,200 --> 00:01:03,720 Notice we have this option of removing the item. 14 00:01:03,990 --> 00:01:08,880 Now, again, there is no functionality, but I might as well those functions. 15 00:01:09,720 --> 00:01:17,550 On to the item, since I wouldn't want to hop back and forth and also we have this option of changing 16 00:01:17,550 --> 00:01:17,950 the amount. 17 00:01:18,210 --> 00:01:23,630 Now, this is going to be the case where, of course, we'll have to pass in those functions to amount 18 00:01:23,640 --> 00:01:24,060 buttons. 19 00:01:24,060 --> 00:01:31,260 Because keep in mind, if you remember when we were setting up a button, we're looking for three functions, 20 00:01:31,410 --> 00:01:33,270 increase, decrease and Learmont. 21 00:01:33,510 --> 00:01:38,430 So when we were setting up add the cart, of course, we set up those functions in that compartment 22 00:01:38,700 --> 00:01:42,810 and we'll have to do something similar here as well. 23 00:01:43,230 --> 00:01:50,760 So now let me navigate back to the cart item and I'll just start by grabbing my two functions out of 24 00:01:50,760 --> 00:01:53,090 the cart context. 25 00:01:53,340 --> 00:01:58,980 So concept and then let's say remove item and then toggle. 26 00:01:59,670 --> 00:02:02,250 So those were the two functions that we used over there. 27 00:02:02,490 --> 00:02:06,260 And that will be equal to my used car context. 28 00:02:06,570 --> 00:02:09,450 And then let's set up two placeholder functions. 29 00:02:10,510 --> 00:02:15,680 The government won't do much, but we're going to go with an increase. 30 00:02:16,330 --> 00:02:19,800 OK, so now we're not looking for any parameters. 31 00:02:19,840 --> 00:02:23,260 We're just going to be a nice little function. 32 00:02:23,680 --> 00:02:26,650 And as far as the functionality, I said nothing in there. 33 00:02:26,920 --> 00:02:29,410 And then the same will be for a decrease. 34 00:02:29,720 --> 00:02:35,440 We're just setting this up because I would want to pass them in into the amount of buttons. 35 00:02:35,440 --> 00:02:39,030 And then eventually, of course, we'll set up the logic here as well. 36 00:02:39,430 --> 00:02:44,200 And once I have both of these functions, I would want to work on my return so so that I would want 37 00:02:44,200 --> 00:02:46,060 to return a wrapper. 38 00:02:46,450 --> 00:02:54,850 And instead of the wrapper, one set up a div with a class of last name of the title, and then there 39 00:02:54,850 --> 00:02:59,050 is going to be a price amount and all that. 40 00:02:59,320 --> 00:03:04,390 Now the reason why we're setting up this way, because if you take a look at the success, there's going 41 00:03:04,390 --> 00:03:06,100 to be a grid layout. 42 00:03:06,490 --> 00:03:07,420 So that's important. 43 00:03:07,420 --> 00:03:09,280 Don't place everything within the title. 44 00:03:09,690 --> 00:03:14,860 There's only going to be certain things in the title and then the rest of them will be separate columns. 45 00:03:15,130 --> 00:03:21,820 Now, there's also one Gotcher where will display price technically in two places, and I'll cover that 46 00:03:21,820 --> 00:03:23,800 more once we get there. 47 00:03:24,100 --> 00:03:31,360 So as far as the tile, well, now, since I know that I passed in everything that was coming from the 48 00:03:31,390 --> 00:03:37,390 item, from my car item into my component as a prop, of course, I would just need to structure it 49 00:03:37,390 --> 00:03:37,840 correct. 50 00:03:38,170 --> 00:03:40,280 And we essentially were looking for it. 51 00:03:40,850 --> 00:03:47,310 We're looking for the image, name, color and price as well as the amount. 52 00:03:47,420 --> 00:03:50,670 OK, so so then let's scroll down. 53 00:03:50,980 --> 00:03:58,270 And as far as the return, I'm going to start with an image where in the source I'll have my image and 54 00:03:58,300 --> 00:04:05,020 then for alternative, which just going to have my name like so so let's say we should have something 55 00:04:05,020 --> 00:04:09,170 on a screen since we have already two items in and the artist. 56 00:04:09,280 --> 00:04:15,560 Now keep in mind, this is a small screen, OK, and that is very, very important. 57 00:04:15,820 --> 00:04:22,870 You see the differences and then right next to this deforms or image, I guess I'm going to place my 58 00:04:22,870 --> 00:04:31,570 div with a five of class name of name, and instead of it, I would just want to display my name. 59 00:04:31,840 --> 00:04:37,510 And then I also want to display the current color, because remember, I know I said this before, but 60 00:04:38,080 --> 00:04:43,600 for every item we multiple colours and we'll treat them as separate items in the cart. 61 00:04:43,620 --> 00:04:50,080 That's why we go with a paragraph with a class of color and we just type color and color. 62 00:04:51,040 --> 00:04:57,820 And then let's add a spine and in here, since I would want to add that color, whatever it is, again, 63 00:04:57,820 --> 00:05:05,260 I'll use that in line set setup where we go with style and we just say background and we set it equal 64 00:05:05,260 --> 00:05:11,350 to color, something we have done already for the buttons and some other components as well. 65 00:05:11,650 --> 00:05:12,620 So let's say it. 66 00:05:12,970 --> 00:05:14,120 Let's see how it's going to look. 67 00:05:14,140 --> 00:05:17,560 Well, see, now, of course, we have our color. 68 00:05:17,800 --> 00:05:24,300 And after the paragraph, I'm going to set up my heading five with a class name of price small. 69 00:05:24,670 --> 00:05:27,050 So class name price small. 70 00:05:27,280 --> 00:05:34,450 So since there's two layouts, we have small screen layout and then the big screen layout, essentially 71 00:05:34,480 --> 00:05:37,680 I will hide this one using the success. 72 00:05:37,870 --> 00:05:40,510 So there's going to be two places where we render a price. 73 00:05:40,940 --> 00:05:48,910 So on here, I'm going to go with format price and I will pass in the actual price because remember, 74 00:05:48,910 --> 00:05:52,510 we're getting that from the props like so. 75 00:05:52,750 --> 00:05:59,440 But then once you go to the bigger screen, notice how essentially will hide it because eventually will 76 00:05:59,670 --> 00:06:01,360 be displayed over here. 77 00:06:01,510 --> 00:06:02,510 That's why I don't freak out. 78 00:06:02,770 --> 00:06:05,890 We have two places where we render the price. 79 00:06:06,130 --> 00:06:08,500 So this one here is going to be for the small screen. 80 00:06:08,500 --> 00:06:11,650 And we had that once we get to the big screen. 81 00:06:12,370 --> 00:06:19,180 So we have our div that was our tile that are essentially our first column and I would want to set up 82 00:06:19,420 --> 00:06:19,990 the price. 83 00:06:20,230 --> 00:06:24,130 So again, this is going to be shown only once we get the big screen. 84 00:06:24,670 --> 00:06:29,040 So we go with having five class name and we're going with price. 85 00:06:29,560 --> 00:06:32,080 And of course, again, we need to format the price. 86 00:06:32,620 --> 00:06:34,830 So we display nicely our price. 87 00:06:35,230 --> 00:06:36,940 So let's save that one. 88 00:06:37,270 --> 00:06:44,210 And then remember the amount buttons, the component that we used in the card component. 89 00:06:44,320 --> 00:06:46,770 Now, of course, I would want to set it up here as well. 90 00:06:47,140 --> 00:06:53,350 So we go with Amoun Buttons and it was looking for three values as far as the props we needed to pass 91 00:06:53,350 --> 00:06:58,060 in the amount which is going to be equal to the amount that is coming up as a prop. 92 00:06:58,460 --> 00:07:04,030 Then we have increase and decrease functions and for the time being, we're passing in these placeholders. 93 00:07:04,270 --> 00:07:11,580 So not doggle amount, we will invoke it here in the increase we just pass in our placeholders. 94 00:07:11,830 --> 00:07:17,400 So we say increase is equal to increase and decrease is equal to a decrease. 95 00:07:17,740 --> 00:07:25,300 And I'll close my amount component and this and of course there is no Hmoud component because it is 96 00:07:25,300 --> 00:07:26,410 a Mountbatten's. 97 00:07:26,410 --> 00:07:30,010 My apologies and I would want to display subtotal. 98 00:07:30,870 --> 00:07:34,150 As well as the remove card button. 99 00:07:34,620 --> 00:07:40,650 So right after the amount buttons, since, again, we have a column layout, I'm going to go with heading 100 00:07:40,650 --> 00:07:46,440 five of class, name of subtotal and kind of format the price. 101 00:07:46,440 --> 00:07:51,200 But in this case, I would want to multiply the price by the amount. 102 00:07:51,780 --> 00:07:55,530 So how many items that have multiplied by the price? 103 00:07:55,560 --> 00:07:59,160 So again, for my price we pass in price. 104 00:08:00,100 --> 00:08:08,740 Times and the amount, so we save some again, we're not going to display that on a small screen, only 105 00:08:08,740 --> 00:08:12,190 once we get to the big screen, then we can see our subtotal. 106 00:08:12,530 --> 00:08:16,780 That is not on purpose because we don't have much real estate over here. 107 00:08:17,050 --> 00:08:23,110 And then lastly, the button so we go with our button type is not going to be submit. 108 00:08:24,040 --> 00:08:26,470 It's actually going to be a button. 109 00:08:27,890 --> 00:08:33,200 Then we're going to go with the class name, a little bit of styling and let's set up our more. 110 00:08:34,340 --> 00:08:42,320 And hyphen between and then once we click, I would want to invoke my remove item, and if you remember 111 00:08:42,320 --> 00:08:47,270 in the card context, we were looking for the idea that there's no functionality, but we might as well 112 00:08:47,270 --> 00:08:50,870 set everything up since it just makes a bit more sense. 113 00:08:50,900 --> 00:08:57,170 So on click and then we need to pass and of course the arrow function and let's just call it or move 114 00:08:57,170 --> 00:09:00,980 item and then pass in the idea that we're getting from the prop. 115 00:09:01,310 --> 00:09:03,190 I do have the class, I have the type. 116 00:09:03,470 --> 00:09:06,970 And the last thing that I just need to add is the icon. 117 00:09:07,340 --> 00:09:13,190 So I go with the icon that are imported from icons and we should be in good shape. 118 00:09:13,880 --> 00:09:16,670 Now, of course, we have our icon icon. 119 00:09:16,670 --> 00:09:18,490 We have multiple layouts. 120 00:09:18,980 --> 00:09:21,560 We have one for small screen and one for big screen. 121 00:09:21,890 --> 00:09:23,600 So this is going to be the big screen layout. 122 00:09:24,320 --> 00:09:31,030 And then once we get to the small screen, this is going to be our second layout. 123 00:09:31,490 --> 00:09:37,500 So we're pretty much done with our UI as far as how the card page is going to look like. 124 00:09:37,800 --> 00:09:42,500 So now, of course, we just need to start adding functionality because at the moment I can click all 125 00:09:42,500 --> 00:09:44,570 day long and nothing is happening. 126 00:09:44,570 --> 00:09:44,990 Correct. 127 00:09:45,200 --> 00:09:48,650 As well as this playing well, what are our totals?