Original subtitles

1 1

Let's now perform some operations with dates. 2

2

So one cool thing that we can do with dates 3

3

is to do calculations with them. 4

4

For example, we can subtract one date 5

5

from another date, 6

6

in order to calculate how many days have passed 7

7

between the two dates. 8

8

And this works, 9

9

because whenever we attempt to convert a date 10

10

to a number, then the result is going to be the 11

11

timestamp in milliseconds. 12

12

And with these milliseconds, 13

13

we can then perform calculations. 14

14

So again, the timestamps are going to be really helpful here 15

15

in this situation. 16

16

So let's get this date here. 17

17

Okay, and let me just demonstrate what I just said. 18

18

So I will convert to a number, this feature. 19

19

So you see, it worked. 20

20

And the same thing is going to happen 21

21

when I use the plus operator on it. 22

22

So you see. 23

23

And so in fact, 24

24

that does mean we can now do operations with it. 25

25

So if we subtract one date from another, 26

26

the result is going to be a number like this. 27

27

So a timestamp in milliseconds. 28

28

And then we can simply convert 29

29

these milliseconds back to Days, 30

30

or two hours, 31

31

or to whatever we really want. 32

32

So let's actually now create a function 33

33

that takes in two dates. 34

34

And it's going to return the number of days 35

35

that pass between these two dates. 36

36

So days 37

37

past, 38

38

is going to be a function, 39

39

or let's use an arrow function. 40

40

So nice, one liner, 41

41

so date one and date two. 42

42

And then all we need to do is date two 43

43

minus 44

44

date, one. 45

45

And so let's suppose that 46

46

date two is later. 47

47

But in case we do not want to suppose 48

48

that we can simply take the absolute value here. 49

49

And then it doesn't matter which 50

50

of the dates here happened first in time. 51

51

But for now, let's keep it like this. 52

52

So I can show you later what I mean. 53

53

So for now, let's actually also return this result. 54

54

And then I will just call this function here. 55

55

So calc, or actually, it's just calc Well, 56

56

it should be calc a called calc. 57

57

So this looks a bit nicer. 58

58

So calc, days passed. 59

59

And then let's just create two dates here. 60

60

So let's use this one here. 61

61

Maybe make it a little bit simpler. 62

62

Let's say here, 63

63

April 14. 64

64

So this is the first date, 65

65

the first that happens in time. 66

66

And then the second date, 67

67

let's just say, 68

68

well, 69

69

April 24. 70

70

So this then makes it easy for us 71

71

to visualize the result. 72

72

And let's just call this const days one, 73

73

and then login to the console. 74

74

Alright, and so this gives us these milliseconds. 75

75

And so now we just need to convert them. 76

76

And this is similar to what we did, 77

77

I think in one of the previous lectures. 78

78

So we want to divide by 1000. 79

79

And so this converts milliseconds to seconds, 80

80

then that times 60, 81

81

to convert it to minutes, 82

82

then times 60 to convert it to hours, 83

83

and then times 24, 84

84

which converts it to days. 85

85

And again, that's because there are 24 hours in a day. 86

86

There are 60 minutes in one hour, 87

87

60 seconds in one minute, 88

88

and 1000 milliseconds in one second. 89

89

And so now we get 10 days. 90

90

And that makes sense. 91

91

Right? 92

92

So from April 24 93

93

to April 14, 94

94

we have exactly 10 days. 95

95

Now what if here, 96

96

we pass 97

97

four. 98

98

So now it's going to be the other way around. 99

99

Right, so now we have minus 10. 100

100

But we don't want that we always want it to be four 101

101

and so that's what I meant earlier, 102

102

where we can now simply take the absolute value of this. 103

103

So math dot 104

104

absolute. 105

105

Which of the dates we pass in first. 106

106

So if we now put four here 107

107

and 14 here, 108

108

then the result is still going to be 10. 109

109

Great. 110

110

So this works just really nice. 111

111

Now if you need really pretty sighs calculations, 112

112

