1
00:00:01,030 --> 00:00:01,630
Welcome back.

2
00:00:02,080 --> 00:00:07,390
Now, what I'm going to do is that I'm going to work on the total of products that we have, the total

3
00:00:07,390 --> 00:00:13,120
amount and the total amount of money that the user or the customer will pay.

4
00:00:13,570 --> 00:00:18,340
But before I do so, let me show you how we can add more items to the card.

5
00:00:18,340 --> 00:00:23,650
So here in the card attached email, you can copy this item.

6
00:00:23,650 --> 00:00:26,050
As you can see, the item starts from the SDR.

7
00:00:26,560 --> 00:00:28,750
From this the AR all the way to the end of this.

8
00:00:28,750 --> 00:00:29,170
The AR.

9
00:00:29,170 --> 00:00:30,790
You can close this tr.

10
00:00:31,860 --> 00:00:40,230
This one and actually lead me up in it because I need to show you the complete guide.

11
00:00:40,230 --> 00:00:41,040
So this is the guide.

12
00:00:41,610 --> 00:00:50,150
If you copy this and then if you pasted the main law here one and then two times and then if you had

13
00:00:50,160 --> 00:00:56,340
been over to the browser and refresh, you'll find that now we have free element of free products in

14
00:00:56,340 --> 00:00:56,760
the cart.

15
00:00:57,300 --> 00:00:59,460
Now let's work on the total amount.

16
00:00:59,670 --> 00:01:01,290
So to what?

17
00:01:01,410 --> 00:01:02,030
The total amount?

18
00:01:02,040 --> 00:01:04,320
I'm going to eat another table below this table.

19
00:01:04,530 --> 00:01:09,050
Below this table I'm going to use here, create a new table for the total.

20
00:01:09,060 --> 00:01:10,680
I'm going to sit here table.

21
00:01:11,160 --> 00:01:17,070
And this table this table is going to contain is going to be surrounded first.

22
00:01:17,760 --> 00:01:18,620
So I'm going to create first.

23
00:01:18,630 --> 00:01:23,160
And if I'm going to take you there and then inside that there when you remove this table.

24
00:01:23,760 --> 00:01:26,010
Illini inside of that table.

25
00:01:26,670 --> 00:01:31,230
So here, inside this, I'm going to be in the table here.

26
00:01:31,230 --> 00:01:36,880
I'm going to say table and I'm going to first give this day of a class.

27
00:01:36,880 --> 00:01:37,950
So I'm going to say, Hey, class.

28
00:01:39,760 --> 00:01:41,930
Now, then I'm going to say, can't it?

29
00:01:42,190 --> 00:01:43,390
This is going to be the total.

30
00:01:44,530 --> 00:01:45,280
Total.

31
00:01:47,470 --> 00:01:51,490
And then inside the table, I'm going to display two things.

32
00:01:52,090 --> 00:02:00,910
I'm going to first display TR And for this TR I'm going to first display the the subtotal I'm going

33
00:02:00,910 --> 00:02:03,880
to see and then subtotal.

34
00:02:05,590 --> 00:02:12,640
So total and then below this total, we need to display the amount of money.

35
00:02:12,640 --> 00:02:19,300
So I'm going to say t r, t d and then the total.

36
00:02:23,130 --> 00:02:24,360
So he had a dollar sign.

37
00:02:27,510 --> 00:02:28,320
And then.

38
00:02:30,600 --> 00:02:32,460
Let me get this dollar sign.

39
00:02:33,600 --> 00:02:36,150
And then here, let's type any number you want.

40
00:02:40,450 --> 00:02:44,320
So here, let me say one, five, five and then we need to display another.

41
00:02:44,320 --> 00:02:53,410
TR So I'm going to say here tr emphasize that the r I'm going to play d d with the total here, the

42
00:02:53,410 --> 00:02:54,310
total amount.

43
00:03:19,410 --> 00:03:21,150
And then here's the complete total.

44
00:03:22,080 --> 00:03:22,740
Let me save.

45
00:03:24,540 --> 00:03:25,800
Lenny had been over to the browser.

46
00:03:28,540 --> 00:03:34,390
And as you can see, we have here the total, here the total and the sum total of it.

