Original subtitles

1 1

In this video, we're finally gonna be back 2

2

to DOM manipulation. 3

3

And we're gonna learn 4

4

a couple of DOM manipulation techniques. 5

5

And we will use them together 6

6

with the forEach method that we just learned about. 7

7

So this is really exciting stuff. 8

8

So let's get started. 9

9

And to start, let's actually open up the HTML and CSS files 10

10

and we will then keep them open here 11

11

throughout this project. 12

12

And I like to have the script always the last. 13

13

Now, in the HTML, we have this navigation bar. 14

14

So there's nav element, which has all of this top part. 15

15

And then after that we have the main element. 16

16

And so that's basically the entire application 17

17

and that part is right now invisible. 18

18

And so that's because here in the CSS, 19

19

so in line 87 we have the app selector 20

20

and the opacity is set to zero. 21

21

And so we need to comment that. 22

22

And for that we can as always use comment slash, 23

23

give it a save, 24

24

and then we can finally see the application here. 25

25

Alright. 26

26

So logging in and out of this application 27

27

is essentially just changing this opacity here. 28

28

And so now the opacity is basically back to 100 29

29

because now we commented it out 30

30

and so 100 is the default. 31

31

But anyway, let's go back to our script here. 32

32

And so what we want to do now 33

33

is to basically display these movements right here 34

34

in the application here in this list. 35

35

So in this container. 36

36

So for each movement, we want one element like this, okay. 37

37

And we will be able to do that 38

38

because of the forEach method 39

39

which will allow us to loop through this array. 40

40

And then in each iteration 41

41

basically create an element like this 42

42

and display it on the page. 43

43

So this time we're finally gonna move away from the console 44

44

and actually do some DOM manipulation here. 45

45

Now, right. 46

46

So let's move down here after these elements, 47

47

but still inside of the app part of this file 48

48

and then let's write our code. 49

49

Now we could simply start writing our code 50

50

out here in the global context. 51

51

However, that is not a good practice. 52

52

So whenever we do something like this, 53

53

it's always best to create a function. 54

54

So let's call this one print or a display. 55

55

I prefer display. 56

56

So displayMovements. 57

57

And then we make this function receive the data 58

58

with which it should actually work, 59

59

so in this case, that's the movements. 60

60

So we call this parameter movements 61

61

because this function should receive one array of movements 62

62

and then work with that data. 63

63

So in this case, that's the movements that it should display 64

64

in the user interface. 65

65

Now, right? 66

66

And so it's a good practice to pass the data 67

67

into a function 68

68

instead of, for example, having this function work 69

69

with a global variable. 70

70

That would work as well 71

71

but it's a lot better to pass that data directly 72

72

into the function. 73

73

Okay. 74

74

So get used to that kind of approach. 75

75

All right. 76

76

So again, instead of working with global variables, 77

77

start passing the data that function needs 78

78

actually into that function. 79

79

So let me, as always, 80

80

call this function first 81

81

to see what we will get as an input. 82

82

And so the movements that I will use here 83

83

will come from this account1. 84

84

So essentially that's gonna be this array. 85

85

So account1.movements. 86

86

So account1.movements. 87

87

Now, Okay. 88

88

And so inside of this function, 89

89

these movements are simply called movements. 90

90

And so now let's loop over these movements 91

91

using what we learned before. 92

92

So forEach and then our callback function here. 93

93

Now inside of this function, 94

94

we need the current movement 95

95

and we also need the index. 96

96

And that's because here actually I have them here 97

97

number one, number two. 98

98

And so basically we have the movements numbered like this. 99

99

Okay. 100

100

So starting with the first movement down 101

101

and then adding the new ones on top. 102

102

Okay. 103

103

All right. 104

104

So that's the easiest part. 105

105

Now we have to essentially create an HTML 106

106

that looks like this. 107

107

So let's go to our HTML file 108

108

and to actually take a look 109

109

at what does HTML looks like. 110

110

So we are inside our app element here basically. 111

111

Then we have this movements element 112

112

which is all of this container here. 113

113

And maybe it would be easier 114

114

to actually see this in the console. 115

115

So if we did this maybe we can get rid of this part. 116

116

Not really. 117

117

But anyway, now we can see 118

118

that all of this is the movements. 119

119

And then in each movement we have a movements_row. 120

120

So each of this is a movements_row. 121

121

Okay. 122

122

And so lets now copy the entire code 123

123

of one movements_row 124

124

because this is what we want to create 125

125

in each iteration of the loop with the current data. 126

126

So, essentially let's take all of this. 127

127

So I'm gonna copy it 128

128

and let me now paste it here into a template string. 129

129

So I'll create a variable, 130

130

which I'm gonna call HTML 131

131

