1 00:00:00,420 --> 00:00:06,990 OK, so let us now go ahead and create the cart item component for that, we need to create another 2 00:00:06,990 --> 00:00:08,940 file with the name. 3 00:00:09,930 --> 00:00:13,790 Of card item, Lord Jesus will create that, and I'm it. 4 00:00:14,490 --> 00:00:15,330 Let us created. 5 00:00:26,790 --> 00:00:30,710 There's the mistake of war card I don't use. 6 00:00:34,520 --> 00:00:37,020 Inside, Scott Item, gorgeous. 7 00:00:37,170 --> 00:00:38,430 So first of all. 8 00:00:40,250 --> 00:00:40,850 We'll. 9 00:00:42,830 --> 00:00:48,800 Get a boilerplate code with this snippet, search out f c e. 10 00:00:50,700 --> 00:00:54,090 This canister leaked out of functional component. 11 00:00:54,660 --> 00:01:05,310 That's right, that is odd AFC like react after React A4 for ATL for functional component would export 12 00:01:05,520 --> 00:01:14,130 like E in the end like signifies that with export and if we just don't, if we don't provide an E, 13 00:01:14,160 --> 00:01:16,950 we'll just get a function without an export. 14 00:01:17,520 --> 00:01:19,350 So odd AFC e. 15 00:01:19,980 --> 00:01:21,740 That is what it is. 16 00:01:22,650 --> 00:01:30,150 So now, first of all, let me just import the global context, which we created in the context of the 17 00:01:30,150 --> 00:01:30,930 gas file. 18 00:01:31,710 --> 00:01:41,910 So we'll import like import and we'll provide a curly braces use global context and it auto importer 19 00:01:41,910 --> 00:01:42,660 for us. 20 00:01:42,670 --> 00:01:43,750 So that's the best part. 21 00:01:43,770 --> 00:01:46,260 Like all, the importing is the best part. 22 00:01:46,260 --> 00:01:52,860 It saves a lot of time, not a lot of time, but it's fun to use because there will be posting some 23 00:01:52,860 --> 00:01:59,860 of the props inside this function and those props will be expected while getting it done. 24 00:01:59,920 --> 00:02:10,740 So there would be an IED and it means and Dido and rice amount. 25 00:02:11,150 --> 00:02:18,600 So these are the five things which we are going to pass as a prop inside this particular component. 26 00:02:19,290 --> 00:02:20,520 So next. 27 00:02:21,720 --> 00:02:24,540 We'll ride constant here. 28 00:02:25,660 --> 00:02:27,220 Oh, did I need something? 29 00:02:27,580 --> 00:02:27,850 Yeah. 30 00:02:29,500 --> 00:02:39,240 I will write a constant here, and this will be an object basically, so that will be containing this 31 00:02:39,430 --> 00:02:42,130 will increase. 32 00:02:42,160 --> 00:02:52,000 Now I'll explain this in a minute that we just finished off that declaring Bartlett All-Girl amount. 33 00:02:56,310 --> 00:03:04,010 And this will be equal to like this in Article two, but this will be getting from U.S. 34 00:03:04,440 --> 00:03:06,180 Global context. 35 00:03:09,250 --> 00:03:17,410 Removal here that will be used to remove a product from the garden next will have increased that will 36 00:03:17,410 --> 00:03:23,860 be used to increase the number of like increase the quantity of the product. 37 00:03:23,860 --> 00:03:31,390 Like that how many quantity, how much pieces we are wanting decreases to decrease that particular number 38 00:03:31,390 --> 00:03:35,560 and the total amount is to be get the amount. 39 00:03:37,950 --> 00:03:42,870 Next, we'll go to the written statement in the written statement. 40 00:03:43,180 --> 00:03:46,510 We'll need an article tagged in order to. 41 00:03:47,750 --> 00:03:49,470 An article, indeed. 42 00:03:49,490 --> 00:03:57,890 And so that would be art, the golf course, northern golf, so I keep on forgetting this. 43 00:03:58,950 --> 00:03:59,790 Article? 44 00:04:00,800 --> 00:04:04,940 Dart and Dart will give the class name, so that will be carved. 45 00:04:06,100 --> 00:04:09,950 If an item fired did not work. 46 00:04:13,430 --> 00:04:14,570 Okay, it worked. 47 00:04:15,080 --> 00:04:18,980 Article tagged with the class name of God item. 48 00:04:19,790 --> 00:04:25,490 So next, we'll first of all, what we'll have is we'll have an image of the product, right? 49 00:04:27,530 --> 00:04:35,490 But that will be an image tag that will have to write an image tag AMG. 50 00:04:36,170 --> 00:04:39,240 And the source will be dynamic here. 51 00:04:39,260 --> 00:04:43,700 It's not static, are not hard coding and we are getting it from somewhere. 52 00:04:44,240 --> 00:04:47,540 And whether this somewhere, it's somewhere. 53 00:04:48,640 --> 00:04:50,620 Not in this file, actually. 54 00:04:51,130 --> 00:04:57,820 So IMG and let me are the artwork, so that will be title. 55 00:04:59,550 --> 00:05:05,670 Cost that can be seen for like images, but I want things to be as clear as possible. 56 00:05:06,240 --> 00:05:13,920 So after this image tag inside the article, we'll have a div and inside this day we'll be providing 57 00:05:13,920 --> 00:05:18,750 other information such as title price and things like that. 58 00:05:19,270 --> 00:05:19,620 OK. 59 00:05:21,630 --> 00:05:25,960 So what we will do is will create a day here. 60 00:05:28,420 --> 00:05:37,720 The do will create and eat food, and there will be a dynamic text inside the city hall and their dynamic 61 00:05:37,720 --> 00:05:40,360 text would be the title of the product. 62 00:05:43,390 --> 00:05:43,670 I. 63 00:05:46,770 --> 00:05:56,490 And after that, we'll have and another pitch for that will be for the price. 64 00:06:00,440 --> 00:06:02,510 That will also have a class name. 65 00:06:03,800 --> 00:06:07,490 That last name would be Item Price. 66 00:06:09,870 --> 00:06:13,050 And inside this will have the. 67 00:06:15,180 --> 00:06:17,610 The amount basically of the product. 68 00:06:18,690 --> 00:06:28,110 And before that, that will be followed by a rupee symbol that will be hard coded for like every amount 69 00:06:28,680 --> 00:06:33,180 that would be a rupee that would be a rupee symbol before the integer value. 70 00:06:33,250 --> 00:06:35,070 So that's what I've hardcoded that. 71 00:06:35,800 --> 00:06:47,490 Okay, next we'll have a button to remove the like product from our bag of wish lists, but a button 72 00:06:47,490 --> 00:06:48,150 off button. 73 00:06:48,990 --> 00:06:51,240 So we'll have a button. 74 00:06:53,360 --> 00:06:54,990 That will also have a class name. 75 00:06:57,580 --> 00:06:59,740 And that last name will be the move. 76 00:07:01,500 --> 00:07:02,370 Beatty and. 77 00:07:03,950 --> 00:07:08,570 And of course, that will have on click function. 78 00:07:09,080 --> 00:07:12,050 So we will leave it on click. 79 00:07:13,350 --> 00:07:13,710 Being. 80 00:07:14,940 --> 00:07:16,830 Bath and inland function do it. 81 00:07:18,450 --> 00:07:19,920 So that will be. 82 00:07:21,650 --> 00:07:24,570 Remove an I.D.. 83 00:07:26,070 --> 00:07:32,370 It specifies the I.D. of the product, like how it will know which product you want to lead. 84 00:07:32,400 --> 00:07:39,360 So this idea will specify which particular product you want to delete from your cart or your wish list. 85 00:07:40,330 --> 00:07:47,740 So inside this world, we can try to move on, you can even write, delete or never, you can even provide 86 00:07:47,740 --> 00:07:56,170 a symbol here of miners or rights symbol or delete, like recycle bin icon, whatever, whatever like 87 00:07:56,530 --> 00:07:57,850 that's totally up to you. 88 00:07:58,860 --> 00:08:08,280 So after the button, we'll have another day, which will be containing the buttons to increase or decrease 89 00:08:08,280 --> 00:08:16,710 the quantity of the product after the death will have on other device and that will have. 90 00:08:19,030 --> 00:08:24,040 Basically, you're not giving it a costume, will provide some in line styling to it, like the inland 91 00:08:24,050 --> 00:08:24,730 CSIS. 92 00:08:25,690 --> 00:08:26,230 So. 93 00:08:27,190 --> 00:08:34,240 And give style here to provide some inland styling and that will be display. 94 00:08:39,630 --> 00:08:41,610 And I think that sort. 95 00:08:42,650 --> 00:08:47,750 Next, we will be having two buttons, one to increase in, one to decrease. 96 00:08:50,870 --> 00:08:52,520 First will read the decrees part. 97 00:08:55,290 --> 00:08:58,290 It could ease among. 98 00:09:00,650 --> 00:09:08,210 And will come in this particular line so that we know that the below board is to decrease the amount 99 00:09:09,890 --> 00:09:18,290 or decrease the amount, and this will need a button like whenever we click that button. 100 00:09:19,010 --> 00:09:22,040 The amount like the quantity should be decreased by one. 101 00:09:22,850 --> 00:09:25,220 So let's say a button. 102 00:09:26,440 --> 00:09:36,580 And this button will have a class name, of course, to get us yeses, and that will be among. 103 00:09:38,380 --> 00:09:38,740 But. 104 00:09:42,280 --> 00:09:46,340 And this will have an on click like whenever we click this button. 105 00:09:46,360 --> 00:09:47,770 What should be the function? 106 00:09:48,790 --> 00:09:50,320 So on, click. 107 00:09:51,130 --> 00:09:52,330 I did a mistake. 108 00:09:54,970 --> 00:09:55,720 On Click. 109 00:09:57,100 --> 00:10:03,070 And this will expect function, so will give it an inline factory function. 110 00:10:04,440 --> 00:10:07,080 And will you give double amount? 111 00:10:09,750 --> 00:10:18,120 OK, now what does this double amount, this toggle amount will change the value of the subtotal, which 112 00:10:18,120 --> 00:10:19,170 is presented below. 113 00:10:19,770 --> 00:10:25,650 Like, if we increase one quantity score, that will also increase the increase the amount. 114 00:10:25,860 --> 00:10:26,250 OK. 115 00:10:27,090 --> 00:10:29,610 And if we decrease, that will decrease the amount. 116 00:10:29,760 --> 00:10:32,940 This is what the total amount will do, basically. 117 00:10:33,840 --> 00:10:37,490 So the total amount will expect some arguments. 118 00:10:37,490 --> 00:10:41,100 So we'll give it an idea and this. 119 00:10:42,340 --> 00:10:43,000 Next here. 120 00:10:44,300 --> 00:10:48,950 As an argument and next, will, right? 121 00:10:50,080 --> 00:11:00,160 Inside this button, I am going to repeat that, oh, not being a Peter B dog, OK, it's not taking 122 00:11:00,370 --> 00:11:01,090 Bill Typekit. 123 00:11:02,840 --> 00:11:03,290 OK. 124 00:11:04,220 --> 00:11:09,090 And then inside the bag, I'm giving some in line, see a sister. 125 00:11:10,740 --> 00:11:11,310 I'll. 126 00:11:14,460 --> 00:11:22,260 Basically, just changing the font size and the font size, font size will be many pixels. 127 00:11:24,790 --> 00:11:25,260 And. 128 00:11:27,020 --> 00:11:33,360 This is to decrease demand, so I'm giving the value like I'm giving the symbol of a hyphen or a minus 129 00:11:33,930 --> 00:11:37,190 while subtraction sign because we want to decrease the. 130 00:11:37,680 --> 00:11:41,460 I will do the same to. 131 00:11:42,520 --> 00:11:48,550 Increase the amount, and we'll copy this part here, and we'll make the changes accordingly, we're 132 00:11:48,550 --> 00:11:50,200 not leaving it as it is. 133 00:11:50,950 --> 00:11:51,790 So. 134 00:11:52,940 --> 00:11:53,950 And we'll try. 135 00:11:55,390 --> 00:12:01,060 Increase amount and work done among Burton would be seen for increase. 136 00:12:01,060 --> 00:12:02,500 Also on Click. 137 00:12:03,620 --> 00:12:10,910 It will be a same and insert instead of this field right in, and that increases the amount, OK? 138 00:12:11,390 --> 00:12:14,690 And inside this minus sign will provide a plus sign. 139 00:12:15,440 --> 00:12:16,460 So that's all. 140 00:12:17,630 --> 00:12:19,820 That's all basic functionality. 141 00:12:20,330 --> 00:12:25,640 Of course, this will not work as of now because we have not controlled the function or something like 142 00:12:25,640 --> 00:12:25,880 that. 143 00:12:26,630 --> 00:12:27,320 And. 144 00:12:29,350 --> 00:12:35,370 So let's spin up our server, know before spinning up the server, let us first imposed this inside 145 00:12:35,380 --> 00:12:37,240 the Scott containers. 146 00:12:38,220 --> 00:12:38,700 So. 147 00:12:39,830 --> 00:12:46,820 And we'll have to map through all the data, like each data, will have a component of its own guard 148 00:12:46,820 --> 00:12:49,910 component of its own inside this Dave. 149 00:12:50,690 --> 00:12:55,940 What we'll do is we'll put out some JavaScript, so we'll provide calibrated. 150 00:12:55,960 --> 00:13:02,450 So we let guard dart map and it will expect a function. 151 00:13:03,440 --> 00:13:06,410 And we are providing an argument of item here. 152 00:13:07,580 --> 00:13:17,030 And then we'll provide the written statement to this mapping function will return in the cart item. 153 00:13:18,080 --> 00:13:24,050 Basically, I have not imported it right now, so that's why it's not giving me an option to auto import. 154 00:13:24,680 --> 00:13:26,480 Bart will import it. 155 00:13:26,780 --> 00:13:31,910 Maybe it gave me an option to import, export, import or not. 156 00:13:32,430 --> 00:13:35,960 Now every key, like every component of your mapping. 157 00:13:35,960 --> 00:13:37,130 So that needs the key. 158 00:13:37,580 --> 00:13:39,560 That would be item totality will be the key. 159 00:13:40,430 --> 00:13:42,560 And now we're using the spread operators. 160 00:13:43,340 --> 00:13:52,850 Now, if you don't put an operator, it basically provides an array or an object and like one by one, 161 00:13:52,850 --> 00:13:58,670 like whatever is present, the content will be rendered here and the name itself justifies. 162 00:13:59,550 --> 00:14:01,730 Okay, so now let me see if. 163 00:14:02,790 --> 00:14:04,560 And let me spin up the server. 164 00:14:06,000 --> 00:14:07,770 And premiums start. 165 00:14:10,770 --> 00:14:13,710 So Osama is running on the spot part. 166 00:14:15,470 --> 00:14:23,000 I realized one thing, nor does one thing that we have not yet imported are container in the AM gorgeous 167 00:14:23,010 --> 00:14:24,830 file, so it will not show up. 168 00:14:25,620 --> 00:14:29,630 So what we need to do is we need to import it in order for us to show it. 169 00:14:30,310 --> 00:14:35,750 OK, so let me go to the audience and let me import the guard container. 170 00:14:36,320 --> 00:14:37,010 That will be the. 171 00:14:42,080 --> 00:14:49,220 Container and it auto imported from below the nearby are import like I include this. 172 00:14:52,680 --> 00:14:53,190 Right. 173 00:14:54,070 --> 00:15:00,120 And they not they'll sell closer, and one more thing, I have to go to the next door and just file 174 00:15:00,120 --> 00:15:02,340 and write some more things. 175 00:15:03,210 --> 00:15:05,400 So first of all, let me just import. 176 00:15:06,600 --> 00:15:14,580 The global context and what will it do is that we have to import the app provider from the context, 177 00:15:14,580 --> 00:15:19,380 and I have to wrap it like some important app. 178 00:15:23,640 --> 00:15:24,330 I know. 179 00:15:27,840 --> 00:15:28,710 One text. 180 00:15:30,270 --> 00:15:30,930 And. 181 00:15:32,690 --> 00:15:39,200 Basically, this will be in the column, this is because there are multiple exports that and we'll wrap 182 00:15:39,200 --> 00:15:42,410 our app in in this. 183 00:15:44,650 --> 00:15:45,300 Providers. 184 00:15:50,170 --> 00:15:50,980 Provide a. 185 00:15:53,260 --> 00:15:58,900 We'll put our app and to this news cut and pasted inside this. 186 00:16:00,420 --> 00:16:02,340 Oh, I did, I missed a. 187 00:16:08,550 --> 00:16:11,190 Now, let us go to the browser and see. 188 00:16:12,810 --> 00:16:13,920 And that is an era. 189 00:16:17,300 --> 00:16:19,620 No, there's no way it's OK. 190 00:16:20,600 --> 00:16:24,770 So are images are not showing up for some reason. 191 00:16:25,610 --> 00:16:26,350 But that's OK. 192 00:16:26,360 --> 00:16:27,260 We'll figure it out. 193 00:16:27,760 --> 00:16:32,120 But this is the basic structure of our project and it looks pretty good. 194 00:16:32,840 --> 00:16:35,570 And we have not provided any value here. 195 00:16:35,600 --> 00:16:36,050 OK. 196 00:16:36,070 --> 00:16:36,660 Okay. 197 00:16:36,710 --> 00:16:37,790 No need to get. 198 00:16:38,090 --> 00:16:39,260 No need to go another. 199 00:16:39,500 --> 00:16:41,870 OK, so this is what how it will look. 200 00:16:41,900 --> 00:16:47,810 Of course, we have not given any functionality so far, but we'll be doing that part in the next review.