Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
1
00:00:00,786 --> 00:00:04,790
Welcome back, it's great to still have you here
2
2
00:00:04,790 --> 00:00:06,410
in this project.
3
3
00:00:06,410 --> 00:00:10,180
And now that we have a good grip on the find method,
4
4
00:00:10,180 --> 00:00:14,500
let me introduce you to a close cousin of the find method,
5
5
00:00:14,500 --> 00:00:17,263
which is the findIndex method.
6
6
00:00:19,260 --> 00:00:21,360
And the the findIndex method works
7
7
00:00:21,360 --> 00:00:24,020
almost the same way as find.
8
8
00:00:24,020 --> 00:00:28,200
But as the name says, findIndex returns the index
9
9
00:00:28,200 --> 00:00:32,690
of the found element and not the element itself.
10
10
00:00:32,690 --> 00:00:36,260
So, let's see a great use case for findIndex
11
11
00:00:36,260 --> 00:00:37,970
in our Application here,
12
12
00:00:37,970 --> 00:00:42,230
which is the close account feature that we have here.
13
13
00:00:42,230 --> 00:00:44,110
And in our Application here,
14
14
00:00:44,110 --> 00:00:47,520
closing an account, means to basically just delete
15
15
00:00:47,520 --> 00:00:51,580
that account object from the accounts array.
16
16
00:00:51,580 --> 00:00:55,510
So from this one here, okay?
17
17
00:00:55,510 --> 00:00:59,380
So for example, if Sarah decides to close her account,
18
18
00:00:59,380 --> 00:01:02,330
then this account for will simply be deleted,
19
19
00:01:02,330 --> 00:01:03,900
and that's it.
20
20
00:01:03,900 --> 00:01:06,760
Now, to delete an element from an array,
21
21
00:01:06,760 --> 00:01:10,150
we use the splice method, remember,
22
22
00:01:10,150 --> 00:01:12,210
but for the splice method,
23
23
00:01:12,210 --> 00:01:15,850
we need the index at which we want to delete,
24
24
00:01:15,850 --> 00:01:18,590
and where could that index come from,
25
25
00:01:18,590 --> 00:01:22,930
and you guessed it from the findIndex method.
26
26
00:01:22,930 --> 00:01:26,630
So, let's first select this button here,
27
27
00:01:26,630 --> 00:01:29,430
and attach an event handler to it.
28
28
00:01:29,430 --> 00:01:32,313
And so that's the button close here.
29
29
00:01:34,710 --> 00:01:37,620
So let's come down here to our event handlers,
30
30
00:01:37,620 --> 00:01:38,893
now we have multiple,
31
31
00:01:41,930 --> 00:01:46,373
and button, Close.addEventListener,
32
32
00:01:47,210 --> 00:01:50,450
click, and then as always,
33
33
00:01:50,450 --> 00:01:55,450
or function in which we need the event object,
34
34
00:01:55,840 --> 00:01:59,890
so that we can call a preventDefault.
35
35
00:01:59,890 --> 00:02:02,253
All right, let's just test,
36
36
00:02:03,220 --> 00:02:04,913
if this connection works here,
37
37
00:02:06,340 --> 00:02:07,443
let's login,
38
38
00:02:10,248 --> 00:02:13,323
and now as we click this here, we get delete.
39
39
00:02:14,420 --> 00:02:15,780
So that's great.
40
40
00:02:15,780 --> 00:02:18,553
And now let's take a look at our flowchart here.
41
41
00:02:19,850 --> 00:02:23,120
And so, yeah the first thing that we need to do,
42
42
00:02:23,120 --> 00:02:26,480
is to check if the credentials are correct.
43
43
00:02:26,480 --> 00:02:30,030
So basically, if the username that is inputted here,
44
44
00:02:30,030 --> 00:02:33,983
is equal to the current user and the same for the pin.
45
45
00:02:35,440 --> 00:02:39,320
So, that doesn't sound too hard, does it?
46
46
00:02:39,320 --> 00:02:42,890
So actually, let me leave that for you as a challenge.
47
47
00:02:42,890 --> 00:02:46,540
So just write this condition here to again,
48
48
00:02:46,540 --> 00:02:50,063
check if both the user is correct and the pin.
49
49
00:02:53,340 --> 00:02:56,240
All right, I hope you did that.
50
50
00:02:56,240 --> 00:02:59,050
So let's first take a look at the element names
51
51
00:02:59,050 --> 00:03:01,150
that we have up here.
52
52
00:03:01,150 --> 00:03:04,683
And so that's inputCloseUsername and inputClosedPin.
53
53
00:03:06,670 --> 00:03:10,493
So I hope you figured these names out here too.
54
54
00:03:12,520 --> 00:03:13,923
And so let's now say,
55
55
00:03:15,248 --> 00:03:17,331
inputCloseUsername.value,
56
56
00:03:21,610 --> 00:03:25,130
needs to be exactly the same as the username
57
57
00:03:25,130 --> 00:03:27,060
in the current account.
58
58
00:03:27,060 --> 00:03:31,080
So currentAccount.username.
59
59
00:03:31,080 --> 00:03:33,040
So this needs to be true,
60
60
00:03:33,040 --> 00:03:35,053
and the same thing for the pin.
61
61
00:03:36,230 --> 00:03:41,010
So that's inputClosePin.value,
62
62
00:03:41,010 --> 00:03:44,233
and once again, converted to a real number.
63
63
00:03:48,290 --> 00:03:51,490
And this one, also needs to be equal
64
64
00:03:51,490 --> 00:03:54,773
to the currentAccount.Pin.
65
65
00:03:57,400 --> 00:04:01,750
And now let's actually do the deletion itself here.
66
66
00:04:01,750 --> 00:04:05,760
So as I already said, we are going to use the splice method
67
67
00:04:05,760 --> 00:04:08,370
to delete the current account.
68
68
00:04:08,370 --> 00:04:11,053
So let me actually start by writing that part.
69
69
00:04:13,060 --> 00:04:17,240
So, we will take our accounts array
70
70
00:04:17,240 --> 00:04:20,490
and splice it at a certain index,
71
71
00:04:20,490 --> 00:04:24,010
which is the index that we're gonna calculate in a second,
72
72
00:04:24,010 --> 00:04:28,390
and we will remove exactly one element, all right?
73
73
00:04:28,390 --> 00:04:31,290
And then the splice method actually mutates
74
74
00:04:31,290 --> 00:04:33,400
the underlying array itself,
75
75
00:04:33,400 --> 00:04:35,290
and so there is no need to save
76
76
00:04:35,290 --> 00:04:38,370
the result of this anywhere, all right?
77
77
00:04:39,290 --> 00:04:42,870
And so now let's actually calculate that index
78
78
00:04:42,870 --> 00:04:44,773
at which we want to delete.
79
79
00:04:46,450 --> 00:04:51,370
So we take the accounts, and now instead of find,
80
80
00:04:51,370 --> 00:04:52,857
we use findIndex,
81
81
00:04:54,230 --> 00:04:57,460
and once again, this one takes a callback function,
82
82
00:04:57,460 --> 00:05:00,380
which is very similar to all the other callback functions,
83
83
00:05:00,380 --> 00:05:01,890
we have been using.
84
84
00:05:01,890 --> 00:05:05,010
So it's gonna loop over the array essentially,
85
85
00:05:05,010 --> 00:05:08,750
and in each iteration, we get access to the current account.
86
86
00:05:08,750 --> 00:05:11,040
And then we want to find the one
87
87
00:05:11,040 --> 00:05:15,453
where the account has the username,
88
88
00:05:16,950 --> 00:05:21,950
equal to the currentAccount.username, all right?
89
89
00:05:25,170 --> 00:05:28,753
And so let's then take a look at that index.
90
90
00:05:31,570 --> 00:05:34,333
And for now, let's actually take out this part.
91
91
00:05:37,020 --> 00:05:40,250
Okay, and we will then come back
92
92
00:05:40,250 --> 00:05:42,843
and maybe explain this a little bit better.
93
93
00:05:44,420 --> 00:05:49,100
So as I click this here without anything, nothing happens.
94
94
00:05:49,100 --> 00:05:51,250
So just as we intended,
95
95
00:05:51,250 --> 00:05:55,667
then with the correct user, and with a wrong pin,
96
96
00:05:57,290 --> 00:05:59,240
also nothing happens.
97
97
00:05:59,240 --> 00:06:00,300
And notice that here,
98
98
00:06:00,300 --> 00:06:03,170
you cannot see the numbers I'm typing now,
99
99
00:06:03,170 --> 00:06:07,230
because this is a different format in HTML.
100
100
00:06:07,230 --> 00:06:10,530
But I'm still using the four ones, the 1111.
101
101
00:06:10,530 --> 00:06:12,253
And now something should happen.
102
102
00:06:13,130 --> 00:06:17,283
And indeed, we get to the index number of the JS account,
103
103
00:06:18,210 --> 00:06:19,373
in the accounts array.
104
104
00:06:20,240 --> 00:06:23,253
So let's take a look at that array here.
105
105
00:06:25,700 --> 00:06:30,700
And indeed, the Jonas one is number zero, right?
106
106
00:06:31,000 --> 00:06:35,970
Now, if we logged in here as Steven, STW, with 3333.
107
107
00:06:40,080 --> 00:06:42,480
And now we need to confirm that here.
108
108
00:06:42,480 --> 00:06:45,363
So STW again and 3333.
109
109
00:06:47,130 --> 00:06:52,040
Hit enter and then the result should be down here,
110
110
00:06:52,040 --> 00:06:53,920
and indeed, it is.
111
111
00:06:53,920 --> 00:06:56,190
So that's element number two.
112
112
00:06:56,190 --> 00:06:59,040
So zero, one and two,
113
113
00:06:59,040 --> 00:07:02,300
so that is correct, and so or splice here
114
114
00:07:02,300 --> 00:07:05,600
would now indeed delete the user.
115
115
00:07:05,600 --> 00:07:10,350
Okay, so let's see here what we did in the findIndex.
116
116
00:07:10,350 --> 00:07:14,620
So just like before, in find, we passed in a condition,
117
117
00:07:14,620 --> 00:07:18,930
so something that will return either true or false.
118
118
00:07:18,930 --> 00:07:22,230
And the findIndex method will then return the index
119
119
00:07:22,230 --> 00:07:24,430
of the first element in the array
120
120
00:07:24,430 --> 00:07:26,550
that matches this condition.
121
121
00:07:26,550 --> 00:07:30,220
So for which this condition here returns true.
122
122
00:07:30,220 --> 00:07:34,670
So again, similar to find, but it returns the index,
123
123
00:07:34,670 --> 00:07:36,823
and not the element itself.
124
124
00:07:37,730 --> 00:07:40,630
Now, you might notice that this is actually similar
125
125
00:07:40,630 --> 00:07:44,880
to the indexOf method that we studied before.
126
126
00:07:44,880 --> 00:07:46,323
So, indexOf,
127
127
00:07:48,260 --> 00:07:52,680
and then here we can pass in some value, all right?
128
128
00:07:52,680 --> 00:07:56,120
Now, the big difference here is that with indexOf,
129
129
00:07:56,120 --> 00:07:59,460
we can only search for a value that is in the array.
130
130
00:07:59,460 --> 00:08:03,480
So, if the array contains the 23, then it's true,
131
131
00:08:03,480 --> 00:08:06,010
and if not, then it's false.
132
132
00:08:06,010 --> 00:08:08,320
But on the other hand, with findIndex,
133
133
00:08:08,320 --> 00:08:12,040
we can create a complex condition like this one,
134
134
00:08:12,040 --> 00:08:14,080
and of course, it doesn't have to be
135
135
00:08:14,080 --> 00:08:15,860
the equality operator here.
136
136
00:08:15,860 --> 00:08:20,467
It can be anything that returns true or false, okay?
137
137
00:08:20,467 --> 00:08:22,800
And here we can simply check
138
138
00:08:22,800 --> 00:08:25,390
if the array contains this value or not,
139
139
00:08:25,390 --> 00:08:27,890
and if so, return the indexOf it.
140
140
00:08:27,890 --> 00:08:30,010
So both return an index number,
141
141
00:08:30,010 --> 00:08:32,853
but this one here is a lot simpler.
142
142
00:08:34,140 --> 00:08:38,640
And so now let's actually delete this element here.
143
143
00:08:38,640 --> 00:08:43,050
So this current user, on the current account.
144
144
00:08:43,050 --> 00:08:46,010
And now let's get back here to our flowchart,
145
145
00:08:46,010 --> 00:08:48,023
which I closed for some reason.
146
146
00:08:48,950 --> 00:08:51,360
And so, we just did this part.
147
147
00:08:51,360 --> 00:08:53,993
Now, we also need to log out the user.
148
148
00:08:54,880 --> 00:08:57,163
So that just means to hide the UI.
149
149
00:08:58,200 --> 00:09:00,470
And so that's similar to what we did here,
150
150
00:09:00,470 --> 00:09:03,323
where we showed the UI.
151
151
00:09:04,170 --> 00:09:06,363
Now we want to set it back to zero.
152
152
00:09:07,960 --> 00:09:10,163
So, down here.
153
153
00:09:12,440 --> 00:09:13,553
So hide UI,
154
154
00:09:15,319 --> 00:09:17,600
and here delete account,
155
155
00:09:20,910 --> 00:09:23,973
Okay, and then, of course, as we reload the page,
156
156
00:09:25,400 --> 00:09:28,940
as I said before, the user will then be back of course,
157
157
00:09:28,940 --> 00:09:33,940
because we do not persist this data anywhere, all right?
158
158
00:09:35,810 --> 00:09:38,770
Well, the UI is still there.
159
159
00:09:38,770 --> 00:09:42,690
Oh, that's because we didn't change this here to zero.
160
160
00:09:42,690 --> 00:09:46,960
But anyway, let's still take a look at the accounts object
161
161
00:09:46,960 --> 00:09:48,053
in this moment.
162
162
00:09:49,550 --> 00:09:52,870
And we see that we now only have three accounts left,
163
163
00:09:52,870 --> 00:09:56,283
and one of Jonas is nowhere to be found.
164
164
00:09:57,290 --> 00:09:59,850
So this means that it actually worked,
165
165
00:09:59,850 --> 00:10:03,540
now we just need to fix this here and set it to zero.
166
166
00:10:03,540 --> 00:10:05,600
And we also just like before,
167
167
00:10:05,600 --> 00:10:07,393
I want to clear these fields here.
168
168
00:10:08,630 --> 00:10:11,283
So that's the same as we did before.
169
169
00:10:12,300 --> 00:10:15,390
So, similar to this one,
170
170
00:10:15,390 --> 00:10:16,640
let me just copy it here.
171
171
00:10:19,063 --> 00:10:21,710
And this one we can paste right here outside
172
172
00:10:21,710 --> 00:10:22,963
of the IF statement,
173
173
00:10:23,860 --> 00:10:28,440
and then just copy these two inputs here.
174
174
00:10:28,440 --> 00:10:32,083
So close username and close pin.
175
175
00:10:34,280 --> 00:10:35,690
This is set to zero.
176
176
00:10:35,690 --> 00:10:39,213
And now, this should actually be complete.
177
177
00:10:41,530 --> 00:10:42,713
So let's see.
178
178
00:10:45,610 --> 00:10:46,853
Well, nothing happened.
179
179
00:10:48,890 --> 00:10:50,053
So let's see here.
180
180
00:10:51,410 --> 00:10:56,410
Oh, okay, this is a bug that I just introduced here.
181
181
00:10:56,770 --> 00:11:01,100
So basically, before even reading the data from this field,
182
182
00:11:01,100 --> 00:11:04,700
I'm already setting it back to empty here,
183
183
00:11:04,700 --> 00:11:08,390
Okay, and so therefore of course, nothing can work.
184
184
00:11:08,390 --> 00:11:13,070
So this needs to be after the IF-Else statement, all right?
185
185
00:11:14,460 --> 00:11:15,770
But it's still a good thing
186
186
00:11:15,770 --> 00:11:18,690
that these small bugs keep happening here.
187
187
00:11:18,690 --> 00:11:20,640
So that I can fix them,
188
188
00:11:20,640 --> 00:11:24,173
and show to you that everyone makes this kind of mistakes.
189
189
00:11:25,320 --> 00:11:27,913
So let's try it again 1111.
190
190
00:11:29,130 --> 00:11:30,883
And now it's gone.
191
191
00:11:31,990 --> 00:11:34,763
And as I try to log in now as this user,
192
192
00:11:37,130 --> 00:11:39,130
you see that nothing happens,
193
193
00:11:39,130 --> 00:11:41,450
and we get undefined down here,
194
194
00:11:41,450 --> 00:11:44,700
and that's because this user no longer exists now
195
195
00:11:44,700 --> 00:11:47,210
in our accounts array.
196
196
00:11:47,210 --> 00:11:51,393
Great, so one more feature implemented successfully.
197
197
00:11:52,350 --> 00:11:54,450
Now, there's just a couple of things
198
198
00:11:54,450 --> 00:11:56,340
I want you to note here,
199
199
00:11:56,340 --> 00:11:59,550
both the find and findIndex methods
200
200
00:11:59,550 --> 00:12:02,260
get access to also the current index,
201
201
00:12:02,260 --> 00:12:04,660
and the current entire array.
202
202
00:12:04,660 --> 00:12:07,300
So as always, besides the current element,
203
203
00:12:07,300 --> 00:12:10,180
these other two values are also available.
204
204
00:12:10,180 --> 00:12:14,140
But in practice, I never found these useful.
205
205
00:12:14,140 --> 00:12:18,640
And second, the both the find and findIndex methods
206
206
00:12:18,640 --> 00:12:21,720
were added to JavaScript in ESX.
207
207
00:12:21,720 --> 00:12:26,330
And so they will not work in like super old browsers.
208
208
00:12:26,330 --> 00:12:28,430
But don't worry, there is going to be a lecture
209
209
00:12:28,430 --> 00:12:30,830
a little bit later on how to support
210
210
00:12:30,830 --> 00:12:32,443
all of these old browsers.
18068
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.