1
00:00:09,220 --> 00:00:16,180
Hey, everyone, we are pretty much done with our project and now we just need to format the price and

2
00:00:16,180 --> 00:00:19,510
then activate that yellow spinner loader.

3
00:00:19,750 --> 00:00:22,060
So let's start with the price.

4
00:00:22,420 --> 00:00:24,730
So let's change the quantity to 100.

5
00:00:24,970 --> 00:00:30,670
And as we've seen, if we do this, we have a lot of decimal places.

6
00:00:30,850 --> 00:00:34,660
Now, let's try a thousand, maybe a thousand and two.

7
00:00:35,820 --> 00:00:41,850
And as you can see now, we don't have the thousand separators and we have a lot of decimal places,

8
00:00:42,060 --> 00:00:43,830
which is not good.

9
00:00:44,110 --> 00:00:48,960
So let's go to Visual Studio Code and see what we can do to make this better.

10
00:00:49,020 --> 00:00:52,200
So here we are, just returning the total.

11
00:00:53,330 --> 00:01:02,120
Which is a float, no, we do all the calculations and we are not doing any formatting, so the first

12
00:01:02,120 --> 00:01:07,970
thing we could do here is just apply the two fixed method.

13
00:01:09,450 --> 00:01:16,050
Which is going to round to a given number of decimal places in this case, we just want to round to

14
00:01:16,080 --> 00:01:18,020
two decimal places.

15
00:01:18,150 --> 00:01:22,080
So if we do this, let's go back there and let's try again.

16
00:01:22,560 --> 00:01:24,090
Going to change it to 100.

17
00:01:25,060 --> 00:01:33,100
And now, as you can see, this is much, much better, but if we use one hundred and two again, let's

18
00:01:33,100 --> 00:01:39,090
see now this is much better, but still I'm missing the thousand separator here.

19
00:01:39,580 --> 00:01:46,230
So the way we can do this, there's a better method for this, which is called to local string.

20
00:01:46,750 --> 00:01:48,210
So let's search for this.

21
00:01:48,220 --> 00:01:50,830
So just to look at string.

22
00:01:54,000 --> 00:01:56,310
And we wanted for currency.

23
00:01:59,000 --> 00:02:01,790
So let's go to the Yewtree schools.

24
00:02:04,070 --> 00:02:05,270
Let's go down here.

25
00:02:05,510 --> 00:02:12,440
So, as you can see, we have some parameters that we can pass in this method, so as you can see,

26
00:02:12,440 --> 00:02:15,350
we can choose the option as currency.

27
00:02:17,210 --> 00:02:24,110
Which is going to do exactly what we need, so down here we have an example here, we need to pass the

28
00:02:24,110 --> 00:02:25,400
format we want.

29
00:02:25,400 --> 00:02:34,340
In this case, let's use English, us and for the options, we're going to use style currency and the

30
00:02:34,340 --> 00:02:38,030
currency is actually going to be US dollars.

31
00:02:38,300 --> 00:02:46,580
So just by using this style, it's going to automatically round to two decimal places and include a

32
00:02:46,580 --> 00:02:49,060
thousand separators we want.

33
00:02:49,520 --> 00:02:54,590
So let's copy all this and let's bring it to visual record so we can use what we need.

34
00:03:00,310 --> 00:03:06,850
Just like this, so now, instead of using the two fixed, we are going to use the two local string.

35
00:03:08,570 --> 00:03:10,190
So let's replace it here.

36
00:03:11,870 --> 00:03:21,140
And now, instead of Great Britain, we are going to use English us, and here we don't need to create

37
00:03:21,140 --> 00:03:28,370
a variable for this, we can just pass the options since we are not using a lot of options, we can

38
00:03:28,370 --> 00:03:29,480
just do it like this.

39
00:03:33,720 --> 00:03:36,600
So this is how we use this method.

40
00:03:36,810 --> 00:03:39,120
Let me just erase everything down here.

41
00:03:41,650 --> 00:03:48,850
So, again, we are passing two parameters, the first one is a string with the language, so in this

42
00:03:48,850 --> 00:03:50,580
case it's English US.

43
00:03:50,980 --> 00:03:55,900
The second one is an object that we can pass a few options.

44
00:03:56,110 --> 00:03:58,260
One of the options is the style.

45
00:03:58,450 --> 00:04:03,000
So we are actually working with a currency.

46
00:04:03,520 --> 00:04:10,060
So the style is currency and the currency is not euro, but USD.

47
00:04:10,270 --> 00:04:13,390
If you want, you can research more about this method.

48
00:04:13,390 --> 00:04:21,160
You can just copy this and search on Google and then you will see all the options you have for this

49
00:04:21,160 --> 00:04:24,250
argument, all the options you have for this object.

