In this video, we're finally gonna be back
to DOM manipulation.
And we're gonna learn
a couple of DOM manipulation techniques.
And we will use them together
with the forEach method that we just learned about.
So this is really exciting stuff.
So let's get started.
And to start, let's actually open up the HTML and CSS files
and we will then keep them open here
throughout this project.
And I like to have the script always the last.
Now, in the HTML, we have this navigation bar.
So there's nav element, which has all of this top part.
And then after that we have the main element.
And so that's basically the entire application
and that part is right now invisible.
And so that's because here in the CSS,
so in line 87 we have the app selector
and the opacity is set to zero.
And so we need to comment that.
And for that we can as always use comment slash,
give it a save,
and then we can finally see the application here.
Alright.
So logging in and out of this application
is essentially just changing this opacity here.
And so now the opacity is basically back to 100
because now we commented it out
and so 100 is the default.
But anyway, let's go back to our script here.
And so what we want to do now
is to basically display these movements right here
in the application here in this list.
So in this container.
So for each movement, we want one element like this, okay.
And we will be able to do that
because of the forEach method
which will allow us to loop through this array.
And then in each iteration
basically create an element like this
and display it on the page.
So this time we're finally gonna move away from the console
and actually do some DOM manipulation here.
Now, right.
So let's move down here after these elements,
but still inside of the app part of this file
and then let's write our code.
Now we could simply start writing our code
out here in the global context.
However, that is not a good practice.
So whenever we do something like this,
it's always best to create a function.
So let's call this one print or a display.
I prefer display.
So displayMovements.
And then we make this function receive the data
with which it should actually work,
so in this case, that's the movements.
So we call this parameter movements
because this function should receive one array of movements
and then work with that data.
So in this case, that's the movements that it should display
in the user interface.
Now, right?
And so it's a good practice to pass the data
into a function
instead of, for example, having this function work
with a global variable.
That would work as well
but it's a lot better to pass that data directly
into the function.
Okay.
So get used to that kind of approach.
All right.
So again, instead of working with global variables,
start passing the data that function needs
actually into that function.
So let me, as always,
call this function first
to see what we will get as an input.
And so the movements that I will use here
will come from this account1.
So essentially that's gonna be this array.
So account1.movements.
Now, Okay.
And so inside of this function,
these movements are simply called movements.
And so now let's loop over these movements
using what we learned before.
So forEach and then our callback function here.
Now inside of this function,
we need the current movement
and we also need the index.
And that's because here actually I have them here
number one, number two.
And so basically we have the movements numbered like this.
Okay.
So starting with the first movement down
and then adding the new ones on top.
Okay.
All right.
So that's the easiest part.
Now we have to essentially create an HTML
that looks like this.
So let's go to our HTML file
and to actually take a look
at what does HTML looks like.
So we are inside our app element here basically.
Then we have this movements element
which is all of this container here.
And maybe it would be easier
to actually see this in the console.
So if we did this maybe we can get rid of this part.
Not really.
But anyway, now we can see
that all of this is the movements.
And then in each movement we have a movements_row.
So each of this is a movements_row.
Okay.
And so lets now copy the entire code
of one movements_row
because this is what we want to create
in each iteration of the loop with the current data.
So, essentially let's take all of this.
So I'm gonna copy it
and let me now paste it here into a template string.
So I'll create a variable,
which I'm gonna call HTML
and then I'm creating a template literal.
And template literals are amazing
for creating HTML templates,
like the one one we will create now,
because now it's really easy
to create a multi-line string like this.
Okay.
Let's just fix indentation here a little bit
to make this then easier to understand.
Okay.
And now all we have to do
is to basically replace the data that's not relevant,
so this hard coded data,
with our actual movements data.
Okay.
Now this part here of the date,
we will not do now.
We will take care of this in the next section,
So let's get rid of it.
And then here we have the movements_value.
So this is formatted
but again, we will just use the plain value
that's coming out of the array for now.
And so now we can simply insert that here.
And so that's mov, right?
So mov is the current element in the array
that we are looping over.
And so in each iteration
that will then be one of the movements in the array.
Then here we have 2 deposit.
And so we will have to check
whether a certain movement is a deposit or a withdrawal.
So let's delete that.
And for now we can add the number here.
So you see one, two,
and so for that, we now use the i.
And so that's why we also need it to do current index
besides just the current value.
Okay.
And now we need a way to knowing
if it's a deposit or a withdrawal.
And so let's use a ternary operator
and let's do that out here
as a separate variable,
because we will need that twice.
We will need it
one, to write it here on the user interface,
but here also, this class name depends on that.
So you see that we have type--deposit.
So that's in this green color
and we have type--withdrawal
and so that's in this red color.
So we will need this information twice.
And so let's just calculate it outside here.
So I'm gonna call it type.
And so this is the same logic as before.
So if the current movement is greater than zero
then the type should be deposit
or else it should then be withdrawal.
Okay.
And now let's write that here.
So to type here, and again also here in the class name.
So we can also basically construct this a class name here
which is very useful too.
And I hope here, you can see
that the template literal is really a lifesaver here.
Okay.
So we created our HTML template here.
Now, all we need to do
is to find a way to actually adding this HTML
onto the webpage here.
So we need to attach this HTML somehow into this container.
So into this movements element.
Okay.
And to do that,
we will use a method called insertAdjacentHTML.
So that's gotta go right here.
So let me first write the name of the method.
And then I'm gonna tell you
where we actually have to attach this method to.
So it's called insertAdjacentHTML.
And we are gonna call this method
on this movements element here.
So this container
onto which we want to add a new movements_row element.
So this element here
on which we want to add a new movement_row, right?
So we are looking for an element with a class of movements.
And as I told you in the last lecture,
I already selected all of these elements.
And so in this case, it's this one,
and so the name is containerMovements.
Okay.
So you see that I used kind of a uniform names here.
So I have containerApp
for this entire application container
and containerMovements.
Then all the other ones are called label.
So labelWelcome, date and so on and so forth.
Then the others are called button
and then all the input fields are all called input
and to then whatever the name of them,
so to keep it nice and easy to understand.
But anyway, this one is called containerMovements.
And so onto there, again, we call insertAdjacentHTML.
And this method accepts two strings.
The first string is the position
in which we want to attach the HTML.
And this one I'm gonna set to afterbegin,
but there are more options.
And I think the best way of showing it to you
is actually in the documentation.
So MDN.
And so whenever I need to figure out something,
this is how I do it.
So I know that down here,
there is a visualization,
and yeah.
So these are the four options here
and the one we chose is afterbegin.
So that's this one.
So imagine that this p element here
is our containerMovements.
And so basically I want to add new elements
right after the beginning of this element.
And so basically I'm saying here
that I want to insert the new child element
right after the beginning of the parent element.
And so again, that's containerMovements.
Then we have beforeend,
which is at the end of the element as the name says
and then we can even put it outside of the parent element.
And then we could even put it
outside of the containerMovements.
And sometimes this is useful as well.
But usually, I always use afterbegin or beforeend.
And once we see the results,
I will explain a bit better
why it's afterbegin and not beforeend.
But anyway, let's go back here
because now we need to specify the second argument
and that is the string containing the HTML
that we want to insert.
And that's it.
So if we now run this, it should already work.
And yes it does.
So that's amazing.
And let's check it out
and let's compare it with our values.
And so indeed, the newest one is the last one here.
And so that's element number eight
and it is indeed 1300, right?
And it is indeed green because it is a deposit.
So a positive number.
The same with the 70.
And then we have minus 130,
and so indeed that's a withdrawal.
Beautiful.
Now, if we scroll down here,
we will see that we still have these two old ones.
So basically the two that were already there.
And that's because all we are doing
is to add new elements to this container,
right?
We're only inserting new HTML here
inside of the containerMovements
but we are not overriding anything.
And so actually that has to be the first thing that we do.
So the first thing is to essentially
empty the entire container
and only then we start adding new elements.
So that's something common to do
and it is also not difficult at all.
So container movements
and now we can use the inner HTML property,
innerHTML,
and set it to the empty string
and that's it.
So this fixes our problem.
Alright.
Now in our HTML here
is a little bit similar to text content.
So remember that now the difference
is that text content simply returns the text itself
while HTML returns everything, including the HTML.
So all the HTML tags will be included.
Okay.
But here we are then using innerHTML as a setter.
So just like we also used text content equal empty string
or equal something else, remember?
So we used to do in our pic game, for example,
like whatever
(indistinct)
Text content,
and then set it to zero.
Remember that?
But as I said, we can also use this to read data.
So that's simply log to the console
just to understand this property
which is pretty important.
So after all this,
let's do containerMovements.innerHTML.
So we're simply reading the innerHTML
and then logging it to the console.
So console, and indeed, here you'll see all of this HTML.
All right.
So essentially that's the HTML that we just created.
Okay.
But let's get rid of this.
I just wanted to show you both sides
or both applications of innerHTML.
All right.
And finally, I wanted to show you
why I used afterbegin and not beforeend.
Well, let me show you what happened with beforeend.
I think this is how it works.
So beforeend.
Yeah.
So with that, the order of the movements would be inverted.
Okay.
And that's because each new element would simply be added
after the previous one.
So at the end of the container, right?
And so that's after all the child elements
that are already in there.
And that's why I wanted it to be the other way around
because like this, it will always be basically appended
to all the other children.
So any new child element
will appear before all the other child elements
that were already there.
And so now we are back to the order that we wanted here.
ALright.
That's amazing.
So we completed the first part
of our user interface here already
and all with the power of the forEach method.
And then also we introduced some new concepts
in particular here the insertAdjacentHTML method,
and then the innerHTML property.
Now, there are many other ways
of creating elements in JavaScript besides this one here.
And we're gonna study all of them
in great detail in a future section.
But this here is actually the one that I liked the most.
It's the easy, quick and dirty solution, so to say.
So all we have to do is to create a string of HTML.
And then we can insert that simply with this method.
So very simple, very straightforward.
So this is some great DOM manipulation
that we did right here.
And I'm really happy about the result
that we got here in our application.
Great.
So let's now move on.