Original subtitles

In this video we're gonna implement

our next feature which is to transfer money

from one user to another,

and this is how transfers work.

So here we input the username of the user

to which we want to transfer

and then here the amount, okay?

And so now we need to attach an event handler

to dis button here,

and then we're gonna take a look at our flow chart

to see what we have to do.

Okay?

But let's start to take a look here at this element.

So it is the button form

and then we will take or values

from form input amount

and form input to.

So debts input transferred to

and input transfer amount

and to button is button transfer.

So as always, I already selected them here beforehand.

So Let's use

button transfer

dot add event listener,

click,

end then our function

and we will actually need or event here again,

because just like before

we need to do event dot prevent default

because this one is also a form,

and so without this, if we clicked here,

then that will reload the page.

So this here is pretty common to do

when we're working with forms.

So preventing the default behavior,

okay?

Now right?

So let's create some data here

based on the input data and starting with the amount.

So the amount of transfer is

input transfer amount

dot

value

and then we need to convert it once again

to a value

or to a number actually.

Okay?

And when now as I reload here,

of course we lose

all this data.

So this current data that we need,

so now we will have to start to log in always here

and we could find a way around this, but yeah,

let's just keep logging in

whenever we have to check or caught.

So anyway, we have the amount

and then we also want to figure out

the account to which we want to transfer.

So const

receiver account,

and now the value is of course in

input transfer

to

dot value.

So that is the string that's gonna be right here.

So for example, if we want to transfer to Jessica Davis,

that's going to be a JD

right?

However, debt value alone

so that username alone is not that helpful,

it is only helpful when we use it

to then actually find the account object

to which we want to transfer alright

and so for that, we once again use defined method.

So that's accounts,

so that's the array holding all the accounts

and then we have the current account

and we want to find account

Where The username is equal

to this value that we put in here,

now right.

So to recap here, we are now looking for the account

which has

this value here

so that's gonna be the username value

that we input into that form,

so to which we want to transfer,

and so here we are looking for the account with the username

which is equal to debts input at username

and then we select that from the account once more

using the find method here,

now okay?

So we have this data

let's

just check if it is correct here

by logging it all to the Console,

so also the receiver account,

so this would be a comma,

so I'm logging in as JS with this pin

and now let's say I transfer to Jessica Davis,

that's JD

100 euros,

and now in the Console, we indeed get 100

and the account

with the username that I just input it there.

Great, so let's see what we have to do now.

So what we will do,

is to add a negative movement to the current user

and add a positive movement

to the recipient and that makes sense, right?

So if I transfer 100 to someone,

I should lose that 100

and the other person should receive that 100

otherwise we would just be creating new money, right?

So we do that and then we update the UI again,

so we show again the movements,

summary and balance because all of that

will be effected by this transfer.

Now what's kind of missing here in this flow chart

is that we also actually first need to check some stuff.

So we need to check if the amount here

is actually a positive number

and we also need to check if the current user,

so Jonas right now actually has enough money.

So I should not be able to transfer 5,000

if I only have like 3000 and something,

okay?

So let's implement that cheque first.

So as I just said, the amount needs to be greater than zero

otherwise we could do a negative transfer

and basically transfer money to ourselves.

So this needs to happen

and also the balance of the current account

needs to be greater or equal the amount

that we're trying to transfer.

Now, this balance value is actually not stored anywhere,

right?

So in the place where we calculate this balance,

so that's right here.

So calc display balance,

all we do is to calculate it

and then display it immediately on the user interface,

but we do not save it anywhere

so let's actually change that,

so besides only displaying it on the user interface,

we also want to save it in the account.

Now, how do we get access to that account?

Well, we will do the same as we did previously

with this function here,

where now instead of the movements

we passed in the entire account

and so then we will be able to read the movements here

from that account and also we will be able to then create

a new property on that account with the balance, okay?

So I hope that makes sense,

so we are changing it from movements

and so now we will be calling it

with an entire account object.

So here we need to do account dot movements

and before we move on any further,

let's call this correctly.

So cacl display balance should now only be called

with the entire account object

and not only with the movements array, okay?

So here it is.

So now we take the movements from the account object,

and then we can add that

so we can say account dot balance equals balance

and in fact, we can make this even better,

we can store this value here

immediately in account dot balance.

So let's do that, account dot balance here

and then we get that property here

from account dot balance as well.

Great, and remember why all of this works

and we have some error here, but that doesn't matter,

it's something unrelated now,

anyway, let's remember why all of this works,

so why we can set, this property here on this account object

that we receive, and it will then set that right here

on these objects that we have here.

Well, and the reason is that, once again,

all of these different references to actually point

to the exact same objects in the memory heap, okay?

So when we access this account, one object here,

so down here in the login function,

so right here where we create this current account variable,

this is of course not really a copy of the object itself.

So just as we learned before,

this is simply another variable which points to the same

so to the original object in the memory heap, okay?

So this current account object again

is exactly one of these objects that we have right here.

So one of the objects of the account array, right?

They are the exact same object.

They simply have different name,

here it is called account one

but then down here it might be called

the current account, okay?

And then we use that current account to pass it

into this calc display balance function

and so then inside of that function,

it will have even another name.

So here it will be called acc,

but it's still the same object, okay,

