1 00:00:00,420 --> 00:00:07,650 Focusing on what we'll do is we'll create our guard container company or for that we need to create 2 00:00:07,650 --> 00:00:13,290 a file name inside the source where the two will name it as. 3 00:00:15,040 --> 00:00:15,940 Can't contain it. 4 00:00:16,540 --> 00:00:17,140 That will be. 5 00:00:20,720 --> 00:00:23,780 Can they not sort this file? 6 00:00:29,090 --> 00:00:33,060 We'll use our separate search, and that will be on ABC's The. 7 00:00:34,610 --> 00:00:36,710 And that will give us. 8 00:00:38,120 --> 00:00:38,720 Function. 9 00:00:42,160 --> 00:00:45,710 And here, first of all, the new to are. 10 00:00:48,920 --> 00:00:53,120 Global context or really important global context to. 11 00:00:54,130 --> 00:00:54,790 It was. 12 00:00:56,550 --> 00:01:02,400 Global context from contextual search it important for us and. 13 00:01:04,540 --> 00:01:06,790 Next, we want to. 14 00:01:08,420 --> 00:01:09,800 We're inside this function. 15 00:01:12,460 --> 00:01:15,490 And we want to create a constant that is. 16 00:01:16,700 --> 00:01:19,430 Not in the capital letters, of course. 17 00:01:22,130 --> 00:01:23,530 And we eat a. 18 00:01:27,060 --> 00:01:28,730 And that couldn't be U.S. 19 00:01:29,490 --> 00:01:30,990 Global context. 20 00:01:35,750 --> 00:01:38,330 Now, first of all, we need to check if. 21 00:01:40,320 --> 00:01:48,500 Inside the container, if I like the count of the product is zero, then we need to display that, uh, 22 00:01:48,570 --> 00:01:52,020 your card is empty or any message related to that. 23 00:01:52,170 --> 00:01:53,430 Like something like that? 24 00:01:54,300 --> 00:01:55,830 So here will write if. 25 00:01:58,020 --> 00:01:58,830 Guide dog. 26 00:01:59,990 --> 00:02:00,590 Lent. 27 00:02:02,060 --> 00:02:04,970 It equal to zero. 28 00:02:08,010 --> 00:02:10,830 So that means we will done what? 29 00:02:13,510 --> 00:02:14,650 We'll return this. 30 00:02:22,440 --> 00:02:32,340 And inside her of We'll Just Return, and it's to and we'll invite your. 31 00:02:33,730 --> 00:02:34,450 Wish list. 32 00:02:35,860 --> 00:02:36,880 And after that. 33 00:02:37,970 --> 00:02:45,980 Lean in is fatigue with a class name of empty, clogged, empty. 34 00:02:49,810 --> 00:02:52,980 Bill Wright is currently Dean. 35 00:02:55,520 --> 00:02:56,120 All right. 36 00:02:58,680 --> 00:03:04,170 This will wrap this all in a section, so. 37 00:03:07,240 --> 00:03:12,670 Factions, Daugaard, that means a section with the class name of God. 38 00:03:13,510 --> 00:03:17,170 And this section would contain all of these things. 39 00:03:19,850 --> 00:03:26,170 The next inside that are done, if we go, so here will be the main main body. 40 00:03:27,210 --> 00:03:31,200 And here is that we will write the GSX. 41 00:03:33,220 --> 00:03:34,870 Inside the written statement. 42 00:03:39,390 --> 00:03:46,500 Inside this return will create a section will not create or do, and that is the reason we want to create 43 00:03:46,500 --> 00:03:49,890 a section with the class name of GA. 44 00:03:51,670 --> 00:03:54,430 Aunt Bev, why I made this mistake. 45 00:03:55,480 --> 00:03:56,560 S.. 46 00:04:01,410 --> 00:04:01,770 Yeah. 47 00:04:02,680 --> 00:04:03,600 S. Dot. 48 00:04:04,730 --> 00:04:05,180 God. 49 00:04:07,250 --> 00:04:08,960 So inside the section. 50 00:04:10,170 --> 00:04:11,610 Oh, I'm getting this. 51 00:04:13,350 --> 00:04:20,400 Inside the section, what we'll do is, first of all, we'll create a header and the panel will see 52 00:04:20,400 --> 00:04:21,330 your wish list. 53 00:04:23,950 --> 00:04:24,410 Harder. 54 00:04:25,480 --> 00:04:28,140 And this will have it, too. 55 00:04:28,510 --> 00:04:31,600 And that H2 will say your. 56 00:04:33,140 --> 00:04:34,100 Wish list. 57 00:04:40,320 --> 00:04:41,610 And after the harder. 58 00:04:42,770 --> 00:04:51,620 We'll have our live, which will map all of the data from the database or from the API or whatever. 59 00:04:52,130 --> 00:04:53,600 We will be using. 60 00:04:54,140 --> 00:04:55,370 OK, so. 61 00:04:57,000 --> 00:05:03,150 You're after your wish list and after this will continue in this section itself. 62 00:05:03,850 --> 00:05:11,240 So after the handover, we'll have all of it, so we'll write our David. 63 00:05:14,020 --> 00:05:19,950 The insiders will write it down, so that's why I'm providing this column with us, so we'll map. 64 00:05:23,580 --> 00:05:24,180 But. 65 00:05:25,910 --> 00:05:34,190 We need to create another component before moving to this, because we want a component that will contain 66 00:05:34,190 --> 00:05:42,860 the item and that will that will be like holding the values for each different item. 67 00:05:43,400 --> 00:05:47,930 For that, we need to create another component and we'll call it card item. 68 00:05:48,860 --> 00:05:50,660 OK, so we can do that. 69 00:05:50,840 --> 00:05:57,530 But as we are on the same file so we can create a $4 billion. 70 00:05:58,570 --> 00:05:59,140 And. 71 00:06:01,600 --> 00:06:04,660 So that footer will be after this. 72 00:06:05,210 --> 00:06:10,990 This day we are leaving as of now, but we'll come back to it and God. 73 00:06:12,850 --> 00:06:13,390 What does? 74 00:06:14,570 --> 00:06:16,520 We can command this line. 75 00:06:17,750 --> 00:06:21,230 And after this comment, we can write the footnote. 76 00:06:22,010 --> 00:06:22,100 OK. 77 00:06:22,820 --> 00:06:28,890 OK, so food or drug and then a horizontal line that the HRT? 78 00:06:29,330 --> 00:06:35,240 Remember, this is a self-closing tag, just like B R and image tag HRT is also. 79 00:06:37,030 --> 00:06:40,180 Then we'll have a day with. 80 00:06:41,700 --> 00:06:43,560 OK, last name of Card Total. 81 00:06:44,820 --> 00:06:53,370 And inside the card total, we'll have an itch for and that itch for will see total. 82 00:06:55,460 --> 00:06:56,330 Total. 83 00:06:57,560 --> 00:06:59,450 And we'll have a span in here. 84 00:07:00,670 --> 00:07:02,320 Inside the span will have. 85 00:07:03,130 --> 00:07:04,990 Okay, let me grab the rupee symbol. 86 00:07:06,850 --> 00:07:09,640 So where is the rupee symbol headed? 87 00:07:09,670 --> 00:07:10,720 It's OK. 88 00:07:11,770 --> 00:07:17,620 So right now, the total, we are hard coating it, we're not getting it from anywhere, so that will 89 00:07:17,620 --> 00:07:20,260 be zero point zero zero. 90 00:07:22,050 --> 00:07:27,350 OK, and next, we'll have a button, so that will be for clearing. 91 00:07:27,370 --> 00:07:27,870 OK, OK. 92 00:07:28,810 --> 00:07:29,260 OK. 93 00:07:29,360 --> 00:07:33,040 So after this, Dave? 94 00:07:35,450 --> 00:07:36,590 In the folder itself. 95 00:07:36,680 --> 00:07:38,060 Yeah, and the paper itself. 96 00:07:38,780 --> 00:07:48,500 So inside of this will have a button and that button will have a class name and a class name would be. 97 00:07:51,000 --> 00:07:58,380 Name would be button clear, but like meet the End is near between. 98 00:07:59,490 --> 00:08:09,450 And what this will do is will create will right clear guard here and will provide an on click function 99 00:08:09,450 --> 00:08:15,150 to this part and like whenever the user clicks this button, like something should happen, otherwise 100 00:08:15,150 --> 00:08:16,260 that would be useless. 101 00:08:16,420 --> 00:08:16,740 OK. 102 00:08:17,310 --> 00:08:21,120 We will provide an on click to it and. 103 00:08:22,720 --> 00:08:25,810 As of now, we are just providing it in a funk. 104 00:08:25,950 --> 00:08:31,660 We are just passing a function inside this and that function will just console log. 105 00:08:34,000 --> 00:08:35,860 Small thought log. 106 00:08:37,880 --> 00:08:38,690 Clear cut. 107 00:08:43,230 --> 00:08:48,150 Like, definitely, we are going to add functionality to this button of clearing out a card, but as 108 00:08:48,150 --> 00:08:51,420 of now, we are just going to check if it's working or not. 109 00:08:51,720 --> 00:08:58,620 And the best way to check or test anything in JavaScript or debug is the console. 110 00:08:59,550 --> 00:09:01,170 So control the clock. 111 00:09:04,140 --> 00:09:07,600 OK, so ahead this deal, this is for the cards. 112 00:09:08,010 --> 00:09:13,170 Let me just read a comment for so it will be easier for us to understand like. 113 00:09:14,510 --> 00:09:17,570 Which is the cart and which is the like, whatever. 114 00:09:25,040 --> 00:09:30,920 This devrait that will be fought on court and inside this will pass our car component. 115 00:09:31,040 --> 00:09:38,360 But for that, we need to, first of all, create a card card card component and use the card item component 116 00:09:38,360 --> 00:09:45,110 that will be responsible for holding like each card, each item's friendly. 117 00:09:46,670 --> 00:09:49,010 Separately, we have to learn differently separately. 118 00:09:49,880 --> 00:09:54,650 So that will component that will create in a while. 119 00:09:55,370 --> 00:09:59,420 So let me just see if everything is done here. 120 00:09:59,450 --> 00:09:59,870 Yeah. 121 00:10:01,150 --> 00:10:04,570 So next, we'll create the cart item component.