Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
1
00:00:01,310 --> 00:00:03,210
Welcome back
2
2
00:00:03,210 --> 00:00:07,200
and this is gonna be the last part of this project.
3
3
00:00:07,200 --> 00:00:08,873
So we're almost done here.
4
4
00:00:09,750 --> 00:00:13,380
Now for security reasons, real bank applications
5
5
00:00:13,380 --> 00:00:17,240
will log out users after some inactive time.
6
6
00:00:17,240 --> 00:00:21,380
For example, after five minutes without doing anything.
7
7
00:00:21,380 --> 00:00:24,290
And that's what we will implement in this video
8
8
00:00:24,290 --> 00:00:26,543
using the set interval timer.
9
9
00:00:28,410 --> 00:00:33,020
And let's start with one final look at our flow chart.
10
10
00:00:33,020 --> 00:00:36,870
So the timer appears in multiple places here.
11
11
00:00:36,870 --> 00:00:39,930
And the first one is right here.
12
12
00:00:39,930 --> 00:00:42,260
So whenever the user logs in
13
13
00:00:42,260 --> 00:00:46,790
the lockout timer will start or restart, all right?
14
14
00:00:46,790 --> 00:00:51,000
And then, as soon as the log out timer expires,
15
15
00:00:51,000 --> 00:00:54,150
which will be after five or 10 minutes,
16
16
00:00:54,150 --> 00:00:58,270
then we want to lock the user out now. Alright?
17
17
00:00:58,270 --> 00:01:01,350
So basically that's what we will do with the timer,
18
18
00:01:01,350 --> 00:01:03,543
but let's start very simple.
19
19
00:01:04,750 --> 00:01:07,333
So the place where we want the timer
20
20
00:01:07,333 --> 00:01:12,210
is here in this function about the login. Okay?
21
21
00:01:12,210 --> 00:01:16,700
So this here is the handler function that handles the login.
22
22
00:01:16,700 --> 00:01:18,923
And so our timer will start here.
23
23
00:01:20,190 --> 00:01:24,477
Now we already have plenty of code here, as you see, right?
24
24
00:01:25,880 --> 00:01:29,010
And therefore let's actually create a separate function,
25
25
00:01:29,010 --> 00:01:31,653
which will start this log out timer.
26
26
00:01:33,070 --> 00:01:33,903
Alright?
27
27
00:01:37,660 --> 00:01:42,290
So let's say start, log out timer
28
28
00:01:45,660 --> 00:01:48,590
and this function doesn't need any arguments.
29
29
00:01:48,590 --> 00:01:51,160
All it does is to basically export
30
30
00:01:51,160 --> 00:01:54,920
some functionality into an external function.
31
31
00:01:54,920 --> 00:01:57,800
So let's write some pseudo code here,
32
32
00:01:57,800 --> 00:02:01,270
basically by writing some comments to say what exactly
33
33
00:02:01,270 --> 00:02:03,210
we are gonna do here.
34
34
00:02:03,210 --> 00:02:05,160
So we will start by setting the time
35
35
00:02:06,760 --> 00:02:09,323
to let's say five minutes, okay?
36
36
00:02:13,000 --> 00:02:15,940
Then we want to call the timer every second
37
37
00:02:21,490 --> 00:02:23,743
then in each call,
38
38
00:02:24,720 --> 00:02:26,343
in each callback call,
39
39
00:02:27,500 --> 00:02:29,320
print the remaining time
40
40
00:02:32,370 --> 00:02:33,803
to the user interface.
41
41
00:02:36,533 --> 00:02:39,170
And then when the time is at zero,
42
42
00:02:39,170 --> 00:02:41,763
so after the timer basically expired.
43
43
00:02:43,470 --> 00:02:45,783
So when we reach zero seconds,
44
44
00:02:47,330 --> 00:02:51,720
stop timer and log out user.
45
45
00:02:51,720 --> 00:02:55,330
Okay, and to make this a bit easier to visualize,
46
46
00:02:55,330 --> 00:02:57,963
let's go again here to our demo application.
47
47
00:03:00,640 --> 00:03:04,030
And so the timer that I mean is this one here,
48
48
00:03:04,030 --> 00:03:06,710
which actually starts at 10 minutes
49
49
00:03:06,710 --> 00:03:08,570
and you see that after each second,
50
50
00:03:08,570 --> 00:03:11,543
a new time is basically printed here.
51
51
00:03:12,710 --> 00:03:16,070
Alright, and I'm not gonna wait for 10 minutes now,
52
52
00:03:16,070 --> 00:03:18,150
but when this reaches zero,
53
53
00:03:18,150 --> 00:03:21,383
then the user will of course be logged out.
54
54
00:03:23,000 --> 00:03:23,833
Okay?
55
55
00:03:27,360 --> 00:03:32,300
So let's basically do everything that we described here.
56
56
00:03:32,300 --> 00:03:37,300
So I'm setting the time, for now just to 10 seconds.
57
57
00:03:37,750 --> 00:03:40,400
Okay? Just so we see what's going on,
58
58
00:03:40,400 --> 00:03:43,480
or actually let's say 100 seconds,
59
59
00:03:43,480 --> 00:03:45,793
so that we have actually more than one minute,
60
60
00:03:46,930 --> 00:03:50,310
then we want to call the timer every second.
61
61
00:03:50,310 --> 00:03:53,000
So basically what this means is to use
62
62
00:03:53,000 --> 00:03:54,260
the set interval function
63
63
00:03:57,640 --> 00:03:59,840
and then pass in a callback function
64
64
00:03:59,840 --> 00:04:03,123
and this callback will be executed every second.
65
65
00:04:04,910 --> 00:04:09,143
And so 1000 milliseconds here, alright?
66
66
00:04:10,000 --> 00:04:13,130
Then each time that this function is called,
67
67
00:04:13,130 --> 00:04:15,783
print the remaining time to the user interface.
68
68
00:04:17,100 --> 00:04:18,760
Not in this one here as well.
69
69
00:04:18,760 --> 00:04:20,780
So when we're at zero seconds,
70
70
00:04:20,780 --> 00:04:22,903
stop the timer and log the user out.
71
71
00:04:24,520 --> 00:04:28,720
So we want to print the time here to this label,
72
72
00:04:28,720 --> 00:04:30,553
which is called label timer.
73
73
00:04:33,930 --> 00:04:36,660
So let me just show it to you here in our elements
74
74
00:04:36,660 --> 00:04:38,690
that I preselected.
75
75
00:04:38,690 --> 00:04:42,420
So label timer is the element with the selector
76
76
00:04:42,420 --> 00:04:44,283
of simply timer.
77
77
00:04:45,470 --> 00:04:46,303
Okay.
78
78
00:04:48,950 --> 00:04:51,140
So let's go.
79
79
00:04:51,140 --> 00:04:56,140
So labeledtimer.textcontent is equal to the time
80
80
00:04:58,160 --> 00:05:00,290
and so that's this here.
81
81
00:05:00,290 --> 00:05:03,163
So I forgot to write the name of the variable actually.
82
82
00:05:04,330 --> 00:05:06,120
And now to make this actually work,
83
83
00:05:06,120 --> 00:05:08,630
we also need to remove one second
84
84
00:05:08,630 --> 00:05:11,683
in each of these function calls, right?
85
85
00:05:13,180 --> 00:05:15,263
So decrease one second.
86
86
00:05:16,792 --> 00:05:19,800
And so time equal time minus one,
87
87
00:05:19,800 --> 00:05:24,800
which is essentially the same as saying time minus minus.
88
88
00:05:26,070 --> 00:05:27,670
Alright?
89
89
00:05:27,670 --> 00:05:30,200
So this is the logic of this timer.
90
90
00:05:30,200 --> 00:05:32,990
We start with a certain number of seconds,
91
91
00:05:32,990 --> 00:05:34,930
right now that's 100
92
92
00:05:34,930 --> 00:05:37,460
and then each time that his callback function here
93
93
00:05:37,460 --> 00:05:41,570
is called, we remove one second from that.
94
94
00:05:41,570 --> 00:05:45,260
Okay? And so this is called every second
95
95
00:05:45,260 --> 00:05:48,870
and so basically we will end up with a timer
96
96
00:05:48,870 --> 00:05:53,710
which shows the current number of seconds, each second.
97
97
00:05:53,710 --> 00:05:54,770
Okay?
98
98
00:05:54,770 --> 00:05:58,110
And now all we need to do is to then call this function
99
99
00:05:58,110 --> 00:05:59,583
here on login.
100
100
00:06:02,610 --> 00:06:07,610
So well, let's do that here before updating the UI.
101
101
00:06:10,210 --> 00:06:12,783
So start, log out timer.
102
102
00:06:14,530 --> 00:06:17,800
And now let's quickly log in here
103
103
00:06:20,230 --> 00:06:24,573
and indeed you see this number here decreasing now.
104
104
00:06:28,110 --> 00:06:29,210
Okay?
105
105
00:06:29,210 --> 00:06:33,460
So hopefully that logic makes sense
106
106
00:06:33,460 --> 00:06:38,040
of decreasing one second, every second.
107
107
00:06:38,040 --> 00:06:39,213
Now, where is that?
108
108
00:06:40,100 --> 00:06:42,770
We have too many functions here, I guess.
109
109
00:06:42,770 --> 00:06:44,033
Now here we go.
110
110
00:06:45,580 --> 00:06:49,410
So again, the logic here is to decrease the timer
111
111
00:06:49,410 --> 00:06:51,827
by one second, every second.
112
112
00:06:51,827 --> 00:06:55,010
And so therefore we get this number here
113
113
00:06:55,010 --> 00:06:59,100
going down by exactly one each second.
114
114
00:06:59,100 --> 00:07:00,220
Alright?
115
115
00:07:00,220 --> 00:07:03,630
Now we don't really want to see only the seconds.
116
116
00:07:03,630 --> 00:07:05,950
We want to see the minutes as well.
117
117
00:07:05,950 --> 00:07:08,450
So basically we need to convert
118
118
00:07:08,450 --> 00:07:12,723
this simple number of seconds to minutes and seconds.
119
119
00:07:13,830 --> 00:07:14,663
Alright?
120
120
00:07:16,270 --> 00:07:17,963
So let's do that here as well.
121
121
00:07:20,890 --> 00:07:25,890
So let's say the minutes is the current time
122
122
00:07:25,910 --> 00:07:28,690
divided by 60.
123
123
00:07:28,690 --> 00:07:32,253
So that's the easiest way basically off writing it.
124
124
00:07:34,940 --> 00:07:36,290
So it's not gonna be correct,
125
125
00:07:36,290 --> 00:07:38,733
but it's gonna show us what we need to do next.
126
126
00:07:39,840 --> 00:07:42,460
Now, here we are also seeing already what happens
127
127
00:07:42,460 --> 00:07:47,070
with this timer after a certain number of seconds.
128
128
00:07:47,070 --> 00:07:50,480
So indeed, as soon as the time hits zero,
129
129
00:07:50,480 --> 00:07:53,040
it will not simply stop, right?
130
130
00:07:53,040 --> 00:07:55,700
We're not telling the timer anywhere to stop.
131
131
00:07:55,700 --> 00:07:59,650
And so it will simply continue and become negative.
132
132
00:07:59,650 --> 00:08:03,670
And so that's what we will have to implement in down here,
133
133
00:08:03,670 --> 00:08:05,420
but let's leave that for later.
134
134
00:08:05,420 --> 00:08:07,800
For now, we just want to display the number here
135
135
00:08:07,800 --> 00:08:09,343
in minutes and seconds,
136
136
00:08:10,300 --> 00:08:12,933
but for now I will just show you the minutes.
137
137
00:08:16,260 --> 00:08:18,493
Just to show you what we need to do next.
138
138
00:08:20,550 --> 00:08:25,550
So you see that we have one minute .6 or .5 something.
139
139
00:08:27,000 --> 00:08:29,280
So it's decreasing every second,
140
140
00:08:29,280 --> 00:08:33,570
but this number here after the comma or after this period,
141
141
00:08:33,570 --> 00:08:35,733
doesn't really make sense. Right?
142
142
00:08:36,920 --> 00:08:40,970
So basically what we want to do is to take whatever remains
143
143
00:08:40,970 --> 00:08:43,840
of dividing the time by 60,
144
144
00:08:43,840 --> 00:08:46,170
because that will be our seconds.
145
145
00:08:46,170 --> 00:08:49,323
So let me show that to you as well.
146
146
00:08:50,410 --> 00:08:55,410
So seconds will be the reminder of dividing time by 60.
147
147
00:08:56,940 --> 00:08:58,240
And so that's where again,
148
148
00:08:58,240 --> 00:09:01,790
the reminder function is very helpful.
149
149
00:09:01,790 --> 00:09:05,290
So the reminder operator actually.
150
150
00:09:05,290 --> 00:09:08,963
So let's not print both of them here as a template literal.
151
151
00:09:10,870 --> 00:09:14,593
So minutes and then colon the second.
152
152
00:09:16,160 --> 00:09:20,150
Okay? And this is still far from being complete,
153
153
00:09:20,150 --> 00:09:22,763
but let's take it step by step here.
154
154
00:09:26,380 --> 00:09:29,270
So you'll see that this number here is now decreasing
155
155
00:09:29,270 --> 00:09:33,640
very nicely and it started at one minute and 40 seconds.
156
156
00:09:33,640 --> 00:09:36,943
And that's exactly what 40 seconds is. Right?
157
157
00:09:38,090 --> 00:09:40,163
So let's do this again, actually,
158
158
00:09:43,750 --> 00:09:47,793
and notice down there how it starts exactly at 1.40.
159
159
00:09:48,785 --> 00:09:52,220
So you saw that and that 40 appeared
160
160
00:09:52,220 --> 00:09:57,220
because that is the reminder of dividing 100 by 60.
161
161
00:09:57,530 --> 00:09:59,330
So let's see it here in the console.
162
162
00:10:00,540 --> 00:10:04,760
So when we divide 100 by 60 then this is the result.
163
163
00:10:04,760 --> 00:10:08,053
But if we do 100, the reminder,
164
164
00:10:09,950 --> 00:10:12,667
then we get 40, alright?
165
165
00:10:12,667 --> 00:10:17,433
And that's because one times 60 plus 40 is then again, 100.
166
166
00:10:19,010 --> 00:10:19,843
Alright?
167
167
00:10:20,830 --> 00:10:24,730
Now here, we actually do not want then this value
168
168
00:10:24,730 --> 00:10:26,410
after the coma, right?
169
169
00:10:26,410 --> 00:10:30,480
We are only interested in, basically the integer.
170
170
00:10:30,480 --> 00:10:33,930
And so let's cut off that decimal part
171
171
00:10:33,930 --> 00:10:38,393
by saying math.trunk, all of this here.
172
172
00:10:41,381 --> 00:10:45,800
And then we also want to pad this number here with a zero.
173
173
00:10:45,800 --> 00:10:46,633
So for example,
174
174
00:10:46,633 --> 00:10:49,990
right now we are at eight seconds or minus eight,
175
175
00:10:49,990 --> 00:10:53,983
but we want to see 08, just like in a normal clock.
176
176
00:10:55,070 --> 00:11:00,070
Okay? And for that, we can again use the pad function.
177
177
00:11:00,520 --> 00:11:02,420
So let's convert this here to a string
178
178
00:11:03,780 --> 00:11:07,823
so that we can then call a pad start,
179
179
00:11:09,600 --> 00:11:14,300
which would have to length of two and pad it with zero
180
180
00:11:15,300 --> 00:11:18,283
or just number is okay and then the same here.
181
181
00:11:23,800 --> 00:11:28,563
And so now we should get a nice looking clock already.
182
182
00:11:30,230 --> 00:11:32,860
Let's actually start at 120 seconds,
183
183
00:11:32,860 --> 00:11:35,453
which is exactly two minutes.
184
184
00:11:42,210 --> 00:11:45,600
So you see now it's a nicely looking
185
185
00:11:45,600 --> 00:11:48,410
and nicely working clock, basically.
186
186
00:11:48,410 --> 00:11:53,410
So a count on timer that starts counting from 120 seconds,
187
187
00:11:53,560 --> 00:11:56,300
which is exactly two minutes.
188
188
00:11:56,300 --> 00:11:59,760
And so that's why in the beginning, the seconds is zero.
189
189
00:11:59,760 --> 00:12:04,580
Because the reminder of doing 1.20 by 60 is zero,
190
190
00:12:06,320 --> 00:12:10,507
because two times 60 is exactly 120, right?
191
191
00:12:13,010 --> 00:12:15,190
So two times 60 is 1.20
192
192
00:12:15,190 --> 00:12:17,360
and therefore there is no reminder.
193
193
00:12:17,360 --> 00:12:21,150
So there are no seconds in our case.
194
194
00:12:21,150 --> 00:12:22,460
Okay?
195
195
00:12:22,460 --> 00:12:24,880
But let's not do it with only 10 seconds
196
196
00:12:26,020 --> 00:12:28,592
because then we get that negative
197
197
00:12:28,592 --> 00:12:30,813
and we can then work with that.
198
198
00:12:31,680 --> 00:12:35,260
So what we want to do here is as soon as we reach zero
199
199
00:12:35,260 --> 00:12:39,403
seconds, we want to stop the timer and to lock out the user.
200
200
00:12:42,620 --> 00:12:46,393
So if the time is zero,
201
201
00:12:49,400 --> 00:12:51,860
then we need to stop the timer.
202
202
00:12:51,860 --> 00:12:55,650
And we do that by using clear interval.
203
203
00:12:55,650 --> 00:12:58,730
So remember in the last video we used clear timeout
204
204
00:12:58,730 --> 00:13:01,860
to stop the set timeout function.
205
205
00:13:01,860 --> 00:13:04,830
And now we can use clear interval to do the same
206
206
00:13:04,830 --> 00:13:07,210
with the set interval timer.
207
207
00:13:07,210 --> 00:13:08,490
Alright?
208
208
00:13:08,490 --> 00:13:09,870
Now, in order to make this work,
209
209
00:13:09,870 --> 00:13:13,793
remember, we need to give a name to this timer.
210
210
00:13:15,310 --> 00:13:17,513
So let's simply call it timer.
211
211
00:13:20,246 --> 00:13:24,020
And here we can use that variable to indeed stop that timer.
212
212
00:13:25,890 --> 00:13:27,980
And then we want to log out the user,
213
213
00:13:27,980 --> 00:13:30,980
which basically means setting the opacity
214
214
00:13:30,980 --> 00:13:34,173
of this whole container here and back to zero.
215
215
00:13:35,080 --> 00:13:37,593
So here in our login, we did the opposite.
216
216
00:13:38,780 --> 00:13:43,420
So we set the opacity to 100 and now logging out the user
217
217
00:13:43,420 --> 00:13:46,490
basically means setting it back to zero
218
218
00:13:46,490 --> 00:13:50,370
and here this text content should also be set
219
219
00:13:51,240 --> 00:13:56,240
to something else, so not the name of the current user.
220
220
00:13:57,560 --> 00:13:58,743
So let's copy that.
221
221
00:14:01,570 --> 00:14:03,070
And so here,
222
222
00:14:03,070 --> 00:14:08,070
the welcome label should say login to get started,
223
223
00:14:10,090 --> 00:14:13,970
which is basically also the default that we see right now.
224
224
00:14:13,970 --> 00:14:14,960
Right?
225
225
00:14:14,960 --> 00:14:17,640
And then the opacity back to zero.
226
226
00:14:17,640 --> 00:14:21,060
And remember that usually when we first see the application,
227
227
00:14:21,060 --> 00:14:23,823
all of this is actually invisible.
228
228
00:14:24,850 --> 00:14:27,170
And let's do that here actually.
229
229
00:14:27,170 --> 00:14:31,370
So get rid of this fake, always logged in.
230
230
00:14:31,370 --> 00:14:33,810
So we did that before to test our code,
231
231
00:14:33,810 --> 00:14:35,513
but now it's no longer necessary.
232
232
00:14:36,860 --> 00:14:39,440
And so this is how the application is supposed to look like,
233
233
00:14:39,440 --> 00:14:40,290
in the beginning.
234
234
00:14:43,260 --> 00:14:47,690
So we logged in and now our timer down here is running.
235
235
00:14:47,690 --> 00:14:51,423
And so let's just see what happens once it reaches zero.
236
236
00:14:53,630 --> 00:14:56,760
And indeed we got logged out here.
237
237
00:14:56,760 --> 00:14:59,350
Okay. So that works beautifully.
238
238
00:14:59,350 --> 00:15:02,020
But let me log in again here so I can show you
239
239
00:15:02,020 --> 00:15:05,520
something that happens and that we need to fix.
240
240
00:15:05,520 --> 00:15:07,340
So as I log in,
241
241
00:15:07,340 --> 00:15:10,713
it takes quite some time until something happens here.
242
242
00:15:13,010 --> 00:15:14,660
Maybe you didn't catch that,
243
243
00:15:14,660 --> 00:15:17,393
so let me try it again after we get logged out here.
244
244
00:15:21,160 --> 00:15:24,083
So I will scroll down immediately and then I hit enter.
245
245
00:15:26,260 --> 00:15:30,990
So you'll see it before, it was still at one second.
246
246
00:15:30,990 --> 00:15:33,650
So it was the value that we had before.
247
247
00:15:33,650 --> 00:15:37,070
And that happened because this entire function here
248
248
00:15:37,070 --> 00:15:40,960
is only first executed after one second.
249
249
00:15:40,960 --> 00:15:42,150
Right?
250
250
00:15:42,150 --> 00:15:45,900
So this callback function that we passed into set interval
251
251
00:15:45,900 --> 00:15:48,400
is not called immediately.
252
252
00:15:48,400 --> 00:15:52,410
It will only get called the first time after one second.
253
253
00:15:52,410 --> 00:15:53,390
But in fact,
254
254
00:15:53,390 --> 00:15:56,890
we want to call this function also immediately.
255
255
00:15:56,890 --> 00:15:57,860
Alright?
256
256
00:15:57,860 --> 00:15:59,690
And so the trick to doing that
257
257
00:15:59,690 --> 00:16:02,300
is to export this into a separate function,
258
258
00:16:02,300 --> 00:16:06,190
then call it immediately and then also start calling it
259
259
00:16:06,190 --> 00:16:09,033
every second using the set interval function.
260
260
00:16:10,220 --> 00:16:11,940
So let me just show it to you.
261
261
00:16:11,940 --> 00:16:15,203
So I cut the function here.
262
262
00:16:17,360 --> 00:16:18,553
Let's put it here.
263
263
00:16:22,949 --> 00:16:24,810
So we need to give it a name.
264
264
00:16:24,810 --> 00:16:28,800
I'm calling it tick because that's a pretty common name
265
265
00:16:29,680 --> 00:16:31,620
and now I put it here.
266
266
00:16:31,620 --> 00:16:35,520
And so right now, everything is exactly the same as before.
267
267
00:16:35,520 --> 00:16:40,170
But what I wanted to do is to also call this immediately.
268
268
00:16:40,170 --> 00:16:42,150
And so this is how we do it.
269
269
00:16:42,150 --> 00:16:45,510
And so now right away, this function gets called.
270
270
00:16:45,510 --> 00:16:48,293
And then after that, every one second.
271
271
00:16:49,860 --> 00:16:51,453
And so let's try it now again,
272
272
00:16:54,520 --> 00:16:55,680
let me scroll down here
273
273
00:16:57,290 --> 00:17:00,600
and you'll see this time, we didn't have that problem.
274
274
00:17:00,600 --> 00:17:02,600
Now it's simply not counting down,
275
275
00:17:02,600 --> 00:17:07,053
but that's because I did this small mistake here,
276
276
00:17:08,040 --> 00:17:11,750
which you see is very common in development.
277
277
00:17:11,750 --> 00:17:13,823
You will do this also all the time.
278
278
00:17:14,770 --> 00:17:18,930
And well, now we didn't see at the beginning of the timer,
279
279
00:17:18,930 --> 00:17:21,833
but believe me now it's actually working correctly.
280
280
00:17:22,710 --> 00:17:26,580
However, you might've noticed that we still have a problem,
281
281
00:17:26,580 --> 00:17:31,310
which is the fact that actually we get locked out
282
282
00:17:31,310 --> 00:17:33,000
once this hits one second
283
283
00:17:33,900 --> 00:17:37,733
and so watch closely now what happens when we reach one.
284
284
00:17:38,930 --> 00:17:40,400
You saw that?
285
285
00:17:40,400 --> 00:17:43,100
And so that's not what we want to happen.
286
286
00:17:43,100 --> 00:17:47,210
This would only happen at zero seconds, not at one second.
287
287
00:17:47,210 --> 00:17:50,870
And the problem here is that we decrease this time
288
288
00:17:50,870 --> 00:17:54,660
by one second before checking for zero.
289
289
00:17:54,660 --> 00:17:58,080
So basically the problem here is that in the duration here,
290
290
00:17:58,080 --> 00:18:02,570
so in the call where the time is one, right?
291
291
00:18:02,570 --> 00:18:04,500
So here it's gonna be one.
292
292
00:18:04,500 --> 00:18:07,503
And then we decreased to zero and then we check for zero.
293
293
00:18:08,510 --> 00:18:12,230
And so in this iteration where the time is initially one,
294
294
00:18:12,230 --> 00:18:15,000
this part of the code still gets executed.
295
295
00:18:15,000 --> 00:18:18,900
And again, because we increase that one second to zero
296
296
00:18:18,900 --> 00:18:20,880
here, before this.
297
297
00:18:20,880 --> 00:18:23,423
And so we need to put it after, of course.
298
298
00:18:27,080 --> 00:18:30,150
And so now this part of the code here only gets triggered
299
299
00:18:30,150 --> 00:18:33,803
if the time really is zero here in this whole function.
300
300
00:18:35,890 --> 00:18:40,890
So now you will see that the logout will only really happen
301
301
00:18:41,010 --> 00:18:42,993
after exactly 10 seconds.
302
302
00:18:49,510 --> 00:18:52,310
So you saw it reached zero, zero,
303
303
00:18:52,310 --> 00:18:54,313
and then we got logged out.
304
304
00:18:55,500 --> 00:18:56,333
Great.
305
305
00:18:57,270 --> 00:18:59,270
So let's increase this here a little bit
306
306
00:19:01,090 --> 00:19:04,623
and then I will log in as this user.
307
307
00:19:07,220 --> 00:19:08,840
So you'll see that it's running.
308
308
00:19:08,840 --> 00:19:11,853
And now I will also log in as Jessica Davis,
309
309
00:19:13,290 --> 00:19:16,033
just to see you yet another problem that we have.
310
310
00:19:17,220 --> 00:19:20,130
So you see it's weirdly alternating
311
311
00:19:20,130 --> 00:19:22,750
between these two numbers.
312
312
00:19:22,750 --> 00:19:25,530
And the reason for that is that right now,
313
313
00:19:25,530 --> 00:19:29,420
we have basically two timers running at the same time.
314
314
00:19:29,420 --> 00:19:33,920
So one timer of Jonah's and one timer of Jessica.
315
315
00:19:33,920 --> 00:19:37,590
And so that's not at all what we need, right?
316
316
00:19:37,590 --> 00:19:39,860
That's a big problem right now.
317
317
00:19:39,860 --> 00:19:42,690
So how can we fix this problem?
318
318
00:19:42,690 --> 00:19:45,020
Well, basically what we can do
319
319
00:19:45,020 --> 00:19:48,030
is that whenever we log a user in,
320
320
00:19:48,030 --> 00:19:50,860
we check if there is already a timer running
321
321
00:19:50,860 --> 00:19:53,563
and if so, then we stop that timer.
322
322
00:19:54,460 --> 00:19:57,477
So I believe that is the best solution to this problem.
323
323
00:19:57,477 --> 00:20:01,170
And so what I'm gonna do now is to return the timer
324
324
00:20:01,170 --> 00:20:05,740
from this function so that we can then use it here
325
325
00:20:05,740 --> 00:20:09,930
in this callback function of the login
326
326
00:20:09,930 --> 00:20:12,513
and delete it in case that it exists.
327
327
00:20:13,670 --> 00:20:16,360
So let me write that code actually,
328
328
00:20:16,360 --> 00:20:19,570
and then it's gonna become a lot easier to understand.
329
329
00:20:19,570 --> 00:20:22,850
So here, we will return to timer
330
330
00:20:24,560 --> 00:20:28,130
and that's important because to clear the timer,
331
331
00:20:28,130 --> 00:20:30,700
so to use the clear interval function,
332
332
00:20:30,700 --> 00:20:33,010
we need the timer variable.
333
333
00:20:33,010 --> 00:20:35,003
And so therefore I'm returning it here,
334
334
00:20:37,290 --> 00:20:38,853
so let's then save it here.
335
335
00:20:40,480 --> 00:20:42,370
So that's down here,
336
336
00:20:42,370 --> 00:20:45,080
and so this is gonna be the timer.
337
337
00:20:45,080 --> 00:20:47,683
Now we actually need this as a global variable.
338
338
00:20:49,320 --> 00:20:51,173
So let me put that outside here,
339
339
00:20:52,100 --> 00:20:55,857
so the current account and the timer.
340
340
00:20:55,857 --> 00:20:59,120
And the reason for that is that we need this variable
341
341
00:20:59,120 --> 00:21:02,090
to persist between different logins.
342
342
00:21:02,090 --> 00:21:04,910
So otherwise, after this handler function here
343
343
00:21:04,910 --> 00:21:08,860
would be ready, then the timer variable would disappear.
344
344
00:21:08,860 --> 00:21:12,230
So that's the reason why we have current account out here,
345
345
00:21:12,230 --> 00:21:13,220
and it's also the reason
346
346
00:21:13,220 --> 00:21:15,950
why we need to keep the timer out here.
347
347
00:21:15,950 --> 00:21:19,070
That's the only way in which we can then actually check
348
348
00:21:19,070 --> 00:21:20,660
if it appears.
349
349
00:21:20,660 --> 00:21:23,740
So timer and current account both need to be
350
350
00:21:23,740 --> 00:21:27,103
in the parent scope of this function scope.
351
351
00:21:28,490 --> 00:21:30,040
So let me show you what I mean.
352
352
00:21:31,510 --> 00:21:34,970
So here I will then set the timer to the timer
353
353
00:21:34,970 --> 00:21:37,210
that is returned here.
354
354
00:21:37,210 --> 00:21:39,430
However, if there already is a timer,
355
355
00:21:39,430 --> 00:21:41,593
I first need to clear it.
356
356
00:21:42,490 --> 00:21:45,473
And so, let's do that.
357
357
00:21:46,360 --> 00:21:48,493
So if there is already a timer,
358
358
00:21:49,810 --> 00:21:54,283
then clear interval timer,
359
359
00:21:55,380 --> 00:21:56,800
and that's it.
360
360
00:21:56,800 --> 00:22:01,740
So let's think what happens when I log in first as Jonas.
361
361
00:22:01,740 --> 00:22:06,253
So when I log in now there is gonna be no timer, right?
362
362
00:22:09,630 --> 00:22:12,700
So in this situation there was no timer already.
363
363
00:22:12,700 --> 00:22:14,280
Was it?
364
364
00:22:14,280 --> 00:22:18,390
There wasn't because I just logged out for the first time
365
365
00:22:18,390 --> 00:22:21,940
and so no timer variable was created.
366
366
00:22:21,940 --> 00:22:24,020
But now since I did log in,
367
367
00:22:24,020 --> 00:22:26,700
now timer is equal to that timer
368
368
00:22:26,700 --> 00:22:29,320
that I just exported from this function
369
369
00:22:29,320 --> 00:22:31,350
using the return keywords.
370
370
00:22:31,350 --> 00:22:34,180
And so this timer now does exist.
371
371
00:22:34,180 --> 00:22:36,523
And so when I know login as someone else,
372
372
00:22:37,510 --> 00:22:40,160
so Jessica Davis for example,
373
373
00:22:40,160 --> 00:22:43,760
then when the code reaches this line here,
374
374
00:22:43,760 --> 00:22:46,300
then a timer will indeed exist.
375
375
00:22:46,300 --> 00:22:48,653
And so then that timer is going to be cleared.
376
376
00:22:49,820 --> 00:22:50,653
Okay?
377
377
00:22:52,730 --> 00:22:54,963
And so now there is no problem anymore.
378
378
00:22:57,240 --> 00:23:00,573
Okay? So now it's running smoothly without any problem.
379
379
00:23:02,620 --> 00:23:05,790
And that of course, also works when the timer here
380
380
00:23:05,790 --> 00:23:10,323
has a higher value, let's put it back to two minutes.
381
381
00:23:13,100 --> 00:23:14,453
So I can now log in,
382
382
00:23:16,250 --> 00:23:18,770
the timer starts running normally
383
383
00:23:18,770 --> 00:23:22,000
and when I log in then as Jessica,
384
384
00:23:22,000 --> 00:23:25,800
then the timer gets cleared and reset it basically
385
385
00:23:25,800 --> 00:23:28,513
and it started again from two minutes.
386
386
00:23:30,580 --> 00:23:31,413
Okay?
387
387
00:23:32,310 --> 00:23:36,130
So all this might seem a little bit complicated,
388
388
00:23:36,130 --> 00:23:39,870
I know, but it's all kind of a matter of thinking
389
389
00:23:39,870 --> 00:23:43,050
about what we want our code to do.
390
390
00:23:43,050 --> 00:23:45,940
So all we're doing here is to use all the tools
391
391
00:23:45,940 --> 00:23:49,860
that we already know to basically achieve one goal
392
392
00:23:49,860 --> 00:23:51,450
that we want to achieve,
393
393
00:23:51,450 --> 00:23:52,640
which is in this case,
394
394
00:23:52,640 --> 00:23:56,310
this timer here running and being reset it each time
395
395
00:23:56,310 --> 00:23:58,700
that another user logs in.
396
396
00:23:58,700 --> 00:24:02,270
Now, another functionality that we want our timers to have
397
397
00:24:02,270 --> 00:24:06,910
is to basically reset once we do something in the account,
398
398
00:24:06,910 --> 00:24:10,080
because remember the goal of this timer here
399
399
00:24:10,080 --> 00:24:13,400
is to track the inactivity of the user.
400
400
00:24:13,400 --> 00:24:16,360
So the time where the user doesn't do anything,
401
401
00:24:16,360 --> 00:24:17,563
but if I do something,
402
402
00:24:18,520 --> 00:24:20,800
let's say transfer money,
403
403
00:24:20,800 --> 00:24:23,160
then we should not get logged out.
404
404
00:24:23,160 --> 00:24:25,180
It should be reset it.
405
405
00:24:25,180 --> 00:24:28,650
But as you saw, we still got logged out
406
406
00:24:28,650 --> 00:24:31,660
even after doing that transfer, of course.
407
407
00:24:31,660 --> 00:24:35,210
So what we need to do now is to also reset the timer
408
408
00:24:35,210 --> 00:24:39,640
whenever the user does a transfer or requests a loan.
409
409
00:24:39,640 --> 00:24:41,670
So these are the only two activities
410
410
00:24:41,670 --> 00:24:43,790
that exist in our application.
411
411
00:24:43,790 --> 00:24:46,890
And so these operations should always trigger the timer
412
412
00:24:46,890 --> 00:24:48,440
to be reset.
413
413
00:24:48,440 --> 00:24:49,273
Okay?
414
414
00:24:50,400 --> 00:24:52,810
So let's go here to the transfer
415
415
00:24:55,280 --> 00:24:56,880
and let's do it here at the end,
416
416
00:24:57,870 --> 00:24:59,223
reset the timer.
417
417
00:25:01,290 --> 00:25:05,100
So what does resetting the timer actually mean?
418
418
00:25:05,100 --> 00:25:07,100
Well, all we need to do,
419
419
00:25:07,100 --> 00:25:10,700
is to basically clear interval using the timer
420
420
00:25:10,700 --> 00:25:14,110
that we already have and then start it again.
421
421
00:25:14,110 --> 00:25:18,800
So clear interval and then the timer variable
422
422
00:25:18,800 --> 00:25:20,170
and so now one more time,
423
423
00:25:20,170 --> 00:25:22,950
it is important that this timer variable
424
424
00:25:22,950 --> 00:25:25,500
is actually a global variable.
425
425
00:25:25,500 --> 00:25:27,100
So a variable that's outside
426
426
00:25:28,180 --> 00:25:30,043
of any of these handler functions.
427
427
00:25:32,090 --> 00:25:35,220
So we define timer, remember out here,
428
428
00:25:35,220 --> 00:25:37,390
because we didn't want it to be inside
429
429
00:25:37,390 --> 00:25:39,433
of this handler function here.
430
430
00:25:40,581 --> 00:25:43,690
And that was because we wanted this variable
431
431
00:25:43,690 --> 00:25:46,810
to persist throughout multiple logins,
432
432
00:25:46,810 --> 00:25:49,820
but now it's also important because we need it later
433
433
00:25:49,820 --> 00:25:51,520
for other operations.
434
434
00:25:51,520 --> 00:25:53,770
So inside other callback functions
435
435
00:25:55,550 --> 00:25:58,010
and in particular in this one now.
436
436
00:25:58,010 --> 00:26:02,600
So clear interval of that timer that was defined previously,
437
437
00:26:02,600 --> 00:26:04,350
and then we simply start a new one.
438
438
00:26:06,350 --> 00:26:09,263
So basically we then overwrite that initial timer
439
439
00:26:09,263 --> 00:26:10,633
that we had before.
440
440
00:26:11,620 --> 00:26:13,823
So start, log out timer.
441
441
00:26:16,101 --> 00:26:17,620
And that's actually it.
442
442
00:26:17,620 --> 00:26:22,090
So imagine that the timer was at one minute 30 seconds.
443
443
00:26:22,090 --> 00:26:23,930
So when we do a transfer,
444
444
00:26:23,930 --> 00:26:28,020
that timer is cleared and a new timer is started again
445
445
00:26:28,020 --> 00:26:29,143
at two minutes.
446
446
00:26:31,870 --> 00:26:36,870
Okay? And now finally the same for requesting alone.
447
447
00:26:39,720 --> 00:26:40,843
So let's try that.
448
448
00:26:43,390 --> 00:26:45,913
And now the timer is running down here.
449
449
00:26:47,300 --> 00:26:48,260
Alright??
450
450
00:26:48,260 --> 00:26:52,220
And now let's try to transfer something to J.D.
451
451
00:26:52,220 --> 00:26:56,840
So the other user, let's say 100 and watch what happens
452
452
00:26:56,840 --> 00:26:58,873
down here to the timer now.
453
453
00:27:00,510 --> 00:27:04,703
And indeed it got reset it to two minutes.
454
454
00:27:05,860 --> 00:27:08,550
At the same when we request a loan,
455
455
00:27:08,550 --> 00:27:09,590
let's say 100
456
456
00:27:11,460 --> 00:27:14,050
and then after the three seconds have passed,
457
457
00:27:14,050 --> 00:27:16,210
then our loan got approved indeed
458
458
00:27:16,210 --> 00:27:18,943
and our timer reset to two minutes.
459
459
00:27:20,180 --> 00:27:22,250
Beautiful, great.
460
460
00:27:22,250 --> 00:27:25,970
So our application is now actually finished
461
461
00:27:25,970 --> 00:27:27,990
and feature complete.
462
462
00:27:27,990 --> 00:27:31,410
Everything is working just as in our demonstration
463
463
00:27:31,410 --> 00:27:33,730
and I think this was a great application
464
464
00:27:33,730 --> 00:27:38,700
to teach you really a lot of different stuff in JavaScript.
465
465
00:27:38,700 --> 00:27:41,770
So huge congratulations for finishing
466
466
00:27:41,770 --> 00:27:43,660
this great application.
467
467
00:27:43,660 --> 00:27:46,770
It's good to see that you made it to this point with me.
468
468
00:27:46,770 --> 00:27:50,230
And I hope that you're really proud of this application
469
469
00:27:50,230 --> 00:27:51,740
that you just built.
470
470
00:27:51,740 --> 00:27:53,760
You can now show it to all your friends
471
471
00:27:53,760 --> 00:27:57,720
and everyone that you're telling about your coding journey.
472
472
00:27:57,720 --> 00:28:00,360
And I'm sure they will be just as happy as you are
473
473
00:28:00,360 --> 00:28:03,060
about this amazing progress.
474
474
00:28:03,060 --> 00:28:07,180
So once more, great job and well done.
475
475
00:28:07,180 --> 00:28:08,400
And with that being said,
476
476
00:28:08,400 --> 00:28:11,350
I hope to see you soon in the next section
477
477
00:28:11,350 --> 00:28:13,290
where we're gonna build together
478
478
00:28:13,290 --> 00:28:16,090
some features of a real website.
479
479
00:28:16,090 --> 00:28:20,800
So UI components that you find commonly in normal websites,
480
480
00:28:20,800 --> 00:28:24,700
such as sliders or pop up windows.
481
481
00:28:24,700 --> 00:28:26,760
So that's gonna be really exciting.
482
482
00:28:26,760 --> 00:28:28,693
So I hope to see you there soon.
41770
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.