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