Original subtitles

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.

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.