Instructor: Now comes the fun part
where we'll finally see the budget updating
on the user interface.
And since this will be a shorter lecture,
we will just practice some more DOM manipulation
by updating the budget and total values
in the user interface.
So of course we need to add a new method
here to our user interface controller, right?
And let's call it displayBudget.
And let's put it here.
So displayBudget.
And what do we need here in order to be able
to actually print the budget?
Of course we need to update
where all of this data is stored.
So I'm going to call it (obj) just like we did before
and this will then contain the four pieces of data
that we want to print here, right?
So the budget, the total income, the total expense
and also the percentage.
So we're going to do some more DOM manipulation
and in order to do that we need to know
the class names of the elements
on our user interface that we want, right?
And so once again we're going to add some more strings here
to our DOM strings object so that we can use them
then in our methods.
So let's go to our html file
where our user interface is stored, right?
And so this is here in the top part
as I showed you right in the beginning.
So the actual budget value which will be stored here.
So right here this is this
will be called "budget_value".
So let me copy this and then paste it here.
And I'm going to call it budgetLabel
because these basically act as labels
in the user interface, okay?
So the class selector and then the class name.
Alright, so next one.
So now we need our total income, which is here right,
and the total expenses is down here.
In this dif element.
So let's just check.
So it's this here and this.
So these are called "budget_income_value"
and "budget_expenses_value" down here.
So let's add these two as well.
So let me call this incomeLabel.
And actually I didn't copy it.
Okay.
So now it's here.
And now the expenseLabel.
So income and expenses.
And finally the percentage as well.
So let me check that as well and it's here.
So this is called "budget_expenses_percentage".
And copy this as well
and now percentageLabel.
And now we're ready to use this.
So remember we store all of these class names
here in this central object that we have here
so that we don't have all of these
class names here floating around
in all of these methods, okay?
And so if something changes in the user interface
you can simply come here and update all of these class names
if we want.
So this makes our lives as programmers much easier
having these kind of structures.
Okay now we already know how to display all of these values
on our webpage, right?
So we have done this a lot of time.
So we use document.queryselector
and then (DOMstrings.budgetLabel)
which is the first one.
And then in this case we don't want to change the html
but only the text content.
So we say textContent, okay?
And now this should be equal to the budget
and this budget comes here from the object
that we pass into this method.
So obj.budget
and that's it.
And now I'm just going to duplicate this line
because we already know how to do this, right?
So now I just need to replace a couple of things here
to make it work.
So the incomeLabel, right,
and now we need to know the name of the property
where the total income is actually stored.
So let's go back to where we generate this object.
So remember it's here in the getbudget method.
So this is where we create the object
that's going to be returned to the app controller
which then passes it into the displayBudget method
that we're working on right now.
Let me just copy this so that I have the names here, okay?
So, this one is call totalInc,
totalInc,
and here is the expensesLabel, right?
And this one is called, as we see, totalExp
just going to copy it.
And then here this one is called percentageLabel
and this should be percentageLabel.
Let me change it in both places.
Okay.
And now this one is simply called percentage.
So I'll copy and paste.
And now before we can see this in action
we need to of course call this method here, right?
And also add this comma.
Okay, so displayBudget is the method
that we're going to call.
Oh yeah it's here.
So before we have this console.log here
which we don't need anymore.
And so now we use the UICtrl
to call the displayBudget method.
And now what we have to pass in here is the object
that we called budget, right?
So this object here.
Which is, as I showed you a couple of moments ago,
the object that is returned from the getBudget method.
Okay and now we're ready to check this out.
So project 1500 and alright.
It works.
So the budget is 1500, our income is 1500,
and our expenses are zero.
Let's now add another one,
salary let's say, 2550
and now it should be 4,000, right?
So let's see.
And yes it is.
So it updated very nicely here.
And now I'm going to add an expense as well
and I'm going to call it holiday again for 1200.
And it works, so we see 1200 here
and our budget which is now 2800
and then the percentage here is also correct.
So with this holiday here we now know that we spent
30% of the money that we made in this month.
Now we don't only want this to be 30 here right?
So let's add the percentage sign here.
And actually there's another thing that we have to do.
So let's reload this and let's simply add an income.
So now we have minus 1%
and we don't want the user to see minus 1% right
because that doesn't make any sense at all.
So we need to be prepared for this case
and display something else there.
So let's do this.
So back to the displayBudget method here.
We basically need an if else statement here right?
So we say if there is a percentage,
so if it's not minus one,
then we want to add the percentage sign.
So if it's 30 we want to display 30%,
but if it's minus one we simply want to
display something else.
So let's say if obj.percentage
is greater than zero
then we want this to happen here.
Let me cut this from here and paste it here.
So we want this object percentage
plus the percentage sign, right?
But if it's not we want something else.
So we don't want to see the percentage value here,
but we want to see something that shows us
that there is nothing to show actually.
So let's put simply some of these dashes.
And so this shows that it's empty.
And notice that this is not only going to happen
when the percentage is minus one,
but also when it's zero, right?
Because in here we said greater than zero.
So this only happens,
so this percentage is only shown
if the percentage is greater than zero
and not if it's greater or equal.
But that's totally okay.
So let's see that in action.
So I'm going to add a holiday.
So 1200 and yeah, now we have these three dashes
that we had before, cool right?
Let's now add a salary for us
of 2400 and now we see
that we spent 50%.
So now it's working really good.
Only one small thing that we can improve now is
you see when we reload this
then we have these weird numbers here
that we obviously don't want, right?
So remember there's something that runs each time
that our application starts
and do you remember what that is?
Yes, it is the init function.
So, we cannot only call
this method that we just created
each time that we input a new item,
but we can call it right in the beginning
when we start to run our application.
So let's copy this
and then
say that we want to run this right in the beginning.
Now the thing is that we don't want to pass
the budget in here, right?
Because what we want is basically do a reset everything.
So we want everything to be set to zero.
So what we need to pass here is
actually an object similar to the budget object,
but with everything set to zero.
So let's just grab the object from up here, okay,
and put everything to zero.
So very simple.
So back to our init function okay here.
Let's pass this object, but we set everything to zero.
So the budget is zero, the total income is zero,
the total expense is zero, and the percentage is
not zero but minus one.
So there's no percentage at all.
So let's check this now.
So when we reload everything should be set to zero, right,
and yes here it is.
So no budget, no income, no expenses,
and no percentage to show.
Okay, and with this we have actually finished
everything that we had planned
for the first step of building this application
and it already looks pretty cool right?
So great work so far.
So we can now already do a lot of stuff with this,
but there are actually still
a lot of more cool features coming up
over the next lectures.