47
00:03:34,660 --> 00:03:37,900
But we need to work on CCIS, so I'm going to turn over to CCIS.

48
00:03:41,390 --> 00:03:47,210
And then he says, we need to work on the class that we just created, which was the cart total.

49
00:03:50,340 --> 00:03:50,850
Carte.

50
00:03:54,240 --> 00:03:54,690
Toto.

51
00:03:56,340 --> 00:04:00,510
And then I'm going to give this car turtle a display of legs.

52
00:04:05,500 --> 00:04:09,490
And justify content leaks and.

53
00:04:12,450 --> 00:04:13,980
So why am I doing this?

54
00:04:14,430 --> 00:04:17,150
The reason is because they want to display it on the right side.

55
00:04:17,190 --> 00:04:22,670
Let me refresh and show you how it's going to look like so it's not on the right side yet.

56
00:04:22,680 --> 00:04:28,440
So the problem is that let me make sure that they have given a speaker request class to tell them here,

57
00:04:29,010 --> 00:04:35,610
because what they need to do in order to be displayed on the right side is that I need to fix the table

58
00:04:35,610 --> 00:04:36,150
itself.

59
00:04:36,240 --> 00:04:39,690
So I'm going to say here, cart, total event table.

60
00:04:42,800 --> 00:04:48,890
And for this table, what I'm going to do is that I'm going to change the width and the maximum width.

61
00:04:49,520 --> 00:04:52,310
So the width is going to be 100%.

62
00:04:52,530 --> 00:04:53,600
There's no problem with this.

63
00:04:55,640 --> 00:04:56,390
However.

64
00:04:57,440 --> 00:04:58,070
However.

65
00:05:00,070 --> 00:05:02,260
The maximum width now.

66
00:05:03,520 --> 00:05:04,510
The maximum width.

67
00:05:05,870 --> 00:05:07,070
Then he more of this.

68
00:05:07,790 --> 00:05:15,700
So the maximum with is going to be max with the maximum with is going to be, let's say 500 packs.

69
00:05:18,560 --> 00:05:20,930
And also let's give it a border.

70
00:05:21,050 --> 00:05:23,630
A border border stop.

71
00:05:23,630 --> 00:05:26,510
I'm going to say border, top or the top?

72
00:05:26,810 --> 00:05:28,310
Three peaks.

73
00:05:29,860 --> 00:05:30,550
So let.

74
00:05:34,710 --> 00:05:35,310
Orange.

75
00:05:36,510 --> 00:05:38,880
Let me now show you what this is going to do to the table.

76
00:05:39,330 --> 00:05:42,560
So the table now, as you can see, will be displayed like this.

77
00:05:42,570 --> 00:05:44,760
It's not going to be thick.

78
00:05:44,760 --> 00:05:49,290
It's not going to take the complete screen with, however, we need to shift this table to the right

79
00:05:49,290 --> 00:05:58,200
side and to shift this table to the right side, we need to say key and then last child.

80
00:06:00,480 --> 00:06:04,500
Last child and then next.

81
00:06:06,120 --> 00:06:09,570
Text a line right next to the line.

82
00:06:09,720 --> 00:06:10,980
This is going to display split on the right side.

83
00:06:11,310 --> 00:06:13,350
Also the each.

84
00:06:14,810 --> 00:06:15,560
Last.

85
00:06:17,050 --> 00:06:17,650
Child.

86
00:06:20,650 --> 00:06:21,280
Text.

87
00:06:22,530 --> 00:06:25,460
A line, right?

88
00:06:27,130 --> 00:06:27,600
Let me see.

89
00:06:27,600 --> 00:06:28,630
Even let me refresh.

90
00:06:32,090 --> 00:06:36,890
And as you can see now, the the the price will be displayed on the right side.

91
00:06:37,190 --> 00:06:42,140
However, we still need to take this take this table and display on the right side.

92
00:06:42,410 --> 00:06:43,910
To do this, we need to fix this.

93
00:06:43,910 --> 00:06:52,910
Instead of saying justify sale, we need to say here, justify content, justify content, flex in the

