1
00:00:01,340 --> 00:00:04,160
In this video, we're finally gonna be back
2
00:00:04,160 --> 00:00:06,430
to DOM manipulation.
3
00:00:06,430 --> 00:00:07,270
And we're gonna learn
4
00:00:07,270 --> 00:00:09,960
a couple of DOM manipulation techniques.
5
00:00:09,960 --> 00:00:12,060
And we will use them together
6
00:00:12,060 --> 00:00:15,730
with the forEach method that we just learned about.
7
00:00:15,730 --> 00:00:18,320
So this is really exciting stuff.
8
00:00:18,320 --> 00:00:20,003
So let's get started.
9
00:00:21,840 --> 00:00:26,840
And to start, let's actually open up the HTML and CSS files
10
00:00:27,510 --> 00:00:30,070
and we will then keep them open here
11
00:00:30,070 --> 00:00:31,493
throughout this project.
12
00:00:32,540 --> 00:00:35,900
And I like to have the script always the last.
13
00:00:35,900 --> 00:00:40,380
Now, in the HTML, we have this navigation bar.
14
00:00:40,380 --> 00:00:44,570
So there's nav element, which has all of this top part.
15
00:00:44,570 --> 00:00:47,770
And then after that we have the main element.
16
00:00:47,770 --> 00:00:51,070
And so that's basically the entire application
17
00:00:51,070 --> 00:00:53,683
and that part is right now invisible.
18
00:00:54,520 --> 00:00:57,593
And so that's because here in the CSS,
19
00:00:58,480 --> 00:01:02,130
so in line 87 we have the app selector
20
00:01:02,130 --> 00:01:04,580
and the opacity is set to zero.
21
00:01:04,580 --> 00:01:06,690
And so we need to comment that.
22
00:01:06,690 --> 00:01:09,770
And for that we can as always use comment slash,
23
00:01:09,770 --> 00:01:11,720
give it a save,
24
00:01:11,720 --> 00:01:16,420
and then we can finally see the application here.
25
00:01:16,420 --> 00:01:17,810
Alright.
26
00:01:17,810 --> 00:01:21,110
So logging in and out of this application
27
00:01:21,110 --> 00:01:25,340
is essentially just changing this opacity here.
28
00:01:25,340 --> 00:01:29,960
And so now the opacity is basically back to 100
29
00:01:29,960 --> 00:01:32,520
because now we commented it out
30
00:01:32,520 --> 00:01:34,233
and so 100 is the default.
31
00:01:35,370 --> 00:01:38,730
But anyway, let's go back to our script here.
32
00:01:38,730 --> 00:01:40,950
And so what we want to do now
33
00:01:40,950 --> 00:01:45,000
is to basically display these movements right here
34
00:01:45,000 --> 00:01:48,110
in the application here in this list.
35
00:01:48,110 --> 00:01:49,810
So in this container.
36
00:01:49,810 --> 00:01:54,810
So for each movement, we want one element like this, okay.
37
00:01:55,450 --> 00:01:57,180
And we will be able to do that
38
00:01:57,180 --> 00:01:59,400
because of the forEach method
39
00:01:59,400 --> 00:02:02,580
which will allow us to loop through this array.
40
00:02:02,580 --> 00:02:04,080
And then in each iteration
41
00:02:05,150 --> 00:02:07,400
basically create an element like this
42
00:02:07,400 --> 00:02:09,730
and display it on the page.
43
00:02:09,730 --> 00:02:13,490
So this time we're finally gonna move away from the console
44
00:02:13,490 --> 00:02:16,630
and actually do some DOM manipulation here.
45
00:02:16,630 --> 00:02:17,800
Now, right.
46
00:02:17,800 --> 00:02:21,563
So let's move down here after these elements,
47
00:02:22,520 --> 00:02:25,650
but still inside of the app part of this file
48
00:02:26,490 --> 00:02:28,450
and then let's write our code.
49
00:02:28,450 --> 00:02:30,920
Now we could simply start writing our code
50
00:02:30,920 --> 00:02:33,330
out here in the global context.
51
00:02:33,330 --> 00:02:35,740
However, that is not a good practice.
52
00:02:35,740 --> 00:02:38,170
So whenever we do something like this,
53
00:02:38,170 --> 00:02:40,563
it's always best to create a function.
54
00:02:41,530 --> 00:02:46,470
So let's call this one print or a display.
55
00:02:46,470 --> 00:02:48,440
I prefer display.
56
00:02:48,440 --> 00:02:50,240
So displayMovements.
57
00:02:51,420 --> 00:02:54,100
And then we make this function receive the data
58
00:02:54,100 --> 00:02:57,380
with which it should actually work,
59
00:02:57,380 --> 00:03:00,360
so in this case, that's the movements.
60
00:03:00,360 --> 00:03:02,850
So we call this parameter movements
61
00:03:02,850 --> 00:03:07,850
because this function should receive one array of movements
62
00:03:07,920 --> 00:03:10,400
and then work with that data.
63
00:03:10,400 --> 00:03:13,660
So in this case, that's the movements that it should display
64
00:03:13,660 --> 00:03:15,360
in the user interface.
65
00:03:15,360 --> 00:03:16,210
Now, right?
66
00:03:16,210 --> 00:03:18,910
And so it's a good practice to pass the data
67
00:03:18,910 --> 00:03:20,240
into a function
68
00:03:20,240 --> 00:03:23,510
instead of, for example, having this function work
69
00:03:23,510 --> 00:03:25,150
with a global variable.
70
00:03:25,150 --> 00:03:26,990
That would work as well
71
00:03:26,990 --> 00:03:30,070
but it's a lot better to pass that data directly
72
00:03:30,070 --> 00:03:31,690
into the function.
73
00:03:31,690 --> 00:03:32,523
Okay.
74
00:03:32,523 --> 00:03:35,160
So get used to that kind of approach.
75
00:03:35,160 --> 00:03:36,170
All right.
76
00:03:36,170 --> 00:03:39,510
So again, instead of working with global variables,
77
00:03:39,510 --> 00:03:42,370
start passing the data that function needs
78
00:03:42,370 --> 00:03:44,363
actually into that function.
79
00:03:45,230 --> 00:03:46,673
So let me, as always,
80
00:03:48,660 --> 00:03:50,400
call this function first
81
00:03:50,400 --> 00:03:54,020
to see what we will get as an input.
82
00:03:54,020 --> 00:03:56,080
And so the movements that I will use here
83
00:03:57,800 --> 00:04:00,070
will come from this account1.
84
00:04:00,070 --> 00:04:03,040
So essentially that's gonna be this array.
85
00:04:03,040 --> 00:04:05,663
So account1.movements.
86
00:04:07,670 --> 00:04:12,260
So account1.movements.
87
00:04:12,260 --> 00:04:13,100
Now, Okay.
88
00:04:13,100 --> 00:04:15,430
And so inside of this function,
89
00:04:15,430 --> 00:04:19,050
these movements are simply called movements.
90
00:04:19,050 --> 00:04:22,510
And so now let's loop over these movements
91
00:04:22,510 --> 00:04:24,560
using what we learned before.
92
00:04:24,560 --> 00:04:29,560
So forEach and then our callback function here.
93
00:04:30,610 --> 00:04:32,570
Now inside of this function,
94
00:04:32,570 --> 00:04:34,820
we need the current movement
95
00:04:34,820 --> 00:04:37,420
and we also need the index.
96
00:04:37,420 --> 00:04:41,140
And that's because here actually I have them here
97
00:04:41,140 --> 00:04:43,060
number one, number two.
98
00:04:43,060 --> 00:04:47,260
And so basically we have the movements numbered like this.
99
00:04:47,260 --> 00:04:48,110
Okay.
100
00:04:48,110 --> 00:04:50,520
So starting with the first movement down
101
00:04:50,520 --> 00:04:52,853
and then adding the new ones on top.
102
00:04:54,860 --> 00:04:56,471
Okay.
103
00:04:56,471 --> 00:04:57,304
All right.
104
00:04:57,304 --> 00:04:58,880
So that's the easiest part.
105
00:04:58,880 --> 00:05:02,780
Now we have to essentially create an HTML
106
00:05:02,780 --> 00:05:05,130
that looks like this.
107
00:05:05,130 --> 00:05:07,860
So let's go to our HTML file
108
00:05:07,860 --> 00:05:10,770
and to actually take a look
109
00:05:10,770 --> 00:05:12,973
at what does HTML looks like.
110
00:05:13,900 --> 00:05:18,820
So we are inside our app element here basically.
111
00:05:18,820 --> 00:05:21,460
Then we have this movements element
112
00:05:21,460 --> 00:05:24,320
which is all of this container here.
113
00:05:24,320 --> 00:05:25,930
And maybe it would be easier
114
00:05:25,930 --> 00:05:28,373
to actually see this in the console.
115
00:05:30,540 --> 00:05:35,540
So if we did this maybe we can get rid of this part.
116
00:05:36,890 --> 00:05:37,723
Not really.
117
00:05:39,120 --> 00:05:40,460
But anyway, now we can see
118
00:05:40,460 --> 00:05:42,303
that all of this is the movements.
119
00:05:43,152 --> 00:05:46,670
And then in each movement we have a movements_row.
120
00:05:46,670 --> 00:05:50,000
So each of this is a movements_row.
121
00:05:50,000 --> 00:05:51,180
Okay.
122
00:05:51,180 --> 00:05:53,350
And so lets now copy the entire code
123
00:05:53,350 --> 00:05:55,220
of one movements_row
124
00:05:55,220 --> 00:05:57,640
because this is what we want to create
125
00:05:57,640 --> 00:06:01,203
in each iteration of the loop with the current data.
126
00:06:02,950 --> 00:06:07,950
So, essentially let's take all of this.
127
00:06:07,990 --> 00:06:09,140
So I'm gonna copy it
128
00:06:10,560 --> 00:06:14,403
and let me now paste it here into a template string.
129
00:06:15,290 --> 00:06:17,096
So I'll create a variable,
130
00:06:17,096 --> 00:06:19,540
which I'm gonna call HTML
131
00:06:19,540 --> 00:06:22,140
and then I'm creating a template literal.
132
00:06:22,140 --> 00:06:24,800
And template literals are amazing
133
00:06:24,800 --> 00:06:26,970
for creating HTML templates,
134
00:06:26,970 --> 00:06:29,830
like the one one we will create now,
135
00:06:29,830 --> 00:06:31,270
because now it's really easy
136
00:06:31,270 --> 00:06:34,583
to create a multi-line string like this.
137
00:06:36,940 --> 00:06:37,773
Okay.
138
00:06:37,773 --> 00:06:40,450
Let's just fix indentation here a little bit
139
00:06:40,450 --> 00:06:42,400
to make this then easier to understand.
140
00:06:43,689 --> 00:06:44,522
Okay.
141
00:06:44,522 --> 00:06:46,210
And now all we have to do
142
00:06:46,210 --> 00:06:50,106
is to basically replace the data that's not relevant,
143
00:06:50,106 --> 00:06:52,450
so this hard coded data,
144
00:06:52,450 --> 00:06:55,355
with our actual movements data.
145
00:06:55,355 --> 00:06:57,220
Okay.
146
00:06:57,220 --> 00:06:58,890
Now this part here of the date,
147
00:06:58,890 --> 00:07:00,500
we will not do now.
148
00:07:00,500 --> 00:07:03,058
We will take care of this in the next section,
149
00:07:03,058 --> 00:07:05,760
So let's get rid of it.
150
00:07:05,760 --> 00:07:08,187
And then here we have the movements_value.
151
00:07:09,220 --> 00:07:10,470
So this is formatted
152
00:07:10,470 --> 00:07:13,300
but again, we will just use the plain value
153
00:07:13,300 --> 00:07:15,573
that's coming out of the array for now.
154
00:07:16,460 --> 00:07:19,875
And so now we can simply insert that here.
155
00:07:19,875 --> 00:07:23,640
And so that's mov, right?
156
00:07:23,640 --> 00:07:26,380
So mov is the current element in the array
157
00:07:26,380 --> 00:07:28,120
that we are looping over.
158
00:07:28,120 --> 00:07:29,400
And so in each iteration
159
00:07:29,400 --> 00:07:33,253
that will then be one of the movements in the array.
160
00:07:34,250 --> 00:07:37,390
Then here we have 2 deposit.
161
00:07:37,390 --> 00:07:38,660
And so we will have to check
162
00:07:38,660 --> 00:07:43,580
whether a certain movement is a deposit or a withdrawal.
163
00:07:43,580 --> 00:07:45,650
So let's delete that.
164
00:07:45,650 --> 00:07:48,455
And for now we can add the number here.
165
00:07:48,455 --> 00:07:50,686
So you see one, two,
166
00:07:50,686 --> 00:07:54,350
and so for that, we now use the i.
167
00:07:54,350 --> 00:07:57,850
And so that's why we also need it to do current index
168
00:07:57,850 --> 00:07:59,943
besides just the current value.
169
00:08:01,560 --> 00:08:02,560
Okay.
170
00:08:02,560 --> 00:08:04,700
And now we need a way to knowing
171
00:08:04,700 --> 00:08:07,750
if it's a deposit or a withdrawal.
172
00:08:07,750 --> 00:08:11,220
And so let's use a ternary operator
173
00:08:11,220 --> 00:08:12,850
and let's do that out here
174
00:08:12,850 --> 00:08:14,440
as a separate variable,
175
00:08:14,440 --> 00:08:16,380
because we will need that twice.
176
00:08:16,380 --> 00:08:17,213
We will need it
177
00:08:17,213 --> 00:08:20,306
one, to write it here on the user interface,
178
00:08:20,306 --> 00:08:23,953
but here also, this class name depends on that.
179
00:08:24,840 --> 00:08:28,550
So you see that we have type--deposit.
180
00:08:28,550 --> 00:08:31,880
So that's in this green color
181
00:08:31,880 --> 00:08:35,270
and we have type--withdrawal
182
00:08:35,270 --> 00:08:37,023
and so that's in this red color.
183
00:08:38,550 --> 00:08:41,770
So we will need this information twice.
184
00:08:41,770 --> 00:08:43,970
And so let's just calculate it outside here.
185
00:08:45,830 --> 00:08:47,563
So I'm gonna call it type.
186
00:08:49,060 --> 00:08:51,820
And so this is the same logic as before.
187
00:08:51,820 --> 00:08:55,200
So if the current movement is greater than zero
188
00:08:56,652 --> 00:09:00,230
then the type should be deposit
189
00:09:00,230 --> 00:09:03,213
or else it should then be withdrawal.
190
00:09:04,357 --> 00:09:05,573
Okay.
191
00:09:06,420 --> 00:09:09,593
And now let's write that here.
192
00:09:10,800 --> 00:09:14,540
So to type here, and again also here in the class name.
193
00:09:14,540 --> 00:09:19,540
So we can also basically construct this a class name here
194
00:09:20,290 --> 00:09:21,803
which is very useful too.
195
00:09:22,840 --> 00:09:24,710
And I hope here, you can see
196
00:09:24,710 --> 00:09:28,423
that the template literal is really a lifesaver here.
197
00:09:30,400 --> 00:09:31,910
Okay.
198
00:09:31,910 --> 00:09:36,020
So we created our HTML template here.
199
00:09:36,020 --> 00:09:37,510
Now, all we need to do
200
00:09:37,510 --> 00:09:41,520
is to find a way to actually adding this HTML
201
00:09:41,520 --> 00:09:43,860
onto the webpage here.
202
00:09:43,860 --> 00:09:48,860
So we need to attach this HTML somehow into this container.
203
00:09:50,290 --> 00:09:52,550
So into this movements element.
204
00:09:52,550 --> 00:09:53,940
Okay.
205
00:09:53,940 --> 00:09:55,210
And to do that,
206
00:09:55,210 --> 00:09:58,567
we will use a method called insertAdjacentHTML.
207
00:10:00,470 --> 00:10:04,263
So that's gotta go right here.
208
00:10:05,710 --> 00:10:09,210
So let me first write the name of the method.
209
00:10:09,210 --> 00:10:10,260
And then I'm gonna tell you
210
00:10:10,260 --> 00:10:13,533
where we actually have to attach this method to.
211
00:10:15,140 --> 00:10:16,840
So it's called insertAdjacentHTML.
212
00:10:20,779 --> 00:10:22,730
And we are gonna call this method
213
00:10:22,730 --> 00:10:25,390
on this movements element here.
214
00:10:25,390 --> 00:10:26,700
So this container
215
00:10:26,700 --> 00:10:30,780
onto which we want to add a new movements_row element.
216
00:10:30,780 --> 00:10:32,310
So this element here
217
00:10:32,310 --> 00:10:37,310
on which we want to add a new movement_row, right?
218
00:10:37,310 --> 00:10:40,930
So we are looking for an element with a class of movements.
219
00:10:40,930 --> 00:10:43,400
And as I told you in the last lecture,
220
00:10:43,400 --> 00:10:46,450
I already selected all of these elements.
221
00:10:46,450 --> 00:10:48,770
And so in this case, it's this one,
222
00:10:48,770 --> 00:10:51,347
and so the name is containerMovements.
223
00:10:52,690 --> 00:10:54,020
Okay.
224
00:10:54,020 --> 00:10:57,870
So you see that I used kind of a uniform names here.
225
00:10:57,870 --> 00:10:59,590
So I have containerApp
226
00:10:59,590 --> 00:11:02,670
for this entire application container
227
00:11:02,670 --> 00:11:04,400
and containerMovements.
228
00:11:04,400 --> 00:11:07,010
Then all the other ones are called label.
229
00:11:07,010 --> 00:11:10,600
So labelWelcome, date and so on and so forth.
230
00:11:10,600 --> 00:11:13,650
Then the others are called button
231
00:11:13,650 --> 00:11:17,100
and then all the input fields are all called input
232
00:11:17,100 --> 00:11:19,823
and to then whatever the name of them,
233
00:11:20,900 --> 00:11:24,010
so to keep it nice and easy to understand.
234
00:11:24,010 --> 00:11:27,537
But anyway, this one is called containerMovements.
235
00:11:28,470 --> 00:11:33,017
And so onto there, again, we call insertAdjacentHTML.
236
00:11:33,960 --> 00:11:37,060
And this method accepts two strings.
237
00:11:37,060 --> 00:11:39,000
The first string is the position
238
00:11:39,000 --> 00:11:41,723
in which we want to attach the HTML.
239
00:11:42,650 --> 00:11:45,490
And this one I'm gonna set to afterbegin,
240
00:11:47,100 --> 00:11:48,990
but there are more options.
241
00:11:48,990 --> 00:11:52,290
And I think the best way of showing it to you
242
00:11:52,290 --> 00:11:55,750
is actually in the documentation.
243
00:11:55,750 --> 00:11:56,713
So MDN.
244
00:11:57,960 --> 00:12:00,530
And so whenever I need to figure out something,
245
00:12:00,530 --> 00:12:01,623
this is how I do it.
246
00:12:03,700 --> 00:12:04,810
So I know that down here,
247
00:12:04,810 --> 00:12:06,863
there is a visualization,
248
00:12:07,810 --> 00:12:09,410
and yeah.
249
00:12:09,410 --> 00:12:11,990
So these are the four options here
250
00:12:11,990 --> 00:12:15,038
and the one we chose is afterbegin.
251
00:12:15,038 --> 00:12:16,463
So that's this one.
252
00:12:17,920 --> 00:12:20,100
So imagine that this p element here
253
00:12:20,100 --> 00:12:22,400
is our containerMovements.
254
00:12:22,400 --> 00:12:24,910
And so basically I want to add new elements
255
00:12:24,910 --> 00:12:28,290
right after the beginning of this element.
256
00:12:28,290 --> 00:12:30,310
And so basically I'm saying here
257
00:12:30,310 --> 00:12:33,150
that I want to insert the new child element
258
00:12:33,150 --> 00:12:36,250
right after the beginning of the parent element.
259
00:12:36,250 --> 00:12:39,038
And so again, that's containerMovements.
260
00:12:39,038 --> 00:12:40,380
Then we have beforeend,
261
00:12:40,380 --> 00:12:44,490
which is at the end of the element as the name says
262
00:12:44,490 --> 00:12:48,380
and then we can even put it outside of the parent element.
263
00:12:48,380 --> 00:12:49,780
And then we could even put it
264
00:12:49,780 --> 00:12:52,048
outside of the containerMovements.
265
00:12:52,048 --> 00:12:55,630
And sometimes this is useful as well.
266
00:12:55,630 --> 00:13:00,040
But usually, I always use afterbegin or beforeend.
267
00:13:00,040 --> 00:13:01,690
And once we see the results,
268
00:13:01,690 --> 00:13:03,110
I will explain a bit better
269
00:13:03,110 --> 00:13:06,407
why it's afterbegin and not beforeend.
270
00:13:07,500 --> 00:13:09,510
But anyway, let's go back here
271
00:13:09,510 --> 00:13:13,140
because now we need to specify the second argument
272
00:13:13,140 --> 00:13:16,453
and that is the string containing the HTML
273
00:13:16,453 --> 00:13:17,993
that we want to insert.
274
00:13:19,350 --> 00:13:20,770
And that's it.
275
00:13:20,770 --> 00:13:23,633
So if we now run this, it should already work.
276
00:13:25,260 --> 00:13:27,263
And yes it does.
277
00:13:28,770 --> 00:13:30,720
So that's amazing.
278
00:13:30,720 --> 00:13:32,660
And let's check it out
279
00:13:32,660 --> 00:13:35,093
and let's compare it with our values.
280
00:13:36,150 --> 00:13:40,780
And so indeed, the newest one is the last one here.
281
00:13:40,780 --> 00:13:43,200
And so that's element number eight
282
00:13:43,200 --> 00:13:46,550
and it is indeed 1300, right?
283
00:13:46,550 --> 00:13:50,450
And it is indeed green because it is a deposit.
284
00:13:50,450 --> 00:13:52,570
So a positive number.
285
00:13:52,570 --> 00:13:54,000
The same with the 70.
286
00:13:54,000 --> 00:13:56,300
And then we have minus 130,
287
00:13:56,300 --> 00:13:58,859
and so indeed that's a withdrawal.
288
00:13:58,859 --> 00:14:00,573
Beautiful.
289
00:14:00,573 --> 00:14:02,690
Now, if we scroll down here,
290
00:14:02,690 --> 00:14:06,600
we will see that we still have these two old ones.
291
00:14:06,600 --> 00:14:09,620
So basically the two that were already there.
292
00:14:09,620 --> 00:14:11,550
And that's because all we are doing
293
00:14:11,550 --> 00:14:14,663
is to add new elements to this container,
294
00:14:17,180 --> 00:14:18,485
right?
295
00:14:18,485 --> 00:14:21,490
We're only inserting new HTML here
296
00:14:21,490 --> 00:14:23,800
inside of the containerMovements
297
00:14:23,800 --> 00:14:26,160
but we are not overriding anything.
298
00:14:26,160 --> 00:14:30,479
And so actually that has to be the first thing that we do.
299
00:14:30,479 --> 00:14:33,420
So the first thing is to essentially
300
00:14:33,420 --> 00:14:36,000
empty the entire container
301
00:14:36,000 --> 00:14:38,453
and only then we start adding new elements.
302
00:14:40,930 --> 00:14:43,470
So that's something common to do
303
00:14:43,470 --> 00:14:47,130
and it is also not difficult at all.
304
00:14:47,130 --> 00:14:49,140
So container movements
305
00:14:49,140 --> 00:14:51,963
and now we can use the inner HTML property,
306
00:14:52,959 --> 00:14:53,792
innerHTML,
307
00:14:55,110 --> 00:14:57,740
and set it to the empty string
308
00:14:58,770 --> 00:14:59,603
and that's it.
309
00:15:00,730 --> 00:15:03,203
So this fixes our problem.
310
00:15:04,800 --> 00:15:06,060
Alright.
311
00:15:06,060 --> 00:15:07,540
Now in our HTML here
312
00:15:07,540 --> 00:15:11,380
is a little bit similar to text content.
313
00:15:11,380 --> 00:15:14,060
So remember that now the difference
314
00:15:14,060 --> 00:15:18,330
is that text content simply returns the text itself
315
00:15:18,330 --> 00:15:22,710
while HTML returns everything, including the HTML.
316
00:15:22,710 --> 00:15:26,210
So all the HTML tags will be included.
317
00:15:26,210 --> 00:15:27,680
Okay.
318
00:15:27,680 --> 00:15:31,700
But here we are then using innerHTML as a setter.
319
00:15:31,700 --> 00:15:36,000
So just like we also used text content equal empty string
320
00:15:36,000 --> 00:15:38,630
or equal something else, remember?
321
00:15:38,630 --> 00:15:41,890
So we used to do in our pic game, for example,
322
00:15:41,890 --> 00:15:42,836
like whatever
323
00:15:42,836 --> 00:15:43,669
(indistinct)
324
00:15:43,669 --> 00:15:45,260
Text content,
325
00:15:45,260 --> 00:15:47,620
and then set it to zero.
326
00:15:47,620 --> 00:15:49,080
Remember that?
327
00:15:49,080 --> 00:15:53,350
But as I said, we can also use this to read data.
328
00:15:53,350 --> 00:15:55,640
So that's simply log to the console
329
00:15:55,640 --> 00:15:58,680
just to understand this property
330
00:15:58,680 --> 00:15:59,980
which is pretty important.
331
00:16:01,610 --> 00:16:02,610
So after all this,
332
00:16:02,610 --> 00:16:05,273
let's do containerMovements.innerHTML.
333
00:16:06,760 --> 00:16:09,390
So we're simply reading the innerHTML
334
00:16:09,390 --> 00:16:11,140
and then logging it to the console.
335
00:16:14,210 --> 00:16:19,210
So console, and indeed, here you'll see all of this HTML.
336
00:16:20,690 --> 00:16:21,523
All right.
337
00:16:21,523 --> 00:16:24,983
So essentially that's the HTML that we just created.
338
00:16:26,300 --> 00:16:27,930
Okay.
339
00:16:27,930 --> 00:16:29,870
But let's get rid of this.
340
00:16:29,870 --> 00:16:32,710
I just wanted to show you both sides
341
00:16:32,710 --> 00:16:34,893
or both applications of innerHTML.
342
00:16:38,330 --> 00:16:39,163
All right.
343
00:16:39,163 --> 00:16:41,410
And finally, I wanted to show you
344
00:16:41,410 --> 00:16:45,130
why I used afterbegin and not beforeend.
345
00:16:45,130 --> 00:16:47,887
Well, let me show you what happened with beforeend.
346
00:16:49,430 --> 00:16:51,960
I think this is how it works.
347
00:16:51,960 --> 00:16:53,360
So beforeend.
348
00:16:53,360 --> 00:16:54,750
Yeah.
349
00:16:54,750 --> 00:16:59,750
So with that, the order of the movements would be inverted.
350
00:17:00,060 --> 00:17:00,950
Okay.
351
00:17:00,950 --> 00:17:04,270
And that's because each new element would simply be added
352
00:17:04,270 --> 00:17:06,030
after the previous one.
353
00:17:06,030 --> 00:17:09,410
So at the end of the container, right?
354
00:17:09,410 --> 00:17:12,190
And so that's after all the child elements
355
00:17:12,190 --> 00:17:14,470
that are already in there.
356
00:17:14,470 --> 00:17:17,770
And that's why I wanted it to be the other way around
357
00:17:17,770 --> 00:17:21,880
because like this, it will always be basically appended
358
00:17:21,880 --> 00:17:23,710
to all the other children.
359
00:17:23,710 --> 00:17:25,410
So any new child element
360
00:17:25,410 --> 00:17:28,650
will appear before all the other child elements
361
00:17:28,650 --> 00:17:30,880
that were already there.
362
00:17:30,880 --> 00:17:35,880
And so now we are back to the order that we wanted here.
363
00:17:36,400 --> 00:17:37,450
ALright.
364
00:17:37,450 --> 00:17:39,150
That's amazing.
365
00:17:39,150 --> 00:17:41,660
So we completed the first part
366
00:17:41,660 --> 00:17:44,070
of our user interface here already
367
00:17:44,070 --> 00:17:47,470
and all with the power of the forEach method.
368
00:17:47,470 --> 00:17:50,630
And then also we introduced some new concepts
369
00:17:50,630 --> 00:17:55,140
in particular here the insertAdjacentHTML method,
370
00:17:55,140 --> 00:17:58,420
and then the innerHTML property.
371
00:17:58,420 --> 00:18:00,420
Now, there are many other ways
372
00:18:00,420 --> 00:18:04,980
of creating elements in JavaScript besides this one here.
373
00:18:04,980 --> 00:18:06,730
And we're gonna study all of them
374
00:18:06,730 --> 00:18:09,440
in great detail in a future section.
375
00:18:09,440 --> 00:18:12,790
But this here is actually the one that I liked the most.
376
00:18:12,790 --> 00:18:16,950
It's the easy, quick and dirty solution, so to say.
377
00:18:16,950 --> 00:18:21,950
So all we have to do is to create a string of HTML.
378
00:18:22,090 --> 00:18:27,090
And then we can insert that simply with this method.
379
00:18:27,470 --> 00:18:30,093
So very simple, very straightforward.
380
00:18:30,940 --> 00:18:32,940
So this is some great DOM manipulation
381
00:18:32,940 --> 00:18:34,710
that we did right here.
382
00:18:34,710 --> 00:18:36,780
And I'm really happy about the result
383
00:18:36,780 --> 00:18:40,040
that we got here in our application.
384
00:18:40,040 --> 00:18:40,873
Great.
385
00:18:40,873 --> 00:18:42,073
So let's now move on.