Original subtitles

1 1

In this video we're gonna implement 2

2

our next feature which is to transfer money 3

3

from one user to another, 4

4

and this is how transfers work. 5

5

So here we input the username of the user 6

6

to which we want to transfer 7

7

and then here the amount, okay? 8

8

And so now we need to attach an event handler 9

9

to dis button here, 10

10

and then we're gonna take a look at our flow chart 11

11

to see what we have to do. 12

12

Okay? 13

13

But let's start to take a look here at this element. 14

14

So it is the button form 15

15

and then we will take or values 16

16

from form input amount 17

17

and form input to. 18

18

So debts input transferred to 19

19

and input transfer amount 20

20

and to button is button transfer. 21

21

So as always, I already selected them here beforehand. 22

22

So Let's use 23

23

button transfer 24

24

dot add event listener, 25

25

click, 26

26

end then our function 27

27

and we will actually need or event here again, 28

28

because just like before 29

29

we need to do event dot prevent default 30

30

because this one is also a form, 31

31

and so without this, if we clicked here, 32

32

then that will reload the page. 33

33

So this here is pretty common to do 34

34

when we're working with forms. 35

35

So preventing the default behavior, 36

36

okay? 37

37

Now right? 38

38

So let's create some data here 39

39

based on the input data and starting with the amount. 40

40

So the amount of transfer is 41

41

input transfer amount 42

42

dot 43

43

value 44

44

and then we need to convert it once again 45

45

to a value 46

46

or to a number actually. 47

47

Okay? 48

48

And when now as I reload here, 49

49

of course we lose 50

50

all this data. 51

51

So this current data that we need, 52

52

so now we will have to start to log in always here 53

53

and we could find a way around this, but yeah, 54

54

let's just keep logging in 55

55

whenever we have to check or caught. 56

56

So anyway, we have the amount 57

57

and then we also want to figure out 58

58

the account to which we want to transfer. 59

59

So const 60

60

receiver account, 61

61

and now the value is of course in 62

62

input transfer 63

63

to 64

64

dot value. 65

65

So that is the string that's gonna be right here. 66

66

So for example, if we want to transfer to Jessica Davis, 67

67

that's going to be a JD 68

68

right? 69

69

However, debt value alone 70

70

so that username alone is not that helpful, 71

71

it is only helpful when we use it 72

72

to then actually find the account object 73

73

to which we want to transfer alright 74

74

and so for that, we once again use defined method. 75

75

So that's accounts, 76

76

so that's the array holding all the accounts 77

77

and then we have the current account 78

78

and we want to find account 79

79

Where The username is equal 80

80

to this value that we put in here, 81

81

now right. 82

82

So to recap here, we are now looking for the account 83

83

which has 84

84

this value here 85

85

so that's gonna be the username value 86

86

that we input into that form, 87

87

so to which we want to transfer, 88

88

and so here we are looking for the account with the username 89

89

which is equal to debts input at username 90

90

and then we select that from the account once more 91

91

using the find method here, 92

92

now okay? 93

93

So we have this data 94

94

let's 95

95

just check if it is correct here 96

96

by logging it all to the Console, 97

97

so also the receiver account, 98

98

so this would be a comma, 99

99

so I'm logging in as JS with this pin 100

100

and now let's say I transfer to Jessica Davis, 101

101

that's JD 102

102

100 euros, 103

103

and now in the Console, we indeed get 100 104

104

and the account 105

105

with the username that I just input it there. 106

106

Great, so let's see what we have to do now. 107

107

So what we will do, 108

108

is to add a negative movement to the current user 109

109

and add a positive movement 110

110

to the recipient and that makes sense, right? 111

111

So if I transfer 100 to someone, 112

112

I should lose that 100 113

113

and the other person should receive that 100 114

114

otherwise we would just be creating new money, right? 115

115

So we do that and then we update the UI again, 116

116

so we show again the movements, 117

117

summary and balance because all of that 118

118

will be effected by this transfer. 119

119

Now what's kind of missing here in this flow chart 120

120

is that we also actually first need to check some stuff. 121

121

So we need to check if the amount here 122

122

is actually a positive number 123

123

and we also need to check if the current user, 124

124

so Jonas right now actually has enough money. 125

125

So I should not be able to transfer 5,000 126

126

if I only have like 3000 and something, 127

127

okay? 128

128

So let's implement that cheque first. 129

129

So as I just said, the amount needs to be greater than zero 130

130

otherwise we could do a negative transfer 131

131

and basically transfer money to ourselves. 132

132

So this needs to happen 133

133

and also the balance of the current account 134

134

needs to be greater or equal the amount 135

135

that we're trying to transfer. 136

136

Now, this balance value is actually not stored anywhere, 137

137

right? 138

138

So in the place where we calculate this balance, 139

139

so that's right here. 140

140