50
00:04:24,550 --> 00:04:27,190
For now, I know that this is what we need.

51
00:04:27,380 --> 00:04:30,100
So if we do this, let's try again.

52
00:04:31,460 --> 00:04:32,720
Refresh the page.

53
00:04:34,960 --> 00:04:42,640
And now this is much better, but now we don't need this dollar sign here because we already have,

54
00:04:42,760 --> 00:04:51,010
because since we are using currency as the option, this is going to come with the currency sign already.

55
00:04:51,190 --> 00:04:57,430
And this is cool because if we were working with another currency like euro, so let's try changing

56
00:04:57,430 --> 00:04:58,810
it back to euro here.

57
00:05:00,510 --> 00:05:06,150
Refreshing the page, as you can see, it already comes with the symbol, which is cool, but in this

58
00:05:06,150 --> 00:05:08,610
case it's just showing twice.

59
00:05:08,910 --> 00:05:14,010
So what we need to do is just going to the age tml where we have the price.

60
00:05:14,010 --> 00:05:14,670
Here it is.

61
00:05:15,150 --> 00:05:19,590
What I'm going to do is removing the space and removing this symbol.

62
00:05:19,800 --> 00:05:22,140
So now let's see how it shows.

63
00:05:24,340 --> 00:05:32,430
OK, so this is better, let's try now 100 so as you can see, pretty cool, two decimal places.

64
00:05:32,890 --> 00:05:34,000
Let's try.

65
00:05:35,240 --> 00:05:36,500
A thousand and one.

66
00:05:37,800 --> 00:05:42,430
And now we have the thousand separator, we have two decimal places.

67
00:05:42,720 --> 00:05:45,360
Let's try to increase this quantity.

68
00:05:46,420 --> 00:05:47,470
One more zero.

69
00:05:48,380 --> 00:05:56,750
And now, as you can see, we have two thousand separators and the two decimal places, which is exactly

70
00:05:56,750 --> 00:06:01,370
what we needed here, so the price formatting is done.

71
00:06:01,790 --> 00:06:08,750
And now for the yellow loader, if we go back to the elements and we go up here, you will see that

72
00:06:08,750 --> 00:06:14,780
we have an element with a class of refresh loader that has the display of none.

73
00:06:14,900 --> 00:06:21,170
If I remove this, we can see the loader here and I'm going to select this box again.

74
00:06:21,170 --> 00:06:23,170
And now it's not showing anymore.

75
00:06:23,330 --> 00:06:26,420
So the only thing we need to do is hiding and showing.

76
00:06:26,420 --> 00:06:28,490
And you can use Jan for this.

77
00:06:28,670 --> 00:06:35,900
So let's just copy this and going back to Visual Studio, to our scripts, not just so every time we

78
00:06:35,900 --> 00:06:41,780
are going to update the order details, what we can do is before we start doing it.

79
00:06:49,880 --> 00:06:52,250
We can just show the element.

80
00:06:58,750 --> 00:07:04,240
And by the end of it, we can just hide the element.

81
00:07:07,290 --> 00:07:14,610
So let's save this, let's see if we can see the loader, so I'm going to change it now, we can't see

82
00:07:14,610 --> 00:07:18,040
it because this is actually happening too fast.

83
00:07:18,070 --> 00:07:25,740
OK, in the example I showed you, I just used a sad time out just to delayed a little bit.

84
00:07:26,250 --> 00:07:33,270
And in a real life situation, we wouldn't need this because in order to get the price, probably you

85
00:07:33,270 --> 00:07:36,580
would be calling a server to get that price.

86
00:07:37,020 --> 00:07:44,700
So this process would take around half a second or one second and you would actually be able to see

87
00:07:44,700 --> 00:07:45,660
that loader.

88
00:07:45,810 --> 00:07:50,550
So things are happening so fast in our page that we can't even see it.

89
00:07:50,820 --> 00:07:56,250
If you want to simulate a delay, of course, in a real life situation, never do this.

90
00:07:56,250 --> 00:07:58,320
You shouldn't delay anything in our page.

91
00:07:58,320 --> 00:08:00,720
It should be as fast as possible.

92
00:08:01,020 --> 00:08:08,460
But just for our example, if you want to simulate a delay to get the information, you can just do

93
00:08:08,460 --> 00:08:09,570
a set time out.

94
00:08:09,570 --> 00:08:10,320
So window.

95
00:08:13,970 --> 00:08:15,770
That set time out.

96
00:08:18,200 --> 00:08:20,390
And then we need a function.

97
00:08:21,640 --> 00:08:27,730
And the time let's delay half a second, so five hundred millisecond.

98
00:08:33,210 --> 00:08:37,840
So after half a second, then we hide the refresh loader.

99
00:08:38,220 --> 00:08:41,850
Let's see if now we can see it refreshing the page.

