Instructor: Welcome to the last lecture of this project.
All that's left to do is to make some finishing touches
on our app, and so we're going to polish
our user interface even more in this lecture.
And in this lecture, you're still going
to learn something new, and that's how and when
to use change events.
So what we want to do in this lecture
is to improve the user experience here of our input form.
So right now when we hit this select field here,
then the outline of this element here is blue, right?
And this one as well, and this one,
and also the button is blue.
So this is the blue of our income, right?
Now if we change this to minus, so to the expenses,
this is still blue, right?
So there's not really a difference.
Now what we want to do here is to change this to red,
so to the expenses color, when we are adding an expense.
So this way, the user can immediately recognize
if he's inputting an income,
or if he's inputting an expense here.
So, how are we going to do that?
We're going to use an event that is triggered
when we change this from plus to minus,
and from minus to plus.
And that's not the click event,
because we could click here and then still click
on the plus, and then nothing really would change, right?
But there's another event that we can use,
and that's the change event.
And the change event occurs each time that we click here
and then change it to something else.
So now the change event happened.
And so we can now add an event listener to this element here
and then wait for the change event to happen,
and then handle that event.
So let's now do that.
So we already know that all of our event listeners
are set up here in this function.
So this is no exception, and so we're going
to add it also in here.
So document.querySelector,
and then DOM, where all the strings are contained,
and this one is called inputType, right?
So we add an event listener here,
and now it's not the click event,
but, as I was saying, it's the change event, alright?
And so now we need a callback function here,
and we're going to write that callback function
into our UI controller because this has something to do
with manipulating the UI, right?
So UI controller, and I'm going to call this method
the changed type, changedType.
So now we need to go to our UI controller
and add that method there.
So let's do it right here.
So changedType.
Alright, so what is going to happen?
So let's look at interface again.
So what we want to happen is these three elements here
to change this outline and then this button here
to change the color.
So we basically want to do some style manipulations.
And do you remember the best way to do that?
It is to add or to remove some CSS classes, right?
And so I already wrote some CSS classes
into our style sheet where they are.
So this is the red, and the red-focus class.
And we're gonna use the red class for the button
and red-focus class on the other three elements.
So I'm gonna select element and the two input elements,
so two things that we have to do.
We have to select all the three elements
which are gonna receive this red-focus class, right?
And remember, it's these three, this and this,
and then we need to select the button here
and give it the red class, okay?
So let's do that.
So for the first three, let's use the querySelectorAll.
So var fields, and document.querySelectorAll,
and now we need to input the three class names,
separated by commas, okay?
So let's actually do this in separate lines here,
because we have three of them.
So it's DOMstrings.inputType,
then plus the comma,
and then DOMstrings.inputDescription,
and here we don't need any comma, of course,
because the comma is here between the quotes,
because we're constructing a string here, right?
And DOMstrings.inputValue.
So these three are the ones that are going
to receive the red-focus class.
Alright, so remember, this returns a node list.
So in order to loop over it, we cannot use
the forEach method, but remember,
in one of the previous lectures, we wrote
a very useful function for that,
and it was called, here, nodeListForEach function.
So we can now make use of that again, right?
All we need to do is to remove this function here
from this scope, right, because if it would be like this,
we cannot use it in our other methods or functions.
So I have to remove it from here, because the other methods
don't have access to it, and so I'm going
to put it out here, out of the object,
so right here after the formatNumber function.
So it's still a private function, so only the methods
that are in here, in this control module,
can use this function, okay?
So let's go back to where we were,
and now use this function to loop over our selection.
So nodeListForEach, then input our fields,
and our callback function.
So we want the current element,
and the index number we don't really need,
because all we want to do is to add
the red-focus class on the current element.
So cur, classList, remember, and now
I can put add, and then the class name, so red-focus.
Now the problem with this is that once
this change event occurs, and this function here
gets called, this red-focus class will get added
and will never again be removed,
because we don't have the remove method anywhere.
And actually, using remove would not be ideal
because we have something better, which is toggle.
And remember, what toggle does, basically it adds
the red-focus class when it's not there,
and when it's there on some element, then it removes it.
And that's exactly what we want.
So each time that the type changes, you want this class
to change, and change in this case means
that it's there or that it's not there.
Okay, so this would already work.
So let's check that.
So now it's blue, and it's still blue.
So let me click here as well so nothing really happens.
So let's open up the console.
Let's see, so we have some syntax error,
so let's go to line 323.
323, so it's this one here.
Okay, so I have two parentheses here,
so we don't need this, of course,
so let's now try it again.
So now we don't have a buck,
and yeah, it's red now.
And so now, when we click here, all of this is red,
and so we instantly know that we're working
with an expense here.
And now if we change it back, then the change event
is triggered again, and so we toggle our class.
So the class is now removed, so it's now gone again.
And the same thing here and here, and if I click again,
then the class is toggled again,
and now it's back on this element.
The only small thing left to do
is to now add the red class here on our button.
And that's the easiest thing in the world, right?
So we just need to add another line here,
saying document.querySelector,
and we do this because it's only one element,
so DOMstrings, and this one is the input button.
And again, we want to toggle it, because of the same reasons
that I explained before, and this one is called red.
Okay, and that's it.
So let's try it again.
So everything is blue, the button is blue,
now change to red, and now look at the button,
and it turned red.
So, amazing, right?
So let's add an expense here
to see if nothing else is broken in the app now.
So 500, and yeah, it works.
Or dining out for 58.25,
and let's add a salary, and now everything
should turn blue again.
And yes, so it's blue, or green, whatever,
and now the salary is 2500,
and yeah, everything works as expected.
And that's actually it, everyone.
We have now finally and officially finished
this beautiful application.
And it has now all the features that we planned to include,
and it has a really polished user interface, right?
So it really looks great, and it also works great.
So really, congratulations for making it this far
and for really learning and understanding all
of these exciting new things about JavaScript.
And now this jumps right into the next lecture,
which is also the last one of this project,
just to take a look at the final structure of our app.