Original subtitles

Let's now perform some operations with dates.

So one cool thing that we can do with dates

is to do calculations with them.

For example, we can subtract one date

from another date,

in order to calculate how many days have passed

between the two dates.

And this works,

because whenever we attempt to convert a date

to a number, then the result is going to be the

timestamp in milliseconds.

And with these milliseconds,

we can then perform calculations.

So again, the timestamps are going to be really helpful here

in this situation.

So let's get this date here.

Okay, and let me just demonstrate what I just said.

So I will convert to a number, this feature.

So you see, it worked.

And the same thing is going to happen

when I use the plus operator on it.

So you see.

And so in fact,

that does mean we can now do operations with it.

So if we subtract one date from another,

the result is going to be a number like this.

So a timestamp in milliseconds.

And then we can simply convert

these milliseconds back to Days,

or two hours,

or to whatever we really want.

So let's actually now create a function

that takes in two dates.

And it's going to return the number of days

that pass between these two dates.

So days

past,

is going to be a function,

or let's use an arrow function.

So nice, one liner,

so date one and date two.

And then all we need to do is date two

minus

date, one.

And so let's suppose that

date two is later.

But in case we do not want to suppose

that we can simply take the absolute value here.

And then it doesn't matter which

of the dates here happened first in time.

But for now, let's keep it like this.

So I can show you later what I mean.

So for now, let's actually also return this result.

And then I will just call this function here.

So calc, or actually, it's just calc Well,

it should be calc a called calc.

So this looks a bit nicer.

So calc, days passed.

And then let's just create two dates here.

So let's use this one here.

Maybe make it a little bit simpler.

Let's say here,

April 14.

So this is the first date,

the first that happens in time.

And then the second date,

let's just say,

well,

April 24.

So this then makes it easy for us

to visualize the result.

And let's just call this const days one,

and then login to the console.

Alright, and so this gives us these milliseconds.

And so now we just need to convert them.

And this is similar to what we did,

I think in one of the previous lectures.

So we want to divide by 1000.

And so this converts milliseconds to seconds,

then that times 60,

to convert it to minutes,

then times 60 to convert it to hours,

and then times 24,

which converts it to days.

And again, that's because there are 24 hours in a day.

There are 60 minutes in one hour,

60 seconds in one minute,

and 1000 milliseconds in one second.

And so now we get 10 days.

And that makes sense.

Right?

So from April 24

to April 14,

we have exactly 10 days.

Now what if here,

we pass

four.

So now it's going to be the other way around.

Right, so now we have minus 10.

But we don't want that we always want it to be four

and so that's what I meant earlier,

where we can now simply take the absolute value of this.

So math dot

absolute.

Which of the dates we pass in first.

So if we now put four here

and 14 here,

then the result is still going to be 10.

Great.

So this works just really nice.

Now if you need really pretty sighs calculations,

for example, including time changes due

to daylight saving changes,

and other weird edge cases like that,

then you should use a date library like moment dot js.

And that's a library

that's available for free for all JavaScript developers.

But for something simple like this,

we should be fine.

Now, let's just consider

that one of these days here also has some time.

So let's say in this one here, it's also 10

in the morning,

or 10

hours

and eight minutes,

doesn't really matter.

But let's see what happens to the days now.

And so Indeed, we now get 10.4.

So we might not want that.

And in this case,

we can simply use math dot round on all of this.

Okay, so keep that in mind.

But I will just leave it like this.

Alright.

And now let's actually use this function to format

and display or dates

in a little bit nicer way here in our application.

So basically, what I want to do is,

if one movement happened today,

then here instead of the current date,

I want to display today,

then if it happened yesterday,

I want to write yesterday.

And then if it happened, like a couple of days ago,

then I want this to say,

like two days ago

or five days ago,

instead of the date.

And I'm sure you've seen this kind

of stuff in many web applications that you use

in your daily life.

For example, if you post something on Facebook,

and if you didn't watch it,

the next day,

it will say that you posted it yesterday,

it's not going to display the exact date

if it was just yesterday.

And so that's a really nice use case

of using a function like this.

So let's grab this here.

So I'm copying it.

And then let's go to the display movements function,

where we do actually print the date.

Now, this is all kind of getting out of hand.