for example, including time changes due 113

113

to daylight saving changes, 114

114

and other weird edge cases like that, 115

115

then you should use a date library like moment dot js. 116

116

And that's a library 117

117

that's available for free for all JavaScript developers. 118

118

But for something simple like this, 119

119

we should be fine. 120

120

Now, let's just consider 121

121

that one of these days here also has some time. 122

122

So let's say in this one here, it's also 10 123

123

in the morning, 124

124

or 10 125

125

hours 126

126

and eight minutes, 127

127

doesn't really matter. 128

128

But let's see what happens to the days now. 129

129

And so Indeed, we now get 10.4. 130

130

So we might not want that. 131

131

And in this case, 132

132

we can simply use math dot round on all of this. 133

133

Okay, so keep that in mind. 134

134

But I will just leave it like this. 135

135

Alright. 136

136

And now let's actually use this function to format 137

137

and display or dates 138

138

in a little bit nicer way here in our application. 139

139

So basically, what I want to do is, 140

140

if one movement happened today, 141

141

then here instead of the current date, 142

142

I want to display today, 143

143

then if it happened yesterday, 144

144

I want to write yesterday. 145

145

And then if it happened, like a couple of days ago, 146

146

then I want this to say, 147

147

like two days ago 148

148

or five days ago, 149

149

instead of the date. 150

150

And I'm sure you've seen this kind 151

151

of stuff in many web applications that you use 152

152

in your daily life. 153

153

For example, if you post something on Facebook, 154

154

and if you didn't watch it, 155

155

the next day, 156

156

it will say that you posted it yesterday, 157

157

it's not going to display the exact date 158

158

if it was just yesterday. 159

159

And so that's a really nice use case 160

160

of using a function like this. 161

161

So let's grab this here. 162

162

So I'm copying it. 163

163

And then let's go to the display movements function, 164

164

where we do actually print the date. 165

165

Now, this is all kind of getting out of hand. 166

166

So we have a lot of extra code here. 167

167

And now we will add even more. 168

168

So this function here, 169

169

and even some more stuff. 170

170

And so let's take all of this here, 171

171

and actually create a new function, 172

172

which will have the purpose of formatting this. 173

173

Alright. 174

174

So let's cut this here, 175

175

as I just said, and create a function up here, 176

176

just to make it a little bit more modular. 177

177

All right. 178

178

And then we can also reuse this function 179

179

in some other place. 180

180

Even though right now, 181

181

in this case, 182

182

we don't need it. 183

183

I'm just doing this 184

184

to split up the functionality a little bit 185

185

across different places in our code. 186

186

Okay, so this one receives a date as an input, 187

187

and it will return 188

188

the formatted date then, 189

189

okay. 190

190

So I'm copying all of this. 191

191

But actually, this one should stay back here, 192

192

where we got it from. 193

193

And then also, 194

194

so this, we need this variable back here, 195

195

where it came from. 196

196

So display date, 197

197

because we use it down here as the value 198

198

that we eventually want to print to the user interface. 199

199

And so this one should actually be the result 200

200

of calling or new function. 201

201

So this format, movement date. 202

202

So format, movement date, 203

203

and here, we pass in the date variable 204

204

that we just created up here. 205

205

Alright, 206

206

and so with this, 207

207

we just exported the functionality here 208

208

into a new function. 209

209

So let's grab this 210

210

and put it here at the top of the scope. 211

211

And so for now, just to keep this working, 212

212

let's return then this value. 213

213

All right, and as you see, 214

214

and let's just make sure by logging in. 215

215

So as you see, 216

216

the dates are now still being correctly printed. 217

217

So we successfully exported this functionality here 218

218

of displaying the dates into this function. 219

219

And now we can just implement what I just said. 220

220

So basically calculating how many days passed since 221

221

the current date and between 222

222

the date that we are working with. 223

223

All right. 224

224

So let's say 225

225

const days, 226

226

past 227

227

and between. 228

228

So between right now, 229

229

there is a new date. 230