and then I'm creating a template literal. 132

132

And template literals are amazing 133

133

for creating HTML templates, 134

134

like the one one we will create now, 135

135

because now it's really easy 136

136

to create a multi-line string like this. 137

137

Okay. 138

138

Let's just fix indentation here a little bit 139

139

to make this then easier to understand. 140

140

Okay. 141

141

And now all we have to do 142

142

is to basically replace the data that's not relevant, 143

143

so this hard coded data, 144

144

with our actual movements data. 145

145

Okay. 146

146

Now this part here of the date, 147

147

we will not do now. 148

148

We will take care of this in the next section, 149

149

So let's get rid of it. 150

150

And then here we have the movements_value. 151

151

So this is formatted 152

152

but again, we will just use the plain value 153

153

that's coming out of the array for now. 154

154

And so now we can simply insert that here. 155

155

And so that's mov, right? 156

156

So mov is the current element in the array 157

157

that we are looping over. 158

158

And so in each iteration 159

159

that will then be one of the movements in the array. 160

160

Then here we have 2 deposit. 161

161

And so we will have to check 162

162

whether a certain movement is a deposit or a withdrawal. 163

163

So let's delete that. 164

164

And for now we can add the number here. 165

165

So you see one, two, 166

166

and so for that, we now use the i. 167

167

And so that's why we also need it to do current index 168

168

besides just the current value. 169

169

Okay. 170

170

And now we need a way to knowing 171

171

if it's a deposit or a withdrawal. 172

172

And so let's use a ternary operator 173

173

and let's do that out here 174

174

as a separate variable, 175

175

because we will need that twice. 176

176

We will need it 177

177

one, to write it here on the user interface, 178

178

but here also, this class name depends on that. 179

179

So you see that we have type--deposit. 180

180

So that's in this green color 181

181

and we have type--withdrawal 182

182

and so that's in this red color. 183

183

So we will need this information twice. 184

184

And so let's just calculate it outside here. 185

185

So I'm gonna call it type. 186

186

And so this is the same logic as before. 187

187

So if the current movement is greater than zero 188

188

then the type should be deposit 189

189

or else it should then be withdrawal. 190

190

Okay. 191

191

And now let's write that here. 192

192

So to type here, and again also here in the class name. 193

193

So we can also basically construct this a class name here 194

194

which is very useful too. 195

195

And I hope here, you can see 196

196

that the template literal is really a lifesaver here. 197

197

Okay. 198

198

So we created our HTML template here. 199

199

Now, all we need to do 200

200

is to find a way to actually adding this HTML 201

201

onto the webpage here. 202

202

So we need to attach this HTML somehow into this container. 203

203

So into this movements element. 204

204

Okay. 205

205

And to do that, 206

206

we will use a method called insertAdjacentHTML. 207

207

So that's gotta go right here. 208

208

So let me first write the name of the method. 209

209

And then I'm gonna tell you 210

210

where we actually have to attach this method to. 211

211

So it's called insertAdjacentHTML. 212

212

And we are gonna call this method 213

213

on this movements element here. 214

214

So this container 215

215

onto which we want to add a new movements_row element. 216

216

So this element here 217

217

on which we want to add a new movement_row, right? 218

218

So we are looking for an element with a class of movements. 219

219

And as I told you in the last lecture, 220

220

I already selected all of these elements. 221

221

And so in this case, it's this one, 222

222

and so the name is containerMovements. 223

223

Okay. 224

224

So you see that I used kind of a uniform names here. 225

225

So I have containerApp 226

226

for this entire application container 227

227

and containerMovements. 228

228

Then all the other ones are called label. 229

229

So labelWelcome, date and so on and so forth. 230

230

Then the others are called button 231

231

and then all the input fields are all called input 232

232

and to then whatever the name of them, 233

233

so to keep it nice and easy to understand. 234

234

But anyway, this one is called containerMovements. 235

235

And so onto there, again, we call insertAdjacentHTML. 236

236

And this method accepts two strings. 237

237

The first string is the position 238

238

in which we want to attach the HTML. 239

239

And this one I'm gonna set to afterbegin, 240

240

but there are more options. 241

241

And I think the best way of showing it to you 242

242

is actually in the documentation. 243

243

So MDN. 244

244

And so whenever I need to figure out something, 245

245

this is how I do it. 246

246

So I know that down here, 247

247

there is a visualization, 248

248

and yeah. 249

249

So these are the four options here 250

250

and the one we chose is afterbegin. 251

251

So that's this one. 252

252

So imagine that this p element here 253

253

is our containerMovements. 254

254

And so basically I want to add new elements 255

255

right after the beginning of this element. 256

256

And so basically I'm saying here 257

257

that I want to insert the new child element 258

258

