Instructor: In this lecture
we are going to read the income or expense data
out of the user interface or input fields
so that we can use it in our app later.
So it only makes sense that in this lecture
you're going to learn how to read data
from different HTML input types.
Okay, so here we are in the app controller
and the logic in this project will always be
that in the controller is the place
where we tell the other modules what to do.
So we write methods in the UI controller
and in the budget controller to get some data for us
or to calculate something
and then in here in the controller we call these methods.
So in this particular case that I want to get the input
from the user interface I'm going to write the method
in the user interface controller
and then call it here in the controller
so that I can get this data and then use it further.
For example, to pass it into the other controller
so that it can then add the input data as a new expense
or a new income to the data structure
that we're gonna create later.
So let's now start by writing a method
into the UI controller to get our input.
So here in the UI controller we're going to write a method
or a function.
Now, this is a function that we want to use
in the other controller, right?
So it cannot be a private function, right?
So instead it's going to be a public function
or a public method.
So it will have to be in the object that this function here,
this IIFE will return.
So again, and I'm sure that you remember this,
this code here will execute immediately
and then the object that we return will be assigned
to this UI controller here
and all the variables and the functions that we define
in the function will stay in the closure
even after this function returns.
The object that's going to be returned from this
will have access
to these private methods or functions and variables.
Alright, so let's write our method.
So return, as we were saying, right?
And we return this object.
So let's say get input.
So a function without any parameters
and now in here we read the data from the user interface.
So what do we have in the UI?
So we have the type here, so if it's an income or an expense
then we have the description and the value.
So let's see that in the HTML file
and let's actually now take a deeper look at this file
as I promised you before.
So basically the UI is divided in two parts
with just the top part here with just this one,
all of this is the top part and then all of this here
is the bottom part, okay?
So we have the top part and in here
we have of course the budget title, the month,
which we're going to replace later.
Then we have the budget value here,
we have the budget value of the income only,
and also of the expenses.
So all of these are in the top part
and we're going to use all of these later on, right?
And then we have the bottom here
and in here we have the add container.
Which is basically our form, so where we have our input,
and then our inputs are the add type,
which is for the income or expense type.
We have the add description and the add value
and the add button that we already used
to set up the event handler.
Okay, then below that the container.
So basically all of this here, right?
This part here of the user interface is the container,
which is also divided in two parts.
It has an income part on the left side
and an expenses part on the right side.
And each of this has of course a title, right,
and then it has a list.
So an income list and down here an expenses list, okay?
So right now these are empty because all of the items
are commented out here so that it's empty in the beginning
but this is how an item looks like.
So this block of code here is an item
and we will take a closer look at this one
once we start adding items to our user interface.
So let's now concentrate on what we need for this step
which is this add type, add description, and add value.
So value, description, and type.
So we're gonna select all of them and retrieve their value.
So let's start with the type.
And we already did this in our other project, right?
So the logic is always the same.
We select something
and then we do something with the selection.
So document.querySelector and then remember
it was the class called add and type
and actually it has two underscores I think.
But let's just double check.
Yes, so two underscores, which is a special notation.
Okay and then simply use the value property.
Remember that one?
So that's actually it.
So with this we read the value of the type.
And since this is a select element in the HTML
it works a bit different.
So in these normal input elements like this one here,
so like this,
we simply get the value that's written here, right?
But in the select element, which is this one here,
what we get is these values that are specified.
So if the first one is selected what we get is inc,
which stands for income,
and if the second one with the minus is selected
then what we get is the exp, so expenses.
So let's just annotate this here so that we don't forget it.
So will be either inc or exp for expense.
Alright, and now the description.
So document.querySelector
and this one is add description.
And again we use the value.
And now finally the value.
So document, query selector,
add value and reading the property called value.
Alright, okay so now we have the three input values
stored in these three variables.
Now remember the controller is going to call this method
and it wants to receive back all of these values.
So we have to return something here, right?
So how do we return three values at the same time?
The best solution for this is to simply return an object
containing these three as properties.
So instead of having three separate variables
we should simply return an object with three properties
which are these three.
So let's do that.
So I'm saying return an object.
And so let me copy this in the inside.
Now of course I need to change some stuff
so we don't need these for our keywords
and it's not the equal operator
but this is how we define properties, right?
Oh and also these should be commas and not semicolons.
Okay, so this is our method for returning
all of the three inputs that we had in the user interface.
So let's now call this method from our controller
and we're gonna do it right here.
So under this comment here we will say var input
should be the result of calling the get input method
and it's a method of the UI controller, right?
So UI controller which is the module that we have access to
and then get input,
which is the public method that we can access.
And no parameters here.
So let's now console.log simply the input
and we can remove this console.log from down here, okay?
So remember this will happen
as soon as we either click the input button
or hit the Enter key because this is in the function, right?
So this is in the function that is called
when either one of these actions happen, right?
So let's now test this and I'm going to refresh it.
So let's say it's a minus, so an expense,
and I'm just calling it test and it's a number
and now I hit Enter and okay.
So we have an object actually and it has type expense.
So this is correct because it shows the minus here
then the description is test, right which we have here,
and the value is 23.
So everything is correct.
Let's just create another one.
So test2 with something else, let's say 12
and now hitting the key, so it also works.
So income and test2 and 12.
Cool, so now we have these two modules
talking to one another by calling each other's methods.
So this is the pattern
that we will see a lot of time happening.
So basically the controller calling some method
and these methods then do something and return it.
Now if you move up here to this method here
and to this controller there is actually one small problem
that I don't like so much
and that is that we're starting to have
all these strings here
for query selectors all over the place
like this one, this one, this one, and down here
there's also this one and they are only going to get more
as we proceed with our application.
And that's a problem
because imagine that we make some changes in the UI
and the class names and then we would have to change
all of these strings manually
and this of course could cost some serious bucks.
So instead we can simply create an object
where we store all of this data.
And since we're talking about the UI here
we should of course do it in the UI controller.
So we can create a private variable here
and call it DOMstrings, so DOMstrings.
And it's gonna be an object
and I will store all of the strings in here.
So let's say input type and then I put this one here.
And now I could go ahead
and simply write DOMstrings.inputType, alright.
So now if I decide to change all of the class names
in the entire user interface
then it's not such a big problem.
Then I just have to come here
and change the string in here as well.
And not in our entire code.
So this means that we have now a central place
where all the strings are nicely stored
and we can then retrieve them and change them easily.
So once again,
programming is not just to make things work in some way
but it's also to create the necessary structures
to make life easier
and this is definitely one of these moments
where we have to create some kind of data structure
to make it easier for us later on.
Okay, so input description
and of course it's going to be this one
and then the input value.
And now I just need to put them back here.
So DOMstrings and this was the input description
so inputDescription and then here the DOMstrings.inputValue.
So just to confirm,
let's reload this and see if it still works.
So test78 and yep, so it still works.
Alright, so now there's only one place left
where we have a hard coded string, which is in here.
Now the DOMstrings object
is in a different controller, right?
So we don't really have access to it from here.
So is the solution just to copy this object here
into our controller?
No, of course not, and you already know that by now, right?
So the best solution is of course to pass this object
from one controller from one module to the other.
So what I'm going to do is something similar
to the get input method here
and this one will simply be called get the DOMstrings.
And all we need in this function in this method here
is to return or private DOMstrings into the public.
So basically we are now exposing the DOMstrings object
into the public.
So I can now come down here into our controller
and to find a new variable to get the DOMstrings.
So UI controller.getDOMstrings.
And that's it.
So now inside of this DOM variable
we also have the DOMstrings that we have up here
in this controller
because once again we exposed them to the public
by using this method here, okay?
So now what I can do is of course
I first need to add this to the DOMstrings, right?
So I say
input button, okay?
And so now I can use it here.
So DOM.input button,
because remember now it's called DOM here
because that's the variable where it's stored now
and no longer DOMstrings.
So in this controller it's called DOM.
So let's test this again very quickly.
So again, test then let's say 55 here
and now I hit this button and yes, so down here it is.
So we're making some great progress here in our application
and we're getting a really nice structure here
which is something really important, as you know by now.
And so in the next lecture let's continue with that.
So, see you then.