INSTRUCTOR: In this lecture we're gonna start
working on updating the budget
and the first step is to look at our controller module.
We'll also fix some minor problems
that our app still has at this point.
And so you'll learn how to convert field inputs to numbers
and you'll also learn how to prevent false inputs.
Alright. So here in our controller module
and more specifically here in the ctrlAddItem function
we already have these spots here to call the methods
that are gonna handle the budget update.
Now, I wanna move this to a separate function.
and that's because first these steps kind of belong
together, and second because we're gonna do
all of this again later when we want to delete an item.
So instead of repeating this code by then
we can simply write a new function
to keep the DRY principle,
so the don't repeat yourself principle,
and so I'm gonna do that right now.
And I'm going to call it update budget.
So very simple.
So var updateBudget.
And we don't need any parameters.
So all of this will actually
go in here.
So first we calculate the budget
which we're gonna do in the next lecture
in the budget controller.
And then we're also gonna have a method
that will then return the budget.
Okay? And I'm doing two separate functions here.
So one that calculates the budget
and one that simply returns the budget
and does nothing else.
And that's because I want you to get used to this
kind of philosophy that each function has
a specific task.
And that simply getting some information
from a module
is a good task for a simple function.
And we actually have already done some of these
get functions, like get input or get dump strings
and so we're gonna continue with that here.
So we will have another function in the budget controller
that will simply return the budget.
And then of course we need to display the budget
on the user interface, and that will be a method
on the UI controller
that we're also gonna code not in the next lecture
but in one after that.
Okay. So then we have to, of course, call this function
in here, right?
So let me just say
Calculate and update budget.
And then we call updateBudget.
Alright so in here we set the stage.
Now we just need to code all of these methods
over the next lectures and I will then call them
from the updateBudget function.
Now before we can move on to actually do all of these
calculations, there are still two things left
that we have to take care of.
And in order to see them, let's look again
at our project here.
And the first one is this, so let's suppose
we add something here.
Let's say salary again, and then 1200.
Okay, so everything nice here.
So let's use the test method that we did
for the budget controller. Remember that?
So we add budget controller and then a testing method
which was only to display the internal data structure
where all the incomes and expenses are stored.
So here is the object,
if I remember it's called data,
and it has these two objects in it.
So here we have the income that we just added, right?
So this array, actually this object.
So description of salary and the value is 1200
and the ID is zero.
Now here is the problem.
We see here that this value is not really a number.
It's actually a string, right?
And that is a problem.
So the ID here is a number, so everything's fine here.
But this is a string
and we cannot do calculations with strings.
So we need to change this.
So remember where we actually read
this data from the interface?
There is a method up here
and here it is, it's the getInput method, right?
So here in this line of code we read this value.
And what we read is a string as we just saw
and not a number.
But fortunately, there is a very handy
function in JavaScript which is simply called parseFloat.
So parseFloat, which converts a string
to a floating number.
So basically a decimal number, a number with decimals.
And so we can have a numbers with decimals.
So instead of having ten dollars we can have
ten dollars and fifty cents, for example.
Alright, so again, this function
is going to take this string here that this returns
and convert it to a number
which is then assigned to this value property.
So let's now reload this and check if that actually worked.
So salary once again,
1200
and then we need to use our testing method again.
And now you see why it's so useful
to simply write a testing method like this
not to use in production,
so not to use in the final application,
but here during development it's really useful
to have a public method like this
to expose some internal data.
So all items again.
The income,
and alright, here we go.
You see now it's a number.
So it no longer has the quotes
and it's also here printed blue like the zero, right?
So now it's a number, and now we can use it
to make calculations.
And so we solved one of the two problems.
So let's see the second problem.
And to show it to you, all I have to do
is to keep clicking on this button.
So, do you see what's happening here?
We are simply adding empty lines
without anything in them.
And that's because we don't have any test.
We don't have anything in our code that says
that we actually need to have some data here
and some values here, right?
And so this is another thing that we really
need to take care of before we can move on.
So let's do that now.
And the best place to do this
is in the function in our controller where we say
what to do when a user hits the button.
Okay? So let's come back down here
and this is a ctrlAddItem function, right?
So what we can do here is to say
that we only want all of this here to happen
if there actually is some data that we can use.
So we can of course use an if statement for that, right?
So let's put it right here.
Okay. And what do we want here?
First we want the description to not be empty, right?
So let's say input.description
should be different from the empty string.
Okay? So this will prevent that there are some inputs
where there is no description at all.
Now we also want the same thing with numbers, right?
So there is a function in JavaScript which tests
if a number is not a number.
So this sounds a bit confusing.
So let's go back here to the interface, okay?
So in JavaScript there is something, this Nan
and this means not a number.
And so as we hit this input button here
without any number here
this then returned not a number. Okay?
And so what we want is that this is not, not a number.
Make sense?
So right now it's not a number.
So what we want is the other thing.
So we want it not to be not a number,
so that it's a number.
So what we can do is to test if it's not a number like this
is not a number
and then we pass the input.value.
Okay? Now if this is not a number, it will return true.
And when it is a number, it will return false.
But we want the exact opposite, right?
So we can simply use the not operator here.
And this way it will be true if it is a number
and it will be false if it's not a number.
And now all we need is the and operator here.
So we want this to happen at the same time.
The input description should not be empty
and the number should actually be a number.
So it should not be not a number.
So this is already pretty good
but we can do even better
because imagine the case that the input value is zero.
That is also not really an expense or an income, right?
But it's still a number
so it will pass this test here, right?
So what we can do is to simply add
input.value should be greater than zero.
So, makes sense?
And now all of this only happens in the case that
these three conditions are all true at the same time.
And that's why we use the and operator.
So this is what we want always to happen
because without this we don't have any data
at all to test.
But all of the other stuff
so adding the new item to the budget controller
and to the UI clear the fields
and all of this should only happen
if there is actually some significant data
that we can use.
So let's now test this.
Okay, so if we now hit this here, nothing happens.
If we add something just like this
but without a number, also nothing happens.
And now let's put 12, okay, so now it worked.
Now let's test only with a number
and it does not work.
So test 2 and now it should work.
So I hit return. Alright.
And now let's add another test.
Test 3 with zero. So it should also not work, right?
And it doesn't. So, great.
But 01 works. So we have 1 here. So perfect.
So all of the problems are solved now
and so we're ready to move on to actually
do the real calculations.