So we have a lot of extra code here.

And now we will add even more.

So this function here,

and even some more stuff.

And so let's take all of this here,

and actually create a new function,

which will have the purpose of formatting this.

Alright.

So let's cut this here,

as I just said, and create a function up here,

just to make it a little bit more modular.

All right.

And then we can also reuse this function

in some other place.

Even though right now,

in this case,

we don't need it.

I'm just doing this

to split up the functionality a little bit

across different places in our code.

Okay, so this one receives a date as an input,

and it will return

the formatted date then,

okay.

So I'm copying all of this.

But actually, this one should stay back here,

where we got it from.

And then also,

so this, we need this variable back here,

where it came from.

So display date,

because we use it down here as the value

that we eventually want to print to the user interface.

And so this one should actually be the result

of calling or new function.

So this format, movement date.

So format, movement date,

and here, we pass in the date variable

that we just created up here.

Alright,

and so with this,

we just exported the functionality here

into a new function.

So let's grab this

and put it here at the top of the scope.

And so for now, just to keep this working,

let's return then this value.

All right, and as you see,

and let's just make sure by logging in.

So as you see,

the dates are now still being correctly printed.

So we successfully exported this functionality here

of displaying the dates into this function.

And now we can just implement what I just said.

So basically calculating how many days passed since

the current date and between

the date that we are working with.

All right.

So let's say

const days,

past

and between.

So between right now,

there is a new date.

And then the second date is the date

that we just received here.

So let's just print this to the console to see if it works.

Okay.

So what's all of this here?

So we are printing here actually the wrong thing.

So we want days past.

So that was a mistake, obviously.

But it's still not correct.

And

okay, I have another mistake.

So probably you saw this already.

So I did not even call the calc days past function.

But now it should be good.

And indeed, now we have our days here.

Alright.

And now let's actually round them.

Okay, so that's what I was just saying earlier.

So that we should probably round these dates.

So we already learned how to do that.

So math dot round,

all of this.

And so this looks a lot better now.

Now, let's actually modify

or dates here a little bit.

And you should do the same.

And what I'm going to do is to make

one date yesterday, and then also a date,

like three or four days ago.

So see what's your current date,

and then simply subtract one.

So for me, it's August 2,

so I'm going to use August 1,

and then also,

July

28.

And maybe another July here

25,

or maybe

26.

Okay, it's just so that we can see,

like the yesterday or three days ago,

or something like that.

Alright, so do that now.

And then let's go back here to or function.

Now, then we want to implement some logic based

on this day past.

So if

days past

is zero,

and so basically, that is,

if we do something today,

then actually the string that we want to print

is not the current date, but instead today.

All right, then if one day has passed,

we want to return yesterday.

Okay,

next up,

if

well, let's say if the number of days past

is within the last week.

So that's less or equal seven,

and then we will return the number of days.

So days,

past

days,

ago

and else,

so only if

more than seven days have passed,

only then we want to return the actual date.

Okay, does that make sense?

So let's save and see if it works.

And yes, beautiful.

So that's yesterday, five days ago,

seven days ago.

And then here are the other dates right here.

So that's beautiful.

Great.

Let's now just do something.

And actually, let's transfer like 500 to Jessica Davis.

And that's gonna be the other way around.

Jessica Davis, 500.

And so now we should get one log here with today.

Yes, indeed, there is today.

And now if we log in as Jessica Davis,

we should get the same.

So now we have a deposit coming from today.

And actually, we also have something from seven days ago.

So great, that's amazing.

If you ask me,

that we are capable of now doing something like this,

which looks like a real web application

that you might use every day.

All right.

Now, maybe the logic here is a bit confusing with all

of these returns.

But that's completely normal.

So as once we return, the function stops executing.

And so these other returns will then never be reached.

And so this is a pretty common technique.

And actually, we wouldn't even need this else.

So if I just remove this here,

then all of this code will only be executed

if all of these here are not executed.

So only if all of these here are false.

The rest of the code is even executed.

So you see it works the exact same way.

Awesome.

So our application is even better now.

And in the next two lectures,

we will then do what I mentioned earlier,

which is internationalization,

which is to basically format these dates,

and also these numbers here,

according to each of the countries of these accounts.