Instructor: In this lecture,
it's finally time
to add our newly created object
to the user interface
and this means that we're going to do some DOM manipulation
for the first time in this project
and this means that you're going to learn
a technique for adding big chunks of HTML into the DOM,
how to replace parts of strings,
and also how to do DOM manipulation
using the insert Adjacent HTML method.
So it's time to go back to our user interface controller
and add a new public method here right
and I'm going to put it right here
and this one is going to be called add a list item.
So add list item.
So our function as always
enter function body
and what kind of information do we need
to add this new item to the list?
First we need the object itself.
So let's call it object
and then the type so if it's an incoming
or an expanse so we already know that.
So in this object is the exact same object
that we created using a function constructor
and then passed to our app controller
in the last lecture.
So let's quickly review that.
So down here in the control and item function
which remember is the function that is called
when someone hits the input button
or hits the enter key.
Then we first read the input out of the fields,
store it into the input variable,
then using this input variable,
and then item method we create a new item
and we return it and store it in this variable.
So in here in the new item variable
we now have the new object
and that's the object that we're going to pass
to or add list item method.
Does that make sense to you?
So again the logic here is that this method here
or this function is like the control center
of the application.
So it tells the item modules what it should do
and it then gets data back
that it can then use in other things
such as this input variable for example
and this new item variable
that we will use to display the object on the interface.
So let's go back to the add list item method.
So what are we going to do here?
So this will be in three steps.
So the first thing is to create an HTML string
with some placeholder text
so create HTML string with placeholder text
and then we're going to replace the placeholder text
with some actual data
which is the data that receive from the object
and then finally we insert
the HTML into the DOM.
Make sense?
So let's talk about the first part
which is creating the HTML string
and for that we need to look at our HTML file.
Okay so in here this is how an income item
looks like.
So we have the description here right so salary in this case
then the value which would be 2100 here
then we also a delete button.
Okay so this is the HTML for an income
and then down here we have the expense
which actually looks pretty similar.
The only difference is that we have the item percentage
class here which we're going to talk about later.
So this is one of the differences
and the other difference is that ID for the expenses
which is expense zero, expense one, and so on
and so forth
and then it's income zero, income one, income two,
and so on and so forth.
So we actually need to create different HTML strings
for incomes and for expenses.
So let's start with the incomes
and I will just copy all of this
and paste it here into our JavaScript okay.
All right.
So this looks a bit weird now
because the JavaScript file
is of course not to write HTML.
So what we're going to do now
is to put this our single quotes
like this
and now all we need to do is to remove all of
these spaces here.
Okay.
So this is bit boring work
but we'll have to do it.
Okay.
All right so now this is a string
which contains a lot of HTML
and actually this is a good place to show you the difference
between the single quotes, these ones here
and the double quotes.
So inside of the single quotes we have lots of
double quotes in here so all of these
so see here, all of these are double quotes
and so JavaScript doesn't interpret this
as an end of the string because we began the string
with the single quote and so the end of the string
is a single quote as well.
Now if we have put the double quotes here like this,
then JavaScript would only interpret this as the string
here because then it would be the beginning of the string
and here the end
and then here a new beginning and here a new end
but that's of course not what we want.
So we want a single quote here.
Now if all of these would be single quotes in here
and not double quotes
then in the outside we would put double quotes
and then it would work as well.
All right so let's call this one HTML
and I'm going to declare it up here.
Okay so this is the one for income
and one for outcome will actually be pretty similar
so let's get this one as well.
So this is like a template
that we copy here into the JavaScript file
so that we can then use it.
So once again we remove all of these white spaces here.
And here we go.
So now put the quotes around this
and here we go.
And now what I need to do
is actually to create an if else statement
because of the type.
So if the type is income
so inc
then we want this to be the HTML string okay.
And else if the type is exp
so for expense
then it should be this HTML string.
All right and now what we want to do
is to replace the actual data that is in here
with some placeholder
and that's because what we then receive our object here
right we can then go ahead and replace these placeholders
with the actual data.
So let's do that.
So let's replace this with something like this.
So percentage ID percentage
and I use these percentage symbols here
so that the placeholder text is easier to find here
and that we don't override something
that we don't want okay.
So in here it's going to be a value right
so value
and I'm missing the description.
Here it is okay.
So description
and of course the same thing in here.
So this is where the ID will go.
This is the description
and then here the value.
All right cool.
So let's now go to the next step
which is to replace the placeholder
with the actual data
and in order to do that,
we will use a brand new method
that we have never used before
which is the replace method.
So let's say I will create a new variable first.
New HTML okay.
So let's say new HTML
is HTML which is our string
and then strings have a bunch of their own methods
just like array
and since HTML is a string we can use all
the strings methods here.
So we use the replace method
and what replace does is exactly what we want.
It searches for a string
and then replaces that string with the data
that we put into the method.
So let's start with the ID here.
So our placeholder text goes like this.
ID and what we want to replace it with
is our object.ID.
Okay because remember the ID property is the one
that holds of course the ID
and we can see that here okay.
So these are our function constructors
and they are called ID, description and value.
So these are the three that we will have here
in our add list method
and that we can use to replace our placeholder strings.
So this was the first replacement
and now we can override this new variable that we created
and now we will not replace the placeholder
in HTML again because it's the new HTML variable now
where we have made this replacement here.
So if we would now do HTML replace again,
then this ID placeholder here would still be there.
Okay so we actually need to do it
on the new HTML.
Replace and let's go with the description now
and say object.description
and now I'm just going to duplicate this
so here is value and here is value as well.
All right and now all we need to do
is to insert this into the DOM
and that's something new that we didn't do before
so let's see how we can do that.
So we first need to select some element
on our webpage so from the DOM
and then we can insert our HTML next to that
and we're going to use the insert adjacent HTML method
for that
so let's take a look at the reference page
of that element
and it's right here.
So this insert adjacent HTML method
first accepts the position
and then the text so the string,
the HTML that we want to insert
and there are four different positions
in which we can insert the HTML.
So imagine that this p element was the one
that we selected.
We can then insert before that element
even begins
so we use before begin.
We can insert it as a sibling after that
so after end or we can insert it as a child of p
and then we have two options
which is after begin,
which is basically before any content inside
of the p element
so after the p element begin
and then before the end.
So at the end of the p element
but after all of the content that is inside of it
and that one is actually the one
that we're going to use.
So we're going to use before end
and I will show you why that is.
So let's go back to our HTML file
and what we're going to do is to add the expenses
into this expense list container
and in there will be a lot of child elements
so all of these expenses will be childs
of the expense list container.
So that's for expenses
and for incomes it's called the income list.
So in this case the div element here has a class
of income list so we actually need these two
and then decide which one we want to
append this new HTML.
So let's start with the income list
and maybe you can guess what we're going to do now.
We will put a new field in your property
here in our DOM strings okay.
I'm going to call it the income container.
Income container
and then I will paste it here.
Sorry I didn't copy it.
So income list.
Okay and then I'm going to duplicate this line
and do the same for the expenses.
So expenses container will be the expense list.
So again this is the element that we want to select
if we have an income
and this is the element that we want to select
if we have an expense.
So let's do that here in our add list item method.
So we can use this if else statement for that right?
So if it's an income we can say that the element
should be DOM strings.income container.
All right and I still have to declare it here.
So element and now in case that it's an expense
then the element will be DOM strings.expenses container.
All right and now we're ready to select this.
So document.query selector
and now we simply select the element.
Okay so very easy.
This element will be
the income list if it's an income
and the expense list if it's an expense.
All right and now it's time to use your insert adjacent
HTML method.
All right and as we said we're going to use
before end.
So before end and then what we want to insert there
is of course our HTML.
So the string that we produced
and actually it's not HTML.
It is new HTML
because that's the one that already has all our value,
description and ID.
So again this before end keyword here
makes it so that all of our HTML will be inserted
as a child of these containers
so this income list and the expense list
but as the last child
so as the last element in the list.
So if you already had like two or three items here,
then the next one would be here after that
so the last one.
Let's just look again at the reference.
So imagine if we would use before begin.
Then the new element would be inserted right here
so before this income list
so not a child, but as a sibling
and before this element
and then after the end
would be down here
so also as a sibling but after this element.
Okay but enough code let's now see if this actually works.
So again we need to reload this okay.
Application has started
so everything seems to work up until this point.
So I'm now going to add it an income.
Let's say project for 1500 Euros
and nothing happened and that makes a lot of sense
of course because nowhere in our code
we called this add list item method right.
So before making it possible to anything appear here,
of course we need to first call this.
So we do this of course in our control add item function
so it's as simple as this.
UI controller add list item
and now as I said in the beginning,
what we're going to pass in here
is the new item that was created here before.
Okay.
So the object created through one of our
function constructors.
So the new item and then the type.
So we're going to use input not type right
because that's where our type is stored.
So whether it's an income or an expense
and now it should be ready to work.
So again project 1500.
Oh yeah here it is.
So it worked.
It is here in our user interface.
How cool is that right?
So it really worked.
This is really cool.
So let's try it with another one.
Let's say we sold our car for 2500
and yeah here it is also.
So for me this is a really magical moment
when we hit the enter button here
and then something like magic appears
here on our webpage.
So this is really cool.
Let's try out an expense now.
Let's say our rent is like I don't know
950 dollars and now it should appear in expenses right
and yes here it goes.
So everything works exactly as expected.
Now forget about this 21 percent here
because this is just the text that we copied
from our HTML page
and we're going to take care of this later
but for now what matters here is that
at this point we're able to really add the elements
to our user interface.
So this is already a great achievement.
So now that we have this,
over the next lectures we're going to take care here
of the budget part
so we're going to calculate the budget
and update it here on the user interface as well.
So don't wait
and join me right in the next lecture.