right after the beginning of the parent element. 259

259

And so again, that's containerMovements. 260

260

Then we have beforeend, 261

261

which is at the end of the element as the name says 262

262

and then we can even put it outside of the parent element. 263

263

And then we could even put it 264

264

outside of the containerMovements. 265

265

And sometimes this is useful as well. 266

266

But usually, I always use afterbegin or beforeend. 267

267

And once we see the results, 268

268

I will explain a bit better 269

269

why it's afterbegin and not beforeend. 270

270

But anyway, let's go back here 271

271

because now we need to specify the second argument 272

272

and that is the string containing the HTML 273

273

that we want to insert. 274

274

And that's it. 275

275

So if we now run this, it should already work. 276

276

And yes it does. 277

277

So that's amazing. 278

278

And let's check it out 279

279

and let's compare it with our values. 280

280

And so indeed, the newest one is the last one here. 281

281

And so that's element number eight 282

282

and it is indeed 1300, right? 283

283

And it is indeed green because it is a deposit. 284

284

So a positive number. 285

285

The same with the 70. 286

286

And then we have minus 130, 287

287

and so indeed that's a withdrawal. 288

288

Beautiful. 289

289

Now, if we scroll down here, 290

290

we will see that we still have these two old ones. 291

291

So basically the two that were already there. 292

292

And that's because all we are doing 293

293

is to add new elements to this container, 294

294

right? 295

295

We're only inserting new HTML here 296

296

inside of the containerMovements 297

297

but we are not overriding anything. 298

298

And so actually that has to be the first thing that we do. 299

299

So the first thing is to essentially 300

300

empty the entire container 301

301

and only then we start adding new elements. 302

302

So that's something common to do 303

303

and it is also not difficult at all. 304

304

So container movements 305

305

and now we can use the inner HTML property, 306

306

innerHTML, 307

307

and set it to the empty string 308

308

and that's it. 309

309

So this fixes our problem. 310

310

Alright. 311

311

Now in our HTML here 312

312

is a little bit similar to text content. 313

313

So remember that now the difference 314

314

is that text content simply returns the text itself 315

315

while HTML returns everything, including the HTML. 316

316

So all the HTML tags will be included. 317

317

Okay. 318

318

But here we are then using innerHTML as a setter. 319

319

So just like we also used text content equal empty string 320

320

or equal something else, remember? 321

321

So we used to do in our pic game, for example, 322

322

like whatever 323

323

(indistinct) 324

324

Text content, 325

325

and then set it to zero. 326

326

Remember that? 327

327

But as I said, we can also use this to read data. 328

328

So that's simply log to the console 329

329

just to understand this property 330

330

which is pretty important. 331

331

So after all this, 332

332

let's do containerMovements.innerHTML. 333

333

So we're simply reading the innerHTML 334

334

and then logging it to the console. 335

335

So console, and indeed, here you'll see all of this HTML. 336

336

All right. 337

337

So essentially that's the HTML that we just created. 338

338

Okay. 339

339

But let's get rid of this. 340

340

I just wanted to show you both sides 341

341

or both applications of innerHTML. 342

342

All right. 343

343

And finally, I wanted to show you 344

344

why I used afterbegin and not beforeend. 345

345

Well, let me show you what happened with beforeend. 346

346

I think this is how it works. 347

347

So beforeend. 348

348

Yeah. 349

349

So with that, the order of the movements would be inverted. 350

350

Okay. 351

351

And that's because each new element would simply be added 352

352

after the previous one. 353

353

So at the end of the container, right? 354

354

And so that's after all the child elements 355

355

that are already in there. 356

356

And that's why I wanted it to be the other way around 357

357

because like this, it will always be basically appended 358

358

to all the other children. 359

359

So any new child element 360

360

will appear before all the other child elements 361

361

that were already there. 362

362

And so now we are back to the order that we wanted here. 363

363

ALright. 364

364

That's amazing. 365

365

So we completed the first part 366

366

of our user interface here already 367

367

and all with the power of the forEach method. 368

368

And then also we introduced some new concepts 369

369

in particular here the insertAdjacentHTML method, 370

370

and then the innerHTML property. 371

371

Now, there are many other ways 372

372

of creating elements in JavaScript besides this one here. 373

373

And we're gonna study all of them 374

374

in great detail in a future section. 375

375

But this here is actually the one that I liked the most. 376

376

It's the easy, quick and dirty solution, so to say. 377

377

So all we have to do is to create a string of HTML. 378

378

And then we can insert that simply with this method. 379

379

So very simple, very straightforward. 380

380

So this is some great DOM manipulation 381

381

that we did right here. 382

382

And I'm really happy about the result 383

383

that we got here in our application. 384

384

Great. 385

385

So let's now move on.