Instructor: In this final step
of updating the expense percentages,
we're just gonna display them to the UI.
In this lecture, you're gonna learn
how to create your own forEach function,
but for nodeLists instead of arrays.
So, by now, you already know
where we're gonna add our new method, right?
And that's right here in the UI controller.
And let's do it here.
And we'll just call it displayPercentages.
And of course, this method is going
to receive the percentage array that we have stored
in our app controller, right?
So that's what we did in the last lecture, if you remember.
So, an argument called percentages,
and this is gonna be an array.
Okay, so these are the percentages that we will display,
but where are we going to actually display them?
So, let's take a look at the HTML,
and they are, of course, not in the incomes,
but in the expenses
and this is called item__percentage, so we need to start
by selecting all of the elements
which have the item__percentage class.
So let's go back and, once again,
I'm going to edit in here, right?
So, expenses
percentage label, let's say.
And I'm not sure if I copied it.
No, I did not.
Alright, so let's go back, so it's item__percentage.
Alright.
And here we go, so expenses percentage label.
Alright, and now this time we don't know
how many expense item will be
on the list, so we cannot use querySelector,
because that only selects the first one,
so we need to, again, use querySelectorAll.
So let's create a variable called fields
and then say,
document
querySelectorAll
and for my DOMstrings, we want to
expenses percentage label.
Alright, and this, again, returns a list.
And actually, it's called a node list.
Not just list, but nodeList and that is because
in a DOMtree, where all of the html elements
of our page are stored, each element is called a node
and that's also why the property that we used before
for moving up in the DOM was called parentNode.
So we need to now loop over all of these elements
in our selection, so all of these nodes
and then change the text content property
for all of them, such as we did before.
Now, we already know
that the nodeList does not have the forEach method, right?
So we could again use the hack that we used before.
So, where we used the slice method of the array prototype
to convert the node list into an array,
but as I said that's more of a hack, so like a work around
and we can actually do better.
So instead, let's create our own forEach function,
but for node lists, instead of arrays
and with this, actually, we can use some of the knowledge
that we gained before about callback functions
and passing functions around like variables.
So imagine that we already have this function.
How would we want to use it?
So we want to call
nodeList
ForEach.
Okay, so this is how we gonna call the function
that we're gonna code in a second
and then we want to pass into it our fields, of course
and a callback function, right?
So this is similar to the forEach for arrays,
but it's gonna be for nodeList.
And then, in here, we want our callback function,
with the current
and the index, so exactly as we are used
from the forEach method
and then here we do some stuff.
So let's now write actually
this function and I'm gonna copy it.
So, var nodeListForEach
is a function
and as we saw here, this function is gonna accept
a list, a nodeList, but instead I'm just gonna write list,
so that our parameter name is not too big
and then the callback function, right?
So this here is what we pass
into the nodeListForEach function.
So, a list and then our callback here, right?
So what is this function going to do?
It will simply be a for loop
that in each iteration is gonna call our callback function.
So, something very simple, actually, but by putting it
into a separate function, we have here a piece
of reusable code that we could then use
for all of the nodeLists throughout our app,
or even in other apps that you're gonna code in the future.
So, each time that you have nodeList,
you can then go ahead and simply use
this nodeListForEach function here,
instead of writing your own for loop each time
and then put something inside of that.
So, for,
var "i" is zero, of course
and "i" should be smaller
than the list.length
and so, please note
that the nodeList actually has the length property.
So, it doesn't have all of these fancy methods
that we would like to use on it,
but it has the length property, so we can use that here.
And now, we just increment our counter
and what are we gonna do in here?
So, very simple, we simply call our callback function.
And now, here's the thing.
What are the parameters of our callback function?
They are the current and the index
and so we can now simply pass them
into our callback function by writing them here, right?
So the current is the list
at position "i"
and the index is simply "i", so it's as simple as that.
So, does that make sense to you?
This is really the power of first class functions
and of being able to pass functions around like this.
So what we just did here is something really powerful.
So let me explain it again.
So when we call our nodeListForEach function,
we pass a callback function into it, right?
Which is this one and it doesn't have any code yet,
but we're gonna put that there in a second.
So this function is assigned to this callback parameter.
And so, in here, we then loop over our list,
let's say, five times, if there are five elements in it
and then in each iteration,
the callback function gets called with these arguments here,
which are exactly the ones that we specified here, right?
And, so then, five times, our code
that we have here, is going to be executed
and we have then access to the current element
and to the current index, because we passed them
into the callback in here.
So, let's now use this to display these percentages
on our webpage.
So we can simply say that we want the current element
and now we can use the textContent property, right?
Which we have used a hundred times by now
and so, what we want is the percentages
at the position
index.
So imagine at the first element,
we want the first percentage, right?
At the second element, we want the second percentage
in the array.
So it's going to be percentages index
zero, one, two, three and four, so in the case
that we have five percentage values.
So that's the percentage and then we simply want to add
this percentage sign, such as we did before
and that's actually it.
Well, not really, because imagine
that the percentage is zero, right?
And we did that before and we can actually see it up here.
So, what we said here is that, if the percentage is zero,
we display the percentage like this,
so with the percentage sign, but if it's zero,
we simply want to display this string here, okay?
So, instead of minus one, because that would look weird.
So we can say,
if percentages,
at the position index,
so the current percentage, if it's greater than zero
then make this.
And else,
simply display
these three dashes.
Alright, and with this,
we concluded our display percentage method.
So again, we used a really powerful methodology here,
by writing this nodeList function here,
this nodeListForEach function
and if you didn't fully understand how this works,
then just pause the video and take a look at exactly
what happens here.
Alright, so now it's time
to actually use our displayPercentages method.
So, where is it?
So this file is really getting big
and sometimes it's a big hard to find a place,
but it's here.
So, UI controller
that display
Percentages
and, again, what we want to pass here is this variable,
called percentages, right?
Which is this one here, which comes
from calling the getPercentages method
on the budget controller and that's it.
Let's test this out now
and let's put our income of 200 here again.
And then "a", of 10.
Oh, sorry, this should have been an expense, of course.
So, again,
"a" of 10.
And, yes, it's 10%.
Let me actually delete this one.
So, this is working, right?
So, you have five percent and it's correct,
because 10 is, in fact, five percent of 200.
So let's add another one and let's say 50
and now it should be 25 and here it is.
So 25 is displayed correctly and since this is so fun,
let me just add another one of 120, let's say
and this one is 60% and notice that in here,
of course, it also updated, but we did that before,
a couple of lectures ago, right?
So all of these together, are 90%
and actually, if you sum these together,
so five,
plus 25
plus 60 is 90.
So these percentages are correct.
So with this, we concluded the percentage part
of this application and actually our app is
already fully functioning, so all of the important features
that we wanted are implemented by now.
There're just some minor things that are left to do here
and we're gonna look at them, right in the next lecture.
So come with me there, right now.