1
00:00:09,120 --> 00:00:12,430
All right, so it's time to start solving the exercise.

2
00:00:12,450 --> 00:00:19,790
So, number one, the first thing we need to do here is tracking any change to this element.

3
00:00:19,860 --> 00:00:22,200
So let's see the idea of this element.

4
00:00:22,440 --> 00:00:23,970
So this is the idee.

5
00:00:25,080 --> 00:00:25,950
Shipment.

6
00:00:28,720 --> 00:00:33,520
So here I already copied the objects that I'm going to need later.

7
00:00:35,230 --> 00:00:43,750
So now let's just do document, get elements by ID, then this is the ID of that element and we need

8
00:00:43,750 --> 00:00:46,300
to use the on change event.

9
00:00:49,340 --> 00:00:52,030
So let's assign a function to it.

10
00:00:53,800 --> 00:00:59,380
And every time there's a change, we need to get the selected value, so let's create a variable called

11
00:00:59,380 --> 00:01:00,880
selected value.

12
00:01:02,420 --> 00:01:10,640
And let's remember that there's a very easy way of doing this, so if you go back here, let's go to

13
00:01:10,640 --> 00:01:13,760
the last scene where we talk about farms, which is this one.

14
00:01:14,090 --> 00:01:19,610
So by pressing control and clicking on it, we can open it on a new tab.

15
00:01:21,070 --> 00:01:26,970
So as you can see, if you need the inner adjustment, we need to do all this, but if you just need

16
00:01:26,970 --> 00:01:31,450
the value, there's a very easy way of doing this.

17
00:01:31,840 --> 00:01:33,820
So let's just copy all this.

18
00:01:35,220 --> 00:01:42,390
Instead of selected value, let's change it to selected option so we can use the same code.

19
00:01:43,620 --> 00:01:50,060
And the only thing we need to change is the idea of the element, which is shipment.

20
00:01:50,580 --> 00:01:55,040
So let's test if we are able to get the selected value.

21
00:01:55,470 --> 00:01:56,850
So saving this.

22
00:01:58,680 --> 00:02:00,390
So refreshing the page.

23
00:02:00,450 --> 00:02:01,960
Let's go to the console.

24
00:02:02,310 --> 00:02:11,070
So when we change something here, so let's choose standard, we are getting this string and if we select

25
00:02:11,070 --> 00:02:13,570
the express, we are getting this.

26
00:02:13,890 --> 00:02:19,980
So how can we use this to access the information we need inside this object?

27
00:02:20,970 --> 00:02:23,250
Well, going back to the code.

28
00:02:27,410 --> 00:02:29,480
Let's create a variable for the.

29
00:02:31,930 --> 00:02:32,770
Lead-time.

30
00:02:35,290 --> 00:02:40,270
So if we wanted to access this property directly.

31
00:02:41,450 --> 00:02:42,890
We would do shipment.

32
00:02:46,870 --> 00:02:47,440
Not.

33
00:02:50,910 --> 00:02:51,750
Standard.

34
00:02:54,750 --> 00:03:03,680
To get inside this object, but the problem here is that we don't know if it's standard or if it's express,

35
00:03:04,020 --> 00:03:06,180
so this needs to be dynamic.

36
00:03:06,390 --> 00:03:08,370
How can we do this dynamically?

37
00:03:09,000 --> 00:03:15,120
Instead of using the dot notation, we can use the Brace's notation.

38
00:03:15,870 --> 00:03:20,640
So we know that if we do this and use a string here.

39
00:03:21,650 --> 00:03:28,580
We are going to get the same result, so we are going to access this object, so now instead of just

40
00:03:28,580 --> 00:03:35,780
writing standard, we can use what we have from this variable, because let's remember that this variable

41
00:03:35,780 --> 00:03:40,490
is returning either standard or xpress, which is exactly.

42
00:03:42,030 --> 00:03:45,030
The name we want for these properties.

43
00:03:46,810 --> 00:03:53,110
So instead of just writing it like this, we can just get it from this variable.

44
00:03:54,810 --> 00:04:00,180
And now we can go back to the dot notation again, because this is going to be lead time.

45
00:04:02,230 --> 00:04:04,510
No matter what the option is.

46
00:04:06,370 --> 00:04:10,630
And let's do the same thing for the fee.

47
00:04:13,440 --> 00:04:21,470
So fee, then we just need to get the fee property and now just to see if we are getting it right,

48
00:04:21,900 --> 00:04:24,420
let's send the lead time to the console.

49
00:04:30,970 --> 00:04:32,260
And also the fee.

50
00:04:36,000 --> 00:04:37,140
So saving this.

51
00:04:38,840 --> 00:04:45,290
Going back there, refreshing the page, let's try to change something here, so let's change to the

52
00:04:45,290 --> 00:04:45,980
standard.

53
00:04:46,250 --> 00:04:51,780
So we are getting seven, which is the lead time for the standard and two, which is the fee.