94
00:06:52,910 --> 00:06:53,900
justified content.

95
00:06:53,900 --> 00:06:56,090
Flex end will take was able to the right site.

96
00:06:56,120 --> 00:06:58,280
Let me show you that now.

97
00:06:59,680 --> 00:07:05,160
So as you can see now, the table is has been taken and is now being displayed on the right side.

98
00:07:05,560 --> 00:07:07,450
This is what I wanted to display.

99
00:07:07,450 --> 00:07:09,930
And you can see it's going to display this up total.

100
00:07:10,510 --> 00:07:16,270
And you can you can only display the total if you wish to display only the total.

101
00:07:17,260 --> 00:07:18,550
So this is how it works.

102
00:07:19,390 --> 00:07:22,040
Finally, I'm going to display a let me check first.

103
00:07:22,040 --> 00:07:27,640
So the responsiveness or the responsiveness is I think it's great.

104
00:07:29,150 --> 00:07:38,330
The only thing that remains is displaying the button at the take the checkout button.

105
00:07:38,340 --> 00:07:45,710
So to display the check out the button, we can display it below the table so we can hear say button.

106
00:07:48,240 --> 00:07:56,760
It's displayed in the first there and then button checkout.

107
00:07:56,790 --> 00:08:06,960
I'm going to first give it class and then I'm going to say N and let's say check out.

108
00:08:09,540 --> 00:08:09,750
In.

109
00:08:12,270 --> 00:08:14,340
And then when I say, here, check out.

110
00:08:23,280 --> 00:08:26,250
So the baton is being displayed on the right side.

111
00:08:27,030 --> 00:08:28,110
So we need to shift it.

112
00:08:29,880 --> 00:08:30,480
So here.

113
00:08:37,250 --> 00:08:37,510
Here.

114
00:08:37,520 --> 00:08:41,360
I'm going to say real check out.

115
00:08:43,410 --> 00:08:43,920
Bottom.

116
00:08:49,480 --> 00:08:51,460
And then display flex.

117
00:08:56,080 --> 00:08:57,520
And just FYI content.

118
00:09:01,580 --> 00:09:02,330
Felix and.

119
00:09:07,220 --> 00:09:09,710
Also, I'm going to change the background color on that same background.

120
00:09:12,740 --> 00:09:19,880
So the vanguard color is going to be the orange color and the color is going to be the white color.

121
00:09:22,460 --> 00:09:30,560
However, we need to add we need to add the display flex content to the directive itself not to think

122
00:09:30,560 --> 00:09:32,780
about it because the button is inside.

123
00:09:32,780 --> 00:09:39,410
A And so here I'm going to say here I'm going to we have two options.

124
00:09:39,710 --> 00:09:47,420
We can we can create another course or we can copy this complete content and paste it below the table.

125
00:09:47,990 --> 00:09:49,400
But let's keep it.

126
00:09:49,580 --> 00:09:50,240
Let's give you something.

127
00:09:50,630 --> 00:09:51,200
I think.

128
00:09:51,500 --> 00:09:52,550
You think your class is better.

129
00:09:52,550 --> 00:09:53,540
I'm it in your class.

130
00:09:53,540 --> 00:09:58,910
I'm going I'm going to say check out.

131
00:10:00,920 --> 00:10:01,660
Shake.

132
00:10:03,200 --> 00:10:06,260
Out container.

133
00:10:08,490 --> 00:10:09,880
And then here I'm going to say.

134
00:10:12,560 --> 00:10:15,200
Check out.

135
00:10:17,580 --> 00:10:18,720
Container.

136
00:10:20,460 --> 00:10:23,250
So for the check out container, I'm going to say this blank flex.

137
00:10:30,920 --> 00:10:32,540
And just FYI content.

138
00:10:34,670 --> 00:10:35,450
Let's end.

139
00:10:43,510 --> 00:10:46,300
And as you can see, the button will be displayed on the right side.

140
00:10:46,840 --> 00:10:47,980
So now it looks amazing.

141
00:10:47,980 --> 00:10:49,540
And now we have this check out.

142
00:10:50,320 --> 00:10:52,660
So we have this check out button, which looks amazing.