instructor: 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.