So calc display balance, 141

141

all we do is to calculate it 142

142

and then display it immediately on the user interface, 143

143

but we do not save it anywhere 144

144

so let's actually change that, 145

145

so besides only displaying it on the user interface, 146

146

we also want to save it in the account. 147

147

Now, how do we get access to that account? 148

148

Well, we will do the same as we did previously 149

149

with this function here, 150

150

where now instead of the movements 151

151

we passed in the entire account 152

152

and so then we will be able to read the movements here 153

153

from that account and also we will be able to then create 154

154

a new property on that account with the balance, okay? 155

155

So I hope that makes sense, 156

156

so we are changing it from movements 157

157

and so now we will be calling it 158

158

with an entire account object. 159

159

So here we need to do account dot movements 160

160

and before we move on any further, 161

161

let's call this correctly. 162

162

So cacl display balance should now only be called 163

163

with the entire account object 164

164

and not only with the movements array, okay? 165

165

So here it is. 166

166

So now we take the movements from the account object, 167

167

and then we can add that 168

168

so we can say account dot balance equals balance 169

169

and in fact, we can make this even better, 170

170

we can store this value here 171

171

immediately in account dot balance. 172

172

So let's do that, account dot balance here 173

173

and then we get that property here 174

174

from account dot balance as well. 175

175

Great, and remember why all of this works 176

176

and we have some error here, but that doesn't matter, 177

177

it's something unrelated now, 178

178

anyway, let's remember why all of this works, 179

179

so why we can set, this property here on this account object 180

180

that we receive, and it will then set that right here 181

181

on these objects that we have here. 182

182

Well, and the reason is that, once again, 183

183

all of these different references to actually point 184

184

to the exact same objects in the memory heap, okay? 185

185

So when we access this account, one object here, 186

186

so down here in the login function, 187

187

so right here where we create this current account variable, 188

188

this is of course not really a copy of the object itself. 189

189

So just as we learned before, 190

190

this is simply another variable which points to the same 191

191

so to the original object in the memory heap, okay? 192

192

So this current account object again 193

193

is exactly one of these objects that we have right here. 194

194

So one of the objects of the account array, right? 195

195

They are the exact same object. 196

196

They simply have different name, 197

197

here it is called account one 198

198

but then down here it might be called 199

199

the current account, okay? 200

200

And then we use that current account to pass it 201

201

into this calc display balance function 202

202

and so then inside of that function, 203

203

it will have even another name. 204

204

So here it will be called acc, 205

205

but it's still the same object, okay, 206

206

it's still pointing to the same place in the heap, 207

207

so in the memory now, right? 208

208

And therefore setting the balance property here on acc 209

209

is exactly the same as setting it up there 210

210

where we first defined the objects, okay? 211

211

And I will show you that in practice in a second 212

212

but now let's go here 213

213

and so this is where this arrow comes from 214

214

because we don't have any code block 215

215

and also because there is no second operant here. 216

216

So anyway, let's go back to this condition here, 217

217

so we already defined data transfer can only happen 218

218

if the amount is greater than zero 219

219

and now the second part is that the current user needs 220

220

to have enough money to do this transfer 221

221

and so that means current account dot balance 222

222

which is the property that we justified alright. 223

223

So we calculated the balance 224

224

and that needs to be at least equal to the amount 225

225

that we're trying to transfer, okay? 226

226

Also, we should not be able to transfer money 227

227

to our own account. 228

228

So that's at that condition as well, 229

229

so what we're trying to say is 230

230

that the receiver account dot username 231

231

must be equal 232

232

from the current account 233

233

dot username, alright? 234

234

Tierra have one equal too much, 235

235

alright? 236

236

And actually, we should also check 237

237

if this receiver account actually exists. 238

238

So if it doesn't exist, of course, it makes no sense 239

239

to transfer money there. 240

240

So we could add that here, like simply testing this, 241

241

but instead, since we're already trying to read a property 242

242

from that object here, we can use once again, 243

243

optional chaining like this 244

244

and so then if this object here doesn't exist, 245

245

then immediately this here will become undefined 246

246

and the whole end operation will fail, 247

247

and so in this case, we don't need that. 248

248

Let me just comment it out and so now this should work 249

249

and so let's just lock something to the Console. 250

250

So transfer valid 251

251

and now I will check all of these conditions here. 252

252

So let's log in and now I want to transfer again 253

253

to Jessica Davis and I will try to transfer zero 254

254

so we get zero but we do not get transfer valid. 255

255

So that means we didn't enter a this "if block" here. 256

256

Now let's try to transfer more than I have 257

257

and so this is also not valid but now 500 258

258

and so all of these should not be true 259

259

so you'll see a transfer valid. 260

260

If I try something else, then again nothing should happen, 261

261

oh, and actually it does happen, 262

262

so indeed the receiver account is undefined 263

263