54
00:04:52,040 --> 00:04:52,790
This is good.

55
00:04:53,060 --> 00:04:55,150
Now, let's start with the Express.

56
00:04:55,340 --> 00:05:01,130
So now we are getting three, which is the lead time and four point five, which is the fee.

57
00:05:01,430 --> 00:05:03,540
So, so far, so good.

58
00:05:03,920 --> 00:05:10,820
Now we just need to do the calculation for the expected date of delivery and then just fill in the information

59
00:05:10,820 --> 00:05:11,550
necessary.

60
00:05:11,870 --> 00:05:13,070
So going back there.

61
00:05:19,090 --> 00:05:23,290
Let's now create a variable for the ordinate.

62
00:05:24,590 --> 00:05:31,670
And for this one, we are just going to start a new date object, if we don't pass any argument, we

63
00:05:31,670 --> 00:05:34,790
are just going to get the current date.

64
00:05:36,690 --> 00:05:41,670
Now we just need to create another one for the delivery date.

65
00:05:46,750 --> 00:05:53,140
And for this one, we want to pass an argument because we don't want to get the current date and we

66
00:05:53,140 --> 00:06:00,220
know that if we pass one numeric argument, let's go back here to the date and time lesson.

67
00:06:01,120 --> 00:06:02,020
So here it is.

68
00:06:02,560 --> 00:06:10,270
If we pass one numeric argument, it is going to consider it to be milliseconds since the epic.

69
00:06:14,810 --> 00:06:19,400
So which number of milliseconds are we going to pass here?

70
00:06:19,760 --> 00:06:23,120
Well, we just need to get the number of milliseconds.

71
00:06:24,770 --> 00:06:34,550
Of the order date, so we can do this by using the get time method and now we just need to some a few

72
00:06:34,550 --> 00:06:35,510
days more.

73
00:06:35,630 --> 00:06:37,520
So, again, how can we do this?

74
00:06:37,850 --> 00:06:44,630
If we go back to that conversion table, we know that we have this amount of milliseconds per day.

75
00:06:45,380 --> 00:06:51,830
So copying this, all we need to do is just multiplying this.

76
00:06:51,830 --> 00:06:53,630
Don't forget to remove the dot.

77
00:06:53,990 --> 00:06:59,390
We just need to multiply this for the lead time because the lead time is in days.

78
00:07:01,560 --> 00:07:07,350
So now we have the correct number of milliseconds for the delivery date and.

79
00:07:08,900 --> 00:07:11,420
We are creating a new date with it.

80
00:07:14,070 --> 00:07:18,450
So, again, before moving ahead, let's just.

81
00:07:20,080 --> 00:07:25,890
Sandy, the a date and delivery date to the console to see if we are getting it right.

82
00:07:35,040 --> 00:07:43,140
So refreshing the page, let's try the standard, so now we have July 14th, which is the day I'm recording

83
00:07:43,140 --> 00:07:51,120
this video and the delivery date is July 21st, which is good if we change to express.

84
00:07:51,240 --> 00:07:56,850
Now, we have July 14th and the delivery expected to July 17th.

85
00:07:57,300 --> 00:07:57,950
Pretty good.

86
00:07:58,170 --> 00:08:00,540
Now we just need to do some formatting.

87
00:08:01,840 --> 00:08:08,710
To show the date like this, well, to show the date like this, we could go ahead and create our own

88
00:08:08,710 --> 00:08:09,580
functions.

89
00:08:09,880 --> 00:08:16,000
So getting the year, getting the month and day, but then we would have a bit of extra work because

90
00:08:16,000 --> 00:08:23,770
let's remember that the get month method returns the month from zero to 11.

91
00:08:23,990 --> 00:08:29,330
So we would need to add one to get the correct month to put here.

92
00:08:30,100 --> 00:08:37,180
So when you are doing something like this before going ahead and creating your own functions, just

93
00:08:37,180 --> 00:08:40,300
search online if there's an easier way.

94
00:08:40,510 --> 00:08:49,330
So here I just told you that I want the ISO date format, so just go online and search for JavaScript

95
00:08:49,870 --> 00:08:51,850
ISO date format.

96
00:08:52,360 --> 00:08:55,850
So as you can see, there's already a method for it.

97
00:08:56,620 --> 00:09:03,040
So going inside here, you can see that you can apply this method into a date object.

98
00:09:03,250 --> 00:09:09,130
So that's everything that we need in order to format the date.

99
00:09:09,580 --> 00:09:11,170
So let's just copy this.

100
00:09:13,570 --> 00:09:22,450
And now we know that we have to date object, so let's test this to isolate string to see what happens.

101
00:09:22,600 --> 00:09:23,830
Same thing here.

102
00:09:26,600 --> 00:09:33,750
And now if we go back there and refresh the page, so let's pick an option, let's say standard.

103
00:09:34,100 --> 00:09:36,230
So this is almost what we need.

104
00:09:36,740 --> 00:09:40,780
We just don't need the rest of the information here.