it's still pointing to the same place in the heap,

so in the memory now, right?

And therefore setting the balance property here on acc

is exactly the same as setting it up there

where we first defined the objects, okay?

And I will show you that in practice in a second

but now let's go here

and so this is where this arrow comes from

because we don't have any code block

and also because there is no second operant here.

So anyway, let's go back to this condition here,

so we already defined data transfer can only happen

if the amount is greater than zero

and now the second part is that the current user needs

to have enough money to do this transfer

and so that means current account dot balance

which is the property that we justified alright.

So we calculated the balance

and that needs to be at least equal to the amount

that we're trying to transfer, okay?

Also, we should not be able to transfer money

to our own account.

So that's at that condition as well,

so what we're trying to say is

that the receiver account dot username

must be equal

from the current account

dot username, alright?

Tierra have one equal too much,

alright?

And actually, we should also check

if this receiver account actually exists.

So if it doesn't exist, of course, it makes no sense

to transfer money there.

So we could add that here, like simply testing this,

but instead, since we're already trying to read a property

from that object here, we can use once again,

optional chaining like this

and so then if this object here doesn't exist,

then immediately this here will become undefined

and the whole end operation will fail,

and so in this case, we don't need that.

Let me just comment it out and so now this should work

and so let's just lock something to the Console.

So transfer valid

and now I will check all of these conditions here.

So let's log in and now I want to transfer again

to Jessica Davis and I will try to transfer zero

so we get zero but we do not get transfer valid.

So that means we didn't enter a this "if block" here.

Now let's try to transfer more than I have

and so this is also not valid but now 500

and so all of these should not be true

so you'll see a transfer valid.

If I try something else, then again nothing should happen,

oh, and actually it does happen,

so indeed the receiver account is undefined

and so this here will now be undefined now

but I see what's happening

because all that we are asking here is for this here

to be different Jandy current account dot username.

And so JS is of course different than undefined

and therefore this here is still true

and so in fact, we need to do this as well.

So let's try this again

and so you see of course back like this

can happen all the time.

And so we find them,

we fix them and we move on

and of course, now we test with some wrong username there,

and now nothing happens, okay?

So now the transfer is not valid.

Now I'm also trying to transfer it to myself

and so this is also not valid

but finally to Jessica David, it will be valid, okay.

And so, now here we can finally do

what we intended to do all along.

So these steps that we have here,

So let's do that.

So the current account dot movements,

so we will add one new movement

and so we're pushing here the amount but negative.

So the negative amount and now on the receiver account,

We will add a positive movement, okay?

And that's actually already it.

That's the most important part of doing the transfer.

So doing the transfer

and then we also want to update the user interface.

So we could now copy this code here

and paste it there as well

but that's not a good practice as you already know

and so I will now refactor this code here

all into one function.

So let me grab this here

and dysfunction will be called update UI

and it will also receive of course the current account.

So let me right now the function here update UI

equals function and I'm gonna leave it empty for now,

and so indeed here,

I need the current account now, okay?

So otherwise I could not call this three function then

using the account,

but here I can call them whatever I want again.

So let me just call them account,

alright?

So we refactored that functionality into its own function

and so now we can call this function anywhere

that we want in our code,

and it will then always perform

these three tasks, okay?

So here I already called it update UI.

We just write it here also as a comment.

And now all I have to do is

to paste it here as well.

Great.

So that should be working already.

So that's transferred to Jessica Davis 500.

And so now I should see one negative movement here,

and this should also decrease by a 500

and indeed it did.

So let's check now here,

the accounts variable,

just to see if we actually get the balance.

So indeed we now have to balance property here.

We also have to movements

and of course it's going to contain the minus 500, right?

So that's the money that we just transferred away

to Jessica Davis.

And indeed it should already be in Jessica Davis.

So her latest movement is now indeed 500.

So that's take ticket out also in the user interface.

Now, before doing that,

the final thing that we're going to do is

to clean these input fields.

But now just to make sure let's login as Jessica Davis,

and then we should get plus 500 here as the latest deposit.

Now right?

As I was saying,

we need to clean out these inputs now

and that we will do no matter if the transfer

was successful or not.

So we can do that outside of this if statement,

so just down here or actually we can do it right here,

let's get rid of this Console dot log

and then input transfer amount

equal or actually dot value

equal

input

transferred to

equal the empty string

and with this we should be finished.

Let's try it one more time.

This time Jessica Davis will transfer something

and so we lost here the latest transfer of course,

because the page was reloaded

and this data of course then gets lost.

So when our page loads the information about the accounts

so the account data will always be exactly

what we have here in our code,

okay?

So that's the reason why that data,

that 500 transfer is no longer here,

but that doesn't matter.

So let's transfer it to Steven Williams here

1000

and we get an error here,

assignment two constant variable HTML button

so at line 167

and oh, one more time I forgot the value here.

That's a very stupid mistake, right?

Let's try that again.

Stephen Thomas Williams,

I believe

and now it worked

so all of our statistics here were updated

and indeed now this field or both of the fields are empty

and now as we go

to this account,

how apparently it does not exist.

Yeah, it is Steven Thomas Williams.

Yeah,

so now we get this 1000 deposit here

that we just did previously

Alright?

Awesome!

so our application is coming more

and more to live here.