230

And then the second date is the date 231

231

that we just received here. 232

232

So let's just print this to the console to see if it works. 233

233

Okay. 234

234

So what's all of this here? 235

235

So we are printing here actually the wrong thing. 236

236

So we want days past. 237

237

So that was a mistake, obviously. 238

238

But it's still not correct. 239

239

And 240

240

okay, I have another mistake. 241

241

So probably you saw this already. 242

242

So I did not even call the calc days past function. 243

243

But now it should be good. 244

244

And indeed, now we have our days here. 245

245

Alright. 246

246

And now let's actually round them. 247

247

Okay, so that's what I was just saying earlier. 248

248

So that we should probably round these dates. 249

249

So we already learned how to do that. 250

250

So math dot round, 251

251

all of this. 252

252

And so this looks a lot better now. 253

253

Now, let's actually modify 254

254

or dates here a little bit. 255

255

And you should do the same. 256

256

And what I'm going to do is to make 257

257

one date yesterday, and then also a date, 258

258

like three or four days ago. 259

259

So see what's your current date, 260

260

and then simply subtract one. 261

261

So for me, it's August 2, 262

262

so I'm going to use August 1, 263

263

and then also, 264

264

July 265

265

28. 266

266

And maybe another July here 267

267

25, 268

268

or maybe 269

269

26. 270

270

Okay, it's just so that we can see, 271

271

like the yesterday or three days ago, 272

272

or something like that. 273

273

Alright, so do that now. 274

274

And then let's go back here to or function. 275

275

Now, then we want to implement some logic based 276

276

on this day past. 277

277

So if 278

278

days past 279

279

is zero, 280

280

and so basically, that is, 281

281

if we do something today, 282

282

then actually the string that we want to print 283

283

is not the current date, but instead today. 284

284

All right, then if one day has passed, 285

285

we want to return yesterday. 286

286

Okay, 287

287

next up, 288

288

if 289

289

well, let's say if the number of days past 290

290

is within the last week. 291

291

So that's less or equal seven, 292

292

and then we will return the number of days. 293

293

So days, 294

294

past 295

295

days, 296

296

ago 297

297

and else, 298

298

so only if 299

299

more than seven days have passed, 300

300

only then we want to return the actual date. 301

301

Okay, does that make sense? 302

302

So let's save and see if it works. 303

303

And yes, beautiful. 304

304

So that's yesterday, five days ago, 305

305

seven days ago. 306

306

And then here are the other dates right here. 307

307

So that's beautiful. 308

308

Great. 309

309

Let's now just do something. 310

310

And actually, let's transfer like 500 to Jessica Davis. 311

311

And that's gonna be the other way around. 312

312

Jessica Davis, 500. 313

313

And so now we should get one log here with today. 314

314

Yes, indeed, there is today. 315

315

And now if we log in as Jessica Davis, 316

316

we should get the same. 317

317

So now we have a deposit coming from today. 318

318

And actually, we also have something from seven days ago. 319

319

So great, that's amazing. 320

320

If you ask me, 321

321

that we are capable of now doing something like this, 322

322

which looks like a real web application 323

323

that you might use every day. 324

324

All right. 325

325

Now, maybe the logic here is a bit confusing with all 326

326

of these returns. 327

327

But that's completely normal. 328

328

So as once we return, the function stops executing. 329

329

And so these other returns will then never be reached. 330

330

And so this is a pretty common technique. 331

331

And actually, we wouldn't even need this else. 332

332

So if I just remove this here, 333

333

then all of this code will only be executed 334

334

if all of these here are not executed. 335

335

So only if all of these here are false. 336

336

The rest of the code is even executed. 337

337

So you see it works the exact same way. 338

338

Awesome. 339

339

So our application is even better now. 340

340

And in the next two lectures, 341

341

we will then do what I mentioned earlier, 342

342

which is internationalization, 343

343

which is to basically format these dates, 344

344

and also these numbers here, 345

345

according to each of the countries of these accounts.