105
00:09:40,790 --> 00:09:43,760
We just need year, month and day.

106
00:09:43,760 --> 00:09:49,760
But this is going to be easier than trying to format the date ourselves, because now we just need to

107
00:09:49,760 --> 00:09:52,100
do some slicing in the string.

108
00:09:52,610 --> 00:09:53,960
So let's copy this.

109
00:09:56,730 --> 00:10:05,310
Let's create this as a string just so we can try to use the slice method, so if we do like this, we

110
00:10:05,310 --> 00:10:12,000
talked about the slice method when we talked about a race, and I'm pretty sure that I mentioned that

111
00:10:12,000 --> 00:10:14,120
we can do the same thing with strings.

112
00:10:14,760 --> 00:10:18,590
So what we need to do is just picking a start and an end.

113
00:10:18,780 --> 00:10:25,020
So we are going to start from zero and we want to go all the way up to 10.

114
00:10:25,200 --> 00:10:28,490
So here, if you are not sure, you can just go trying.

115
00:10:28,500 --> 00:10:31,710
So eight, we can see that we are missing something.

116
00:10:31,860 --> 00:10:34,110
Nine, we are still missing something.

117
00:10:34,110 --> 00:10:38,820
And if we go all the way to 10, we can see that we have all the numbers we need.

118
00:10:39,010 --> 00:10:40,260
This is all we need.

119
00:10:40,560 --> 00:10:43,010
We just need to apply some slicing here.

120
00:10:43,590 --> 00:10:45,210
So let's copy this.

121
00:10:46,280 --> 00:10:54,710
Going back to Visual Studio Code, so not only we are going to get the ISO string, but we are also

122
00:10:54,710 --> 00:10:57,020
going to apply some slicing.

123
00:10:57,470 --> 00:10:58,790
So by doing this.

124
00:11:00,430 --> 00:11:03,750
Refreshing the page, let's change it again.

125
00:11:07,530 --> 00:11:10,980
And now we can see that we have exactly what we need.

126
00:11:11,010 --> 00:11:12,390
Let me just erase this.

127
00:11:12,750 --> 00:11:15,180
So this is for the standard shipment.

128
00:11:15,420 --> 00:11:17,880
Let's try for the express shipment.

129
00:11:18,180 --> 00:11:21,250
And now we can see that this is working pretty good.

130
00:11:21,270 --> 00:11:25,800
Now, what we need to do is just send it to these elements.

131
00:11:26,340 --> 00:11:30,660
So this first element is the order date.

132
00:11:34,120 --> 00:11:40,510
And this one is the delivery date going back there.

133
00:11:45,730 --> 00:11:50,290
We can just do document dot, get to element by ID.

134
00:11:51,450 --> 00:11:58,830
Then this is the ordinate, so the inner e-mail of it is just going to be this.

135
00:12:05,470 --> 00:12:06,640
Now, with just.

136
00:12:08,890 --> 00:12:12,450
Need to do the same thing with the delivery date.

137
00:12:14,480 --> 00:12:15,740
Which is going to be.

138
00:12:17,000 --> 00:12:24,290
The delivery date, getting the ISO string from it and then slicing the string.

139
00:12:25,370 --> 00:12:28,610
Pretty good now we don't need to send it to the council anymore.

140
00:12:28,640 --> 00:12:30,230
Let's see if this is working.

141
00:12:31,040 --> 00:12:35,890
So refreshing the page, let's try the standard.

142
00:12:36,170 --> 00:12:39,550
So now we have the correct date.

143
00:12:39,800 --> 00:12:42,840
Let's try to express this is also good.

144
00:12:43,100 --> 00:12:45,800
Now, the only thing missing is the delivery fee.

145
00:12:45,950 --> 00:12:51,440
So let's get the idea of this element, which is the delivery fee.

146
00:13:05,670 --> 00:13:13,830
So inside this element, we are just going to use the fee variable and now we need to force it to two

147
00:13:13,830 --> 00:13:19,050
decimal places so we know we have a method called to fixed.

148
00:13:20,600 --> 00:13:28,490
That can force it to any number of decimal places we want in this case, we needed to be to so by doing

149
00:13:28,490 --> 00:13:28,940
this.

150
00:13:30,530 --> 00:13:32,000
Refreshing the page.

151
00:13:33,350 --> 00:13:40,100
Let's see the standard, so now we have the order date, expected date of delivery and the fee, which

152
00:13:40,100 --> 00:13:44,270
seems to be correct, and let's change it to express.

153
00:13:44,540 --> 00:13:46,070
So we have the correct fee.

154
00:13:46,220 --> 00:13:47,640
We have the correct date.

155
00:13:47,930 --> 00:13:49,980
So this one is solved.

156
00:13:50,420 --> 00:13:52,650
Now, this video is getting a bit too long.

157
00:13:52,910 --> 00:13:57,040
So in the next video, I'm going to start solving number two.

158
00:13:57,200 --> 00:13:58,010
I'll see you then.