and so this here will now be undefined now 264

264

but I see what's happening 265

265

because all that we are asking here is for this here 266

266

to be different Jandy current account dot username. 267

267

And so JS is of course different than undefined 268

268

and therefore this here is still true 269

269

and so in fact, we need to do this as well. 270

270

So let's try this again 271

271

and so you see of course back like this 272

272

can happen all the time. 273

273

And so we find them, 274

274

we fix them and we move on 275

275

and of course, now we test with some wrong username there, 276

276

and now nothing happens, okay? 277

277

So now the transfer is not valid. 278

278

Now I'm also trying to transfer it to myself 279

279

and so this is also not valid 280

280

but finally to Jessica David, it will be valid, okay. 281

281

And so, now here we can finally do 282

282

what we intended to do all along. 283

283

So these steps that we have here, 284

284

So let's do that. 285

285

So the current account dot movements, 286

286

so we will add one new movement 287

287

and so we're pushing here the amount but negative. 288

288

So the negative amount and now on the receiver account, 289

289

We will add a positive movement, okay? 290

290

And that's actually already it. 291

291

That's the most important part of doing the transfer. 292

292

So doing the transfer 293

293

and then we also want to update the user interface. 294

294

So we could now copy this code here 295

295

and paste it there as well 296

296

but that's not a good practice as you already know 297

297

and so I will now refactor this code here 298

298

all into one function. 299

299

So let me grab this here 300

300

and dysfunction will be called update UI 301

301

and it will also receive of course the current account. 302

302

So let me right now the function here update UI 303

303

equals function and I'm gonna leave it empty for now, 304

304

and so indeed here, 305

305

I need the current account now, okay? 306

306

So otherwise I could not call this three function then 307

307

using the account, 308

308

but here I can call them whatever I want again. 309

309

So let me just call them account, 310

310

alright? 311

311

So we refactored that functionality into its own function 312

312

and so now we can call this function anywhere 313

313

that we want in our code, 314

314

and it will then always perform 315

315

these three tasks, okay? 316

316

So here I already called it update UI. 317

317

We just write it here also as a comment. 318

318

And now all I have to do is 319

319

to paste it here as well. 320

320

Great. 321

321

So that should be working already. 322

322

So that's transferred to Jessica Davis 500. 323

323

And so now I should see one negative movement here, 324

324

and this should also decrease by a 500 325

325

and indeed it did. 326

326

So let's check now here, 327

327

the accounts variable, 328

328

just to see if we actually get the balance. 329

329

So indeed we now have to balance property here. 330

330

We also have to movements 331

331

and of course it's going to contain the minus 500, right? 332

332

So that's the money that we just transferred away 333

333

to Jessica Davis. 334

334

And indeed it should already be in Jessica Davis. 335

335

So her latest movement is now indeed 500. 336

336

So that's take ticket out also in the user interface. 337

337

Now, before doing that, 338

338

the final thing that we're going to do is 339

339

to clean these input fields. 340

340

But now just to make sure let's login as Jessica Davis, 341

341

and then we should get plus 500 here as the latest deposit. 342

342

Now right? 343

343

As I was saying, 344

344

we need to clean out these inputs now 345

345

and that we will do no matter if the transfer 346

346

was successful or not. 347

347

So we can do that outside of this if statement, 348

348

so just down here or actually we can do it right here, 349

349

let's get rid of this Console dot log 350

350

and then input transfer amount 351

351

equal or actually dot value 352

352

equal 353

353

input 354

354

transferred to 355

355

equal the empty string 356

356

and with this we should be finished. 357

357

Let's try it one more time. 358

358

This time Jessica Davis will transfer something 359

359

and so we lost here the latest transfer of course, 360

360

because the page was reloaded 361

361

and this data of course then gets lost. 362

362

So when our page loads the information about the accounts 363

363

so the account data will always be exactly 364

364

what we have here in our code, 365

365

okay? 366

366

So that's the reason why that data, 367

367

that 500 transfer is no longer here, 368

368

but that doesn't matter. 369

369

So let's transfer it to Steven Williams here 370

370

1000 371

371

and we get an error here, 372

372

assignment two constant variable HTML button 373

373

so at line 167 374

374

and oh, one more time I forgot the value here. 375

375

That's a very stupid mistake, right? 376

376

Let's try that again. 377

377

Stephen Thomas Williams, 378

378

I believe 379

379

and now it worked 380

380

so all of our statistics here were updated 381

381

and indeed now this field or both of the fields are empty 382

382

and now as we go 383

383

to this account, 384

384

how apparently it does not exist. 385

385

Yeah, it is Steven Thomas Williams. 386

386

Yeah, 387

387

so now we get this 1000 deposit here 388

388

that we just did previously 389

389

Alright? 390

390

Awesome! 391

391

so our application is coming more 392

392

and more to live here.