All right, so it's time to start solving the exercise.
So, number one, the first thing we need to do here is tracking any change to this element.
So let's see the idea of this element.
So this is the idee.
Shipment.
So here I already copied the objects that I'm going to need later.
So now let's just do document, get elements by ID, then this is the ID of that element and we need
to use the on change event.
So let's assign a function to it.
And every time there's a change, we need to get the selected value, so let's create a variable called
selected value.
And let's remember that there's a very easy way of doing this, so if you go back here, let's go to
the last scene where we talk about farms, which is this one.
So by pressing control and clicking on it, we can open it on a new tab.
So as you can see, if you need the inner adjustment, we need to do all this, but if you just need
the value, there's a very easy way of doing this.
So let's just copy all this.
Instead of selected value, let's change it to selected option so we can use the same code.
And the only thing we need to change is the idea of the element, which is shipment.
So let's test if we are able to get the selected value.
So saving this.
So refreshing the page.
Let's go to the console.
So when we change something here, so let's choose standard, we are getting this string and if we select
the express, we are getting this.
So how can we use this to access the information we need inside this object?
Well, going back to the code.
Let's create a variable for the.
Lead-time.
So if we wanted to access this property directly.
We would do shipment.
Not.
Standard.
To get inside this object, but the problem here is that we don't know if it's standard or if it's express,
so this needs to be dynamic.
How can we do this dynamically?
Instead of using the dot notation, we can use the Brace's notation.
So we know that if we do this and use a string here.
We are going to get the same result, so we are going to access this object, so now instead of just
writing standard, we can use what we have from this variable, because let's remember that this variable
is returning either standard or xpress, which is exactly.
The name we want for these properties.
So instead of just writing it like this, we can just get it from this variable.
And now we can go back to the dot notation again, because this is going to be lead time.
No matter what the option is.
And let's do the same thing for the fee.
So fee, then we just need to get the fee property and now just to see if we are getting it right,
let's send the lead time to the console.
And also the fee.
So saving this.
Going back there, refreshing the page, let's try to change something here, so let's change to the
standard.
So we are getting seven, which is the lead time for the standard and two, which is the fee.
This is good.
Now, let's start with the Express.
So now we are getting three, which is the lead time and four point five, which is the fee.
So, so far, so good.
Now we just need to do the calculation for the expected date of delivery and then just fill in the information
necessary.
So going back there.
Let's now create a variable for the ordinate.
And for this one, we are just going to start a new date object, if we don't pass any argument, we
are just going to get the current date.
Now we just need to create another one for the delivery date.
And for this one, we want to pass an argument because we don't want to get the current date and we
know that if we pass one numeric argument, let's go back here to the date and time lesson.
So here it is.
If we pass one numeric argument, it is going to consider it to be milliseconds since the epic.
So which number of milliseconds are we going to pass here?
Well, we just need to get the number of milliseconds.
Of the order date, so we can do this by using the get time method and now we just need to some a few
days more.
So, again, how can we do this?
If we go back to that conversion table, we know that we have this amount of milliseconds per day.
So copying this, all we need to do is just multiplying this.
Don't forget to remove the dot.
We just need to multiply this for the lead time because the lead time is in days.
So now we have the correct number of milliseconds for the delivery date and.
We are creating a new date with it.
So, again, before moving ahead, let's just.
Sandy, the a date and delivery date to the console to see if we are getting it right.
So refreshing the page, let's try the standard, so now we have July 14th, which is the day I'm recording
this video and the delivery date is July 21st, which is good if we change to express.
Now, we have July 14th and the delivery expected to July 17th.
Pretty good.
Now we just need to do some formatting.
To show the date like this, well, to show the date like this, we could go ahead and create our own
functions.
So getting the year, getting the month and day, but then we would have a bit of extra work because
let's remember that the get month method returns the month from zero to 11.
So we would need to add one to get the correct month to put here.
So when you are doing something like this before going ahead and creating your own functions, just
search online if there's an easier way.
So here I just told you that I want the ISO date format, so just go online and search for JavaScript
ISO date format.
So as you can see, there's already a method for it.
So going inside here, you can see that you can apply this method into a date object.
So that's everything that we need in order to format the date.
So let's just copy this.
And now we know that we have to date object, so let's test this to isolate string to see what happens.
Same thing here.
And now if we go back there and refresh the page, so let's pick an option, let's say standard.
So this is almost what we need.
We just don't need the rest of the information here.
We just need year, month and day.
But this is going to be easier than trying to format the date ourselves, because now we just need to
do some slicing in the string.
So let's copy this.
Let's create this as a string just so we can try to use the slice method, so if we do like this, we
talked about the slice method when we talked about a race, and I'm pretty sure that I mentioned that
we can do the same thing with strings.
So what we need to do is just picking a start and an end.
So we are going to start from zero and we want to go all the way up to 10.
So here, if you are not sure, you can just go trying.
So eight, we can see that we are missing something.
Nine, we are still missing something.
And if we go all the way to 10, we can see that we have all the numbers we need.
This is all we need.
We just need to apply some slicing here.
So let's copy this.
Going back to Visual Studio Code, so not only we are going to get the ISO string, but we are also
going to apply some slicing.
So by doing this.
Refreshing the page, let's change it again.
And now we can see that we have exactly what we need.
Let me just erase this.
So this is for the standard shipment.
Let's try for the express shipment.
And now we can see that this is working pretty good.
Now, what we need to do is just send it to these elements.
So this first element is the order date.
And this one is the delivery date going back there.
We can just do document dot, get to element by ID.
Then this is the ordinate, so the inner e-mail of it is just going to be this.
Now, with just.
Need to do the same thing with the delivery date.
Which is going to be.
The delivery date, getting the ISO string from it and then slicing the string.
Pretty good now we don't need to send it to the council anymore.
Let's see if this is working.
So refreshing the page, let's try the standard.
So now we have the correct date.
Let's try to express this is also good.
Now, the only thing missing is the delivery fee.
So let's get the idea of this element, which is the delivery fee.
So inside this element, we are just going to use the fee variable and now we need to force it to two
decimal places so we know we have a method called to fixed.
That can force it to any number of decimal places we want in this case, we needed to be to so by doing
this.
Refreshing the page.
Let's see the standard, so now we have the order date, expected date of delivery and the fee, which
seems to be correct, and let's change it to express.
So we have the correct fee.
We have the correct date.
So this one is solved.
Now, this video is getting a bit too long.
So in the next video, I'm going to start solving number two.
I'll see you then.