100
00:08:42,210 --> 00:08:44,660
And as you can see now we are seeing it.

101
00:08:45,060 --> 00:08:47,670
I'm just going to close the console.

102
00:08:47,730 --> 00:08:48,830
I'm going to click here.

103
00:08:49,170 --> 00:08:52,550
And now we are seeing it for half a second, which is cool.

104
00:08:55,350 --> 00:08:58,830
So everything seems to be working in our project.

105
00:08:59,010 --> 00:09:04,020
Let's keep changing the values a little bit so we can test, let's change it to plan.

106
00:09:04,440 --> 00:09:07,380
So everything seems to be working really well.

107
00:09:07,590 --> 00:09:13,920
Now, before we finish, let's just make a quick test with the calculator to see if the numbers are

108
00:09:13,920 --> 00:09:14,650
accurate.

109
00:09:14,970 --> 00:09:18,740
So in this case, we have a white plain shirt.

110
00:09:19,080 --> 00:09:21,710
So let's go back to that object.

111
00:09:21,870 --> 00:09:25,590
So here we have white plain shirt.

112
00:09:25,740 --> 00:09:29,520
So the price should be five point twelve.

113
00:09:29,760 --> 00:09:31,230
So let's go back to the page.

114
00:09:31,380 --> 00:09:32,960
Let's open the calculator here.

115
00:09:33,270 --> 00:09:35,940
So five point twelve.

116
00:09:37,630 --> 00:09:40,360
We are ordering 1000.

117
00:09:42,970 --> 00:09:48,790
So now we still have to apply the discount, we don't have to increase the price because we are not

118
00:09:48,790 --> 00:09:50,950
choosing the high quality one.

119
00:09:52,140 --> 00:09:55,110
But we need a discount for a thousand units.

120
00:09:56,560 --> 00:10:02,050
So in this case, the discount for a thousand units is 20 percent.

121
00:10:04,200 --> 00:10:07,380
So if we multiply this by point.

122
00:10:08,620 --> 00:10:16,010
Eight, we are going to have 20 percent discount, so this should be the total, which seems to be accurate.

123
00:10:16,030 --> 00:10:17,390
Let's make another test.

124
00:10:17,620 --> 00:10:19,630
Let's try six hundred.

125
00:10:20,670 --> 00:10:21,330
Colored.

126
00:10:24,020 --> 00:10:25,910
And high quality.

127
00:10:29,890 --> 00:10:31,630
So collared plain.

128
00:10:32,620 --> 00:10:35,310
Humorous colored plane.

129
00:10:35,410 --> 00:10:37,630
So this is the unit price.

130
00:10:45,300 --> 00:10:54,800
So six 04, we are ordering six hundred, so here it is now, since we are asking for the high quality,

131
00:10:54,960 --> 00:10:56,070
let's go back there.

132
00:10:57,260 --> 00:11:01,850
If we ask for the high quality, we have a 12 percent increase.

133
00:11:02,920 --> 00:11:06,670
So let's multiply this by one point twelve.

134
00:11:08,910 --> 00:11:09,570
All right.

135
00:11:10,690 --> 00:11:16,210
But we are ordering six hundred, so we have a discount here.

136
00:11:17,600 --> 00:11:25,010
So 600 units, we don't have the 20 percent discount, but we have the 12 percent discount.

137
00:11:25,870 --> 00:11:26,440
So.

138
00:11:29,870 --> 00:11:37,920
Multiply this by point eighty eight to give a 12 percent discount, and this should be the total price.

139
00:11:38,240 --> 00:11:41,480
So the calculations seem to be correct.

140
00:11:41,720 --> 00:11:42,800
So that's it.

141
00:11:43,160 --> 00:11:45,590
We are done with this project.

142
00:11:45,620 --> 00:11:47,180
I hope you like that.

143
00:11:47,360 --> 00:11:56,090
If you try to do it on your own and you had some trouble and now you just watch the solution, I suggest

144
00:11:56,090 --> 00:11:59,520
you just erase everything and try to do it again.

145
00:11:59,780 --> 00:12:05,660
Trust me, I know it's a lot of work to do this, but this is going to be very good for you.

146
00:12:06,110 --> 00:12:13,730
These things that we did, getting IDs and selecting aliments dynamically, this is something very important

147
00:12:14,060 --> 00:12:20,930
that you are going to have to do many, many times in your career as a web developer.

148
00:12:21,710 --> 00:12:28,310
If you have any questions, any doubts about this project, you can leave in the Q&A section and I will

149
00:12:28,340 --> 00:12:29,220
help you out.

150
00:12:29,510 --> 00:12:31,380
So that was all for this section.

151
00:12:31,550 --> 00:12:32,420
I'll see you soon.