Original subtitles

Let's now implement dates in our application.

And to see what we have to do,

so where we have dates in our application,

let's go to our demo here.

And so we have,

the date first here,

and then also in all of these movements.

So each of them here besides the deposit

and the value itself like we have it now,

we also now need the date here.

And so that's the reason why

in our account objects,

we actually now have the movement dates.

It's so that we can display them here.

But let's start with this date here.

And actually, the very first thing

that I want to do

is to basically fake it,

that we are always logged in, okay.

So let me do that here.

Fake always logged in.

And so this way,

we don't have to always log in

each time we want to do something.

So to that,

let's set the current account to account1.

Then let's call,

updateUI with that current account.

And also, we need to make the user interface visible

with this here.

Okay.

So these three lines

will not make it so

that Jonas is automatically logged in,

except for the message here,

but that doesn't really matter, okay.

So as I was saying,

let's start by displaying the current balance here.

So as I was saying,

let's now create this date here, okay.

And let's check out the class name.

So that's always a little bit hidden.

So it's the class date.

Okay, and so that is already selected at labelDate.

And once more,

let's start by setting the state

outside here of any callback function

so that we can see the effects,

as we implement our code.

So anyway, let's start by creating the current date.

And so, remember,

that is simply by doing new date.

And so that is basically right now.

However, we don't just want to print that.

So let's see how that would look like.

So labelDate, as I have already selected

which again is this element with the class of date,

and then text content,

and let's set it to now.

And so, this result here

is not exactly what we want, right?

So, instead we really only want

the day, the month and the year,

and I want to display it in this format.

So I want day,

then month, and then year.

And so this is how we display it in Europe,

or at least in Portugal where I am located, okay.

Now of course,

you can format it in any way that you want,

for example, how it looks like in your country,

but I will do it like this now.

Now later in this section,

we will learn about something called internationalization

which sounds very complicated

but it will allow us to form a date and time

according to the user's location basically.

So if the user was in Portugal,

then the date would automatically be formatted this way.

But if the user was for example,

in the US or in India or wherever,

then the date would be formatted

in a way that it is usually formatted

in that country, all right.

So, to do this,

we need to get the day, month and year.

So let's create variables for each of them.

All right, so we take now,

and then we call the get date method,

just like we learned in the last video.

Then let's take the month,

which is now.getMonth.

And remember, that this one is zero based.

So I'm gonna add one here,

and then the year,

which is now.getFullYear.

And actually, let's also get the hour

and the minute

so we can display that as well.

So getHours and const,

the minutes, getMinutes.

Okay, and now that we have that,

all you have to do is to build a nice string with that.

So that's the day/the month/theyear,

and then I want a coma

and the hour

and the minute,

so min.

All right and that looks a lot better.

Now, here in Portugal,

whenever the month and the year is only one digit here,

then we usually write 08 and 02.

So basically, we pad this number here

with a zero on the left, all right.

So let's do that with the day and with the month,

because this is actually a good use case

for this method that we studied earlier.

So on the day, and on the month,

we want to use .padStart.

And actually this needs to be a string now.

And so let's make it a template literal

like this, so basically this is now a string.

And so on that string,

we can call padStart,

and then we want this always to be two characters long

and we want to pad it with a zero,

and probably just writing zero would work just the same.

And so now we get 02.

But if today would be let's say 12,

then that zero will not be added

because the final length that we're looking for

is always two.

Okay, and the same with the month.

So, let's copy it here

and beautiful, so, that looks perfect.

And now, let's move on to actually use the dates

here on the movements, okay.

Just keep in mind that,

of course as the time goes on,

this value here is not gonna change.

So this is static, right?

So, if we wanted to keep this playing the actual time,

we would need something called a timer

which is something that we will do

by the end of the lecture.

We will not do it for this,

but we will implement a timer like this,

maybe you have seen it counting down here.

So this logout timer.

All right, so this time here is gonna stay static

but, that's not a big deal for now.

But anyway, let's now go to the function

which displays these movements.

So display movements.

So, here it is.

All right, so now besides the movements,

we also want to display the times of these movements,

but now, we actually have a problem

because into this function

we are only passing the movements array itself, right.

However, we also want the,

let's see, we also want the movement dates.

And so the best thing to do

is to simply pass in the entire account

into this function here as well.

So just like we already have it in these two,

where we already pass in the entire account,

let's do the same here as well.

So just the account.

And then here,

we need to say acc.movement

and here acc.movements.

And finally, where we called this function,

we then need to pass in also the entire account.

And so that's here in the display UI function, okay.

And so now,

it is a good thing

that we have this refactored function

that we created in the last section

where we call all of these methods here only in one place.

And so now we only needed to change,

calling this display movements function

here in this one place.

And so that's the whole goal of refactoring.

It is making it easier to implement new features

as time moves on.

Now, all right.

So let's see how we could do that.

So in here,

we are looping over the movements.

So that this array that we compute here

which is whether the sorted movements

or simply the movements themselves, right?

So we are looping over this

and in each iteration,

we are generating this HTML.

And so now, we simply need to add one more element here

to this HTML,

which is gonna contain that date.

So let's do that.

So in our HTML,

we can see that there is this element here

called movements_date.

So let's copy that

and paste it right here

after the type.

Okay, and so let's actually create a variable out here

and then put that variable right here.

Let's call it displayDate, okay.

Now, where is the date actually coming from?

Well, as we already know,

it is in the accounts.movementDates, right?

And so here,

we are looping over the movements.

And so at the same time,

basically we also need

to loop over the movement dates, okay.

But that's not a problem

because we already have the index here.

And so what we can do

is to write account

or acc.movementsDates

and then we take it at position i.

So that is the current index in the movements array.

And the same index is then gonna point

to the equivalent date in this movements date array.

All right, so this is a common technique

of looping over to erase at the same time.

So we called it for each method on one of them.

So that's the movements.

And then we use the current index

to also get the data from some other array.

Okay, and so that's gonna be

at the same position

because we're using the same index.

So, let's create a new date

out of this,

because as we saw before,

this is gonna be a nicely formatted time string, right?

And so, we can use that string

to create a new date object

and we need that object,

so that then from there,

we can call our usual methods

to get the date and the month and the year.

Okay, so that's the reason

why we need to convert these strings

back into a JavaScript object,

because only then,

we can actually work with that data.

And now let's actually create

the same variables that we already have here,

so there's no need to repeat it all.

Let's actually get all of this

and then delete what we don't need,

to make this a little bit faster.

So, we don't need the hour

and the minute,

so we don't need this.

And we want to create this variable called displayDate.

So the date

that we're ultimately gonna use here, displayDate,

and now, here we need to change from now

to date like this now.

All right, and we see,

it already worked, great.

So let's compare it actually here with the dates.

So in July 12, 2020,

and yeah, that works.

Here, then we have 11,

which for some reason,

there's also 12,

but I guess it's because we're close to midnight here.

And so for some reason,

probably it then changes over to the next day.

Then here we have 27 of May.

And so, that's also what we get here

all the way to the last one,

which is 18 of November.

So 2019.

So this is accurate.

Great, now, when we click here

on the sword, it's probably not gonna work.

So we get some kind of error here.

So cannot read property slice of undefined.

Let's see why that is.

Well, that's weird,

because accounts.movements here

is clearly defined.

It shouldn't be undefined.

Let's set this here to true by default.

And so, well now it is sorted.

So very weird that we get this bug,

as we click here.

That's just log to the console.

But indeed, this one here will be

and not undefined,

but actually now it's undefined.

So we get account.movements is undefined right now.

Now, that's weird,

but I guess it has something to do

with the fact that we faked our log in here.

So nevermind, let's take a look at this later.

Okay, let's just not sort for now

until we are back

to having our application normal, all right.

So, actually let's take this code here now,

and put it into the code that is executed

when we log in.

So besides this welcome message,

we then also want to create the current date.

Okay, so it's back to the original now.

Let's now log in,

and then we get the message here,

enter correct date.

But now what I wanted to show you

is what happens when we request a loan.

So you see that we get this error here, right?

And that's because this movement

doesn't have any date, right.

And that's why we get not a number in all the three values.

So we need to fix that.

So essentially, whenever there is a new transfer

or a new loan,

we need to not only push the new value

into the movements array,

but also into the movement dates, all right.

So let's actually see that in code.

So that's account one.

And so we see that the movements has now nine elements

while the dates only has eight.

All right, so we need to fix that.

So let's come here, to the transfer,

and then besides doing the transfer and updating the UI,

we also need to add transfer date,

but that's easy enough.

All we have to do is currentAccount.movementDates.push,

and then, simply create the current date.

So, new date and that's it.

So JavaScript will then automatically convert this data here

into a nicely formatted string.

All right, and now the same here also for the receiver,

because the receiver also gets a new movement here.

Okay, and so they also need a new date for that movement.

Now, as I told you also in the last section,

at the beginning of the project

in the real world

we would probably have an object for each movement.

And so that object would then contain the amount, the date,

and some other information about the movement,

but I don't want to restructure the entire application now.

And so therefore, I simply created

the separate movements dates, all right.

All right, now let's just take this here

and also add it to the loan.

So that's right here.

So add loan date

and that should be it.

So just to make sure here let's really log in again.

All right, and now I'm gonna request this loan

and now we get the current date.

So August 2nd, just as we have it up here.

Okay, `so let's see now D account.

So account one,

let's take a look at the movement dates.

And so indeed,

this is the one

or actually this is the one that I just added.

So this looks a little bit different from these ones

because actually it is really the object itself.

All right, so that's not good.

So let's instead use the two ISO,

a string, right here on the date

and do the same also up here.

Okay, and let's see if that fixes it then.

Okay, so probably there was some error here

because we're back to having not a number,

and, actually I need to

take a look at account one now again.

And so let's check out the latest date.

Oh, and I didn't call the method.

That was stupid.

Actually, this is something that happens to me

quite frequently with these dates methods

because we don't have to pass anything in there.

And so there's a tendency to forget

that we even need to call the method.

So don't make that same mistake.

All right, and now it works indeed.

So let's check if the string looks nice

with the same format as all the others,

and yeah, it does.

And so with this,

we finished one more lecture.

Now here, I am actually seeing something weird.

So it's 19:1,

but this should kind of be 01, shouldn't it.

So we need to apply some padding to that as well.

So that's a good coincidence

that we are just at this time where I can see this.

So let's go ahead quickly

and fix that right here in the login callback.

So that's here.

And so essentially what we just need to do

is to add this part

to the hour and to the minute.

So we make all of them a template literal again

and then, like this.

One more time.

Now okay, to see the effect,

we need to log in,

and beautiful, so that's a lot better.

And now, we indeed finished this lecture

and are ready to move on to the next one

where we're gonna work

just a little bit more with dates.