Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
1
00:00:01,390 --> 00:00:03,760
So using the workout classes
2
2
00:00:03,760 --> 00:00:05,270
that we just implemented,
3
3
00:00:05,270 --> 00:00:07,680
let's now finally implement the feature
4
4
00:00:07,680 --> 00:00:11,383
of creating a new workout from our user interface.
5
5
00:00:13,010 --> 00:00:16,423
And to start, let's take a look at our flowchart here.
6
6
00:00:17,842 --> 00:00:19,970
And so basically, this here is the action
7
7
00:00:19,970 --> 00:00:21,840
that we're interested in now
8
8
00:00:21,840 --> 00:00:24,800
so when the user submits a new workout.
9
9
00:00:24,800 --> 00:00:29,410
And so we already added this new workout method here
10
10
00:00:29,410 --> 00:00:32,850
as an event handler function for that event.
11
11
00:00:32,850 --> 00:00:35,290
And so what we want to happen now
12
12
00:00:35,290 --> 00:00:38,760
is to basically render the workout on the map,
13
13
00:00:38,760 --> 00:00:41,680
render the workout on the list
14
14
00:00:41,680 --> 00:00:44,803
and then this part here, we're gonna leave for later.
15
15
00:00:45,830 --> 00:00:48,260
So this one is the high level overview
16
16
00:00:48,260 --> 00:00:50,200
of what needs to happen.
17
17
00:00:50,200 --> 00:00:53,130
But actually, there's a lot more things involved
18
18
00:00:53,130 --> 00:00:55,070
than just these immediate actions
19
19
00:00:55,070 --> 00:00:57,730
that we see on the user interface.
20
20
00:00:57,730 --> 00:01:00,160
So actually, we're gonna leave the rendering here
21
21
00:01:00,160 --> 00:01:01,560
for the next video,
22
22
00:01:01,560 --> 00:01:03,033
because as I just said,
23
23
00:01:03,033 --> 00:01:05,490
there's actually a lot of other stuff
24
24
00:01:05,490 --> 00:01:08,453
that we have to do, now right?
25
25
00:01:09,670 --> 00:01:13,810
So as you see, we are back here at looking at the flowchart
26
26
00:01:13,810 --> 00:01:16,390
because now we are back to being interested
27
27
00:01:16,390 --> 00:01:18,680
what we actually need to implement,
28
28
00:01:18,680 --> 00:01:22,420
and not how to implement it, right?
29
29
00:01:22,420 --> 00:01:24,470
So the architecture here, again,
30
30
00:01:24,470 --> 00:01:26,870
is about how we implement it.
31
31
00:01:26,870 --> 00:01:29,560
And so it contains all of these different methods
32
32
00:01:29,560 --> 00:01:31,710
and these low level details,
33
33
00:01:31,710 --> 00:01:33,210
while the flowchart here
34
34
00:01:33,210 --> 00:01:35,860
is really more of a high level overview
35
35
00:01:35,860 --> 00:01:38,440
of what we want to implement.
36
36
00:01:38,440 --> 00:01:41,330
And so for now, we don't need the architecture anymore,
37
37
00:01:41,330 --> 00:01:44,573
because we already put everything into the code
38
38
00:01:44,573 --> 00:01:46,520
that we had here.
39
39
00:01:46,520 --> 00:01:48,120
Now, if you're really curious
40
40
00:01:48,120 --> 00:01:50,930
and want to spoil the experience,
41
41
00:01:50,930 --> 00:01:53,660
basically until the end of the section,
42
42
00:01:53,660 --> 00:01:55,440
then you can already take a look
43
43
00:01:55,440 --> 00:01:57,940
at the final architecture here
44
44
00:01:57,940 --> 00:01:59,910
but I'm not gonna do that.
45
45
00:01:59,910 --> 00:02:01,970
So I just want to now keep building
46
46
00:02:01,970 --> 00:02:06,490
the rest of the application as we go, okay?
47
47
00:02:06,490 --> 00:02:09,785
But anyway, since this is so high level here,
48
48
00:02:09,785 --> 00:02:13,450
let's actually go to the working demo application
49
49
00:02:13,450 --> 00:02:15,383
and see what exactly happens.
50
50
00:02:16,300 --> 00:02:17,593
So let's reload here.
51
51
00:02:18,920 --> 00:02:21,460
And so let's click just somewhere.
52
52
00:02:21,460 --> 00:02:25,400
And then you see, as we already know, the form opens,
53
53
00:02:25,400 --> 00:02:27,910
then we can input some data here
54
54
00:02:27,910 --> 00:02:31,440
and then our application needs to get this data,
55
55
00:02:31,440 --> 00:02:34,720
it needs to check if the data actually makes sense.
56
56
00:02:34,720 --> 00:02:36,820
And then we need to create a new object
57
57
00:02:36,820 --> 00:02:40,840
for this workout and render it right here
58
58
00:02:40,840 --> 00:02:43,760
and also on the map, of course.
59
59
00:02:43,760 --> 00:02:47,750
And then finally, after all that the form is also hidden.
60
60
00:02:47,750 --> 00:02:49,990
So everything I just said is gonna happen
61
61
00:02:49,990 --> 00:02:52,570
whenever we hit enter here.
62
62
00:02:52,570 --> 00:02:55,110
So you see, of course, the marker was created,
63
63
00:02:55,110 --> 00:02:56,860
it was rendered here,
64
64
00:02:56,860 --> 00:02:58,900
all the input data had to be checked,
65
65
00:02:58,900 --> 00:03:01,783
and a new running object was created.
66
66
00:03:02,710 --> 00:03:05,210
So for example, if we add another one,
67
67
00:03:05,210 --> 00:03:07,320
but without any data,
68
68
00:03:07,320 --> 00:03:10,310
then we are gonna get this alert.
69
69
00:03:10,310 --> 00:03:12,620
Or the same if we input any data
70
70
00:03:12,620 --> 00:03:14,710
that doesn't make much sense.
71
71
00:03:14,710 --> 00:03:17,720
For example, a negative number for the cadence,
72
72
00:03:17,720 --> 00:03:19,620
which is of course impossible.
73
73
00:03:19,620 --> 00:03:22,710
And so again, we get this error here.
74
74
00:03:22,710 --> 00:03:25,580
So input validation is an important part
75
75
00:03:25,580 --> 00:03:29,503
of creating any application that works with user inputs.
76
76
00:03:30,630 --> 00:03:33,883
And so let's now actually work on the function
77
77
00:03:33,883 --> 00:03:37,640
that is responsible for doing all of this.
78
78
00:03:37,640 --> 00:03:40,790
And for starters, I will basically document
79
79
00:03:40,790 --> 00:03:43,563
everything that we need to do here using comments.
80
80
00:03:44,550 --> 00:03:46,680
So first, we need to get data
81
81
00:03:48,270 --> 00:03:51,570
from the form, then we need to check
82
82
00:03:53,070 --> 00:03:55,453
if data is valid,
83
83
00:03:57,400 --> 00:03:59,163
then if it's running,
84
84
00:04:00,310 --> 00:04:04,343
so if the activity running, then create running object.
85
85
00:04:08,560 --> 00:04:11,050
And if the activity is cycling,
86
86
00:04:11,050 --> 00:04:14,463
then of course, create a cycling object.
87
87
00:04:17,310 --> 00:04:22,310
Then add the new object to the work out array.
88
88
00:04:24,370 --> 00:04:27,480
And so, yeah, instead of activity,
89
89
00:04:27,480 --> 00:04:29,533
let's actually call it work out here.
90
90
00:04:32,730 --> 00:04:34,293
Then we want to render,
91
91
00:04:35,220 --> 00:04:38,380
workout on map as a marker
92
92
00:04:38,380 --> 00:04:40,200
and finally, we want to render
93
93
00:04:41,540 --> 00:04:43,513
the new workout on the list.
94
94
00:04:44,910 --> 00:04:48,020
And finally also, we want to then hide the form
95
95
00:04:49,640 --> 00:04:51,993
and clear the input fields.
96
96
00:04:54,730 --> 00:04:57,910
So you see there's gonna be a lot of work.
97
97
00:04:57,910 --> 00:05:02,410
Let's put this one for now at least here,
98
98
00:05:02,410 --> 00:05:05,043
even though it's not gonna really work like this.
99
99
00:05:07,550 --> 00:05:12,550
But okay, so with this, we now have all the steps lined out
100
100
00:05:12,610 --> 00:05:14,383
and so let's get started.
101
101
00:05:15,810 --> 00:05:18,960
And we're gonna start by getting the data from the forum
102
102
00:05:18,960 --> 00:05:20,900
and starting with the type,
103
103
00:05:20,900 --> 00:05:24,773
and type is already stored at the variable input type.
104
104
00:05:25,770 --> 00:05:27,700
So that's all the way up here.
105
105
00:05:27,700 --> 00:05:29,863
Let's bring that down, actually.
106
106
00:05:31,640 --> 00:05:35,820
And we could even add these elements here
107
107
00:05:35,820 --> 00:05:39,550
basically as fields also inside of the application.
108
108
00:05:39,550 --> 00:05:42,190
But in this case, I prefer not to do that
109
109
00:05:42,190 --> 00:05:45,570
because then every time that we wanted to reference
110
110
00:05:45,570 --> 00:05:47,520
one of these elements,
111
111
00:05:47,520 --> 00:05:50,420
then we would always have to use like this .inputDistance,
112
112
00:05:51,330 --> 00:05:54,580
or duration, and so on and so forth.
113
113
00:05:54,580 --> 00:05:56,683
And I just don't really like that.
114
114
00:05:57,640 --> 00:06:00,490
But anyway, let's not take the values of input type,
115
115
00:06:00,490 --> 00:06:03,653
distance, duration, cadence and elevation.
116
116
00:06:06,030 --> 00:06:09,170
And these two here are not that straightforward
117
117
00:06:09,170 --> 00:06:11,513
but let's see that in a minute.
118
118
00:06:13,980 --> 00:06:15,817
So inputType.value.
119
119
00:06:19,216 --> 00:06:22,460
And so input type is actually a select element.
120
120
00:06:22,460 --> 00:06:26,810
But still, we get the value using the value property.
121
121
00:06:26,810 --> 00:06:28,260
Let me just show that to you.
122
122
00:06:29,380 --> 00:06:32,150
And so, yeah, here it is.
123
123
00:06:32,150 --> 00:06:34,580
And so each option has this value.
124
124
00:06:34,580 --> 00:06:37,130
And so for running, the value is running
125
125
00:06:37,130 --> 00:06:41,887
with the lowercase r, and for cycling the same, okay?
126
126
00:06:41,887 --> 00:06:44,030
And so again, the value will be
127
127
00:06:44,030 --> 00:06:46,280
whatever of these two is selected,
128
128
00:06:46,280 --> 00:06:48,560
and then we get this value here.
129
129
00:06:48,560 --> 00:06:50,773
And so that will be important in a minute.
130
130
00:06:53,290 --> 00:06:56,143
But anyway, let's not take the distance.
131
131
00:06:58,430 --> 00:07:02,070
So that's inputDistance.value
132
132
00:07:02,070 --> 00:07:05,330
and remember that this always comes as strings
133
133
00:07:05,330 --> 00:07:08,653
and so let's convert that immediately to a number.
134
134
00:07:10,960 --> 00:07:13,070
Then the duration.
135
135
00:07:13,070 --> 00:07:18,070
Let's do the same here, inputDuration.value.
136
136
00:07:19,720 --> 00:07:22,350
Now about the cadence and the elevation gain,
137
137
00:07:22,350 --> 00:07:23,930
we actually don't want to get them
138
138
00:07:23,930 --> 00:07:25,500
here right in the beginning.
139
139
00:07:25,500 --> 00:07:27,620
But the cadence, we only want to get
140
140
00:07:27,620 --> 00:07:29,440
if it is a running workout.
141
141
00:07:29,440 --> 00:07:30,500
And the elevation gain,
142
142
00:07:30,500 --> 00:07:34,000
we only want to get if it is a cycling workout,
143
143
00:07:34,000 --> 00:07:36,040
because that will then make it easier for us
144
144
00:07:36,040 --> 00:07:38,300
to validate the data.
145
145
00:07:38,300 --> 00:07:40,760
But more about that in a second.
146
146
00:07:40,760 --> 00:07:42,240
So for now, let's actually check
147
147
00:07:42,240 --> 00:07:44,523
what kind of workout we are dealing with.
148
148
00:07:45,580 --> 00:07:48,143
And so all we have to do is to check the type.
149
149
00:07:49,610 --> 00:07:50,823
And if it's running,
150
150
00:07:51,800 --> 00:07:54,886
then we want to get the cadence.
151
151
00:07:54,886 --> 00:07:57,330
So let's call that cadences as well
152
152
00:07:57,330 --> 00:08:02,330
and convert inputCadence.value to a number.
153
153
00:08:02,840 --> 00:08:05,563
But if we are dealing with cycling,
154
154
00:08:06,550 --> 00:08:08,153
then we want the elevation gain.
155
155
00:08:12,270 --> 00:08:13,470
So let's called this one
156
156
00:08:15,380 --> 00:08:20,303
elevation and here it's also called input elevation.
157
157
00:08:21,210 --> 00:08:25,400
Now okay, and so now let's check if the data is valid.
158
158
00:08:25,400 --> 00:08:26,830
And so we will not do that
159
159
00:08:26,830 --> 00:08:30,103
inside of each of these if statements.
160
160
00:08:31,030 --> 00:08:32,310
Now you might have noticed
161
161
00:08:32,310 --> 00:08:35,470
that I actually created two separate if statements here
162
162
00:08:35,470 --> 00:08:37,830
instead of an if else statement.
163
163
00:08:37,830 --> 00:08:41,160
And that's just something that you will see more and more
164
164
00:08:41,160 --> 00:08:42,830
in modern JavaScript.
165
165
00:08:42,830 --> 00:08:46,670
So the if else is not really that much used anymore.
166
166
00:08:46,670 --> 00:08:50,620
And I think that actually it looks a lot cleaner like this
167
167
00:08:50,620 --> 00:08:53,043
so to simply have two if statements.
168
168
00:08:54,490 --> 00:08:58,390
So anyway, let's not check if the data is valid.
169
169
00:08:58,390 --> 00:09:01,890
And what does it mean for the data to be valid?
170
170
00:09:01,890 --> 00:09:06,693
Well, first of all, each of them should be a number, right?
171
171
00:09:07,770 --> 00:09:09,623
And so let's do that.
172
172
00:09:11,670 --> 00:09:15,460
And here again, we will actually use a guard clause.
173
173
00:09:15,460 --> 00:09:17,910
So again, what a guard clause means
174
174
00:09:17,910 --> 00:09:20,610
is that we will basically check for the opposite
175
175
00:09:20,610 --> 00:09:23,410
of what we are originally interested in
176
176
00:09:23,410 --> 00:09:25,190
and if that opposite is true,
177
177
00:09:25,190 --> 00:09:28,050
then we simply return the function immediately.
178
178
00:09:28,050 --> 00:09:29,330
And so once again,
179
179
00:09:29,330 --> 00:09:32,810
this is a trait of more modern JavaScript.
180
180
00:09:32,810 --> 00:09:37,220
So kind of a trend that you will see in modern JavaScript.
181
181
00:09:37,220 --> 00:09:40,180
But anyway, let me show you what I mean here.
182
182
00:09:40,180 --> 00:09:42,733
So if the distance is not a number,
183
183
00:09:44,130 --> 00:09:47,163
and remember that for that, we use a Number.isFinite.
184
184
00:09:51,970 --> 00:09:55,570
So if the distance here is not a number,
185
185
00:09:55,570 --> 00:09:57,893
then we want to return immediately.
186
186
00:09:58,900 --> 00:10:00,240
So we want to return
187
187
00:10:00,240 --> 00:10:03,683
and then we can also do some other code here.
188
188
00:10:04,540 --> 00:10:05,943
So let's create an alert.
189
189
00:10:07,430 --> 00:10:12,430
So inputs have to be positive numbers.
190
190
00:10:13,412 --> 00:10:15,290
And so for now we check for numbers
191
191
00:10:15,290 --> 00:10:17,970
but we didn't yet check for positive.
192
192
00:10:17,970 --> 00:10:20,710
But let's leave that for a second.
193
193
00:10:20,710 --> 00:10:23,860
So we should already be able to test out
194
194
00:10:23,860 --> 00:10:25,623
if this if here is gonna work.
195
195
00:10:27,590 --> 00:10:29,930
So let's just see if our map appears here.
196
196
00:10:32,916 --> 00:10:34,870
And let's try to reload here.
197
197
00:10:34,870 --> 00:10:36,610
And for some reason, sometimes
198
198
00:10:36,610 --> 00:10:38,730
this takes a really long time.
199
199
00:10:38,730 --> 00:10:41,950
So sometimes while I was developing this application,
200
200
00:10:41,950 --> 00:10:44,590
I waited up to like two or three minutes
201
201
00:10:44,590 --> 00:10:46,920
and I don't know why that happens.
202
202
00:10:46,920 --> 00:10:50,190
But yeah, I hope that never happens for you.
203
203
00:10:50,190 --> 00:10:52,200
But in case you see long waiting times,
204
204
00:10:52,200 --> 00:10:54,393
that might be normal, all right?
205
205
00:10:55,970 --> 00:10:57,743
But now here it is.
206
206
00:10:58,812 --> 00:11:02,790
And so let's input some invalid distance.
207
207
00:11:02,790 --> 00:11:04,960
So like just any letter,
208
208
00:11:04,960 --> 00:11:07,893
and then we get inputs have to be positive numbers.
209
209
00:11:09,080 --> 00:11:11,700
So that is already working.
210
210
00:11:11,700 --> 00:11:14,923
And now we just need to do the same with the other inputs.
211
211
00:11:15,800 --> 00:11:18,943
So we want the same for the distance.
212
212
00:11:20,020 --> 00:11:21,643
So Number.isFinite.
213
213
00:11:24,920 --> 00:11:26,370
So actually, for duration
214
214
00:11:27,290 --> 00:11:32,290
and then the same thing for Number.isFinite cadence, okay?
215
215
00:11:38,090 --> 00:11:39,950
Now, this is actually not correct,
216
216
00:11:39,950 --> 00:11:44,590
because we don't want the and but instead, we want or.
217
217
00:11:44,590 --> 00:11:46,330
So this one here should happen
218
218
00:11:46,330 --> 00:11:50,130
whenever one of these three here is not a number
219
219
00:11:50,130 --> 00:11:54,610
and not when all of them are invalid numbers, right?
220
220
00:11:54,610 --> 00:11:56,963
And so that's exactly what or means.
221
221
00:11:58,560 --> 00:12:01,100
So if this one is an invalid number,
222
222
00:12:01,100 --> 00:12:06,100
or this one, or this one, then we can get this alert.
223
223
00:12:06,570 --> 00:12:10,020
And so the reason why we did this checking here
224
224
00:12:10,020 --> 00:12:13,710
inside of this if block
225
225
00:12:13,710 --> 00:12:16,350
is because if we did the same out here,
226
226
00:12:16,350 --> 00:12:20,320
then we would also want to check for the elevation, right?
227
227
00:12:20,320 --> 00:12:21,580
But as we know already,
228
228
00:12:21,580 --> 00:12:24,460
only one of the cadence and elevation
229
229
00:12:24,460 --> 00:12:26,710
can be defined at the same time,
230
230
00:12:26,710 --> 00:12:30,320
they cannot both be defined at the same time.
231
231
00:12:30,320 --> 00:12:31,860
And so performing this check
232
232
00:12:31,860 --> 00:12:34,830
would then be a little bit more difficult.
233
233
00:12:34,830 --> 00:12:39,410
So now we can go ahead and do the same thing down here.
234
234
00:12:39,410 --> 00:12:41,270
So in the cycling part,
235
235
00:12:41,270 --> 00:12:44,710
but let's actually refactor this code here already.
236
236
00:12:44,710 --> 00:12:47,120
And basically create a small function,
237
237
00:12:47,120 --> 00:12:49,630
which takes a number of arguments,
238
238
00:12:49,630 --> 00:12:51,800
and will then validate if all of them
239
239
00:12:51,800 --> 00:12:54,003
are numbers or not, okay?
240
240
00:12:56,350 --> 00:12:59,560
So basically, we wanted to work like this
241
241
00:12:59,560 --> 00:13:00,780
but we wanted to write this
242
242
00:13:00,780 --> 00:13:03,910
in a more clear and more beautiful
243
243
00:13:03,910 --> 00:13:07,623
so to say, way, all right?
244
244
00:13:08,460 --> 00:13:11,463
So let's create a very simple helper function here.
245
245
00:13:12,700 --> 00:13:14,793
And let me call it validInputs.
246
246
00:13:18,310 --> 00:13:20,490
So a very simple arrow function
247
247
00:13:20,490 --> 00:13:23,863
and this can take an arbitrary number of inputs.
248
248
00:13:27,450 --> 00:13:31,160
And remember that when we use rest parameters like this,
249
249
00:13:31,160 --> 00:13:32,373
then we get an array.
250
250
00:13:34,130 --> 00:13:36,110
So inputs is an array
251
251
00:13:36,110 --> 00:13:38,520
and we now want to loop over this array,
252
252
00:13:38,520 --> 00:13:42,470
and basically check if all of them are positive.
253
253
00:13:42,470 --> 00:13:45,360
Now there's actually already a predefined method
254
254
00:13:45,360 --> 00:13:48,760
in JavaScript, that is very helpful for that.
255
255
00:13:48,760 --> 00:13:53,253
So remember that we have a nice little method called every.
256
256
00:13:54,490 --> 00:13:56,890
And so let's use it here.
257
257
00:13:56,890 --> 00:13:59,140
And then I will quickly explain what it does.
258
258
00:14:00,250 --> 00:14:01,920
So the current input,
259
259
00:14:01,920 --> 00:14:06,920
and then Number.IsFinite, the current input.
260
260
00:14:09,110 --> 00:14:12,160
So basically, this will loop over the array,
261
261
00:14:12,160 --> 00:14:13,330
and then each of them,
262
262
00:14:13,330 --> 00:14:17,740
it will check whether the number is finite or not.
263
263
00:14:17,740 --> 00:14:20,100
And then in the end, the every method
264
264
00:14:20,100 --> 00:14:23,160
will only return true if this value here
265
265
00:14:23,160 --> 00:14:25,590
was true for all of them.
266
266
00:14:25,590 --> 00:14:28,000
So for all elements in the array.
267
267
00:14:28,000 --> 00:14:32,190
But if only one of these values here was not finite,
268
268
00:14:32,190 --> 00:14:34,480
so if the result here was false
269
269
00:14:34,480 --> 00:14:37,200
for one of the elements of the array,
270
270
00:14:37,200 --> 00:14:39,690
then every will return false.
271
271
00:14:39,690 --> 00:14:42,120
And so that will then be the return value
272
272
00:14:42,120 --> 00:14:44,710
of this arrow function, right?
273
273
00:14:44,710 --> 00:14:47,833
And so then here, we can replace all of this.
274
274
00:14:49,270 --> 00:14:53,290
And let's actually just comment it out.
275
275
00:14:53,290 --> 00:14:57,010
We cannot say if not validInputs,
276
276
00:14:57,010 --> 00:15:00,580
and then pass in the three that we're interested in.
277
277
00:15:00,580 --> 00:15:05,580
So distance, duration, and cadence.
278
278
00:15:06,880 --> 00:15:11,820
And again, here we are inverting the condition, right?
279
279
00:15:11,820 --> 00:15:14,010
So if all of these are numbers,
280
280
00:15:14,010 --> 00:15:17,050
then this here will become true, right?
281
281
00:15:17,050 --> 00:15:19,150
But whenever this is not true,
282
282
00:15:19,150 --> 00:15:21,260
then that's the case where we want to return
283
283
00:15:21,260 --> 00:15:25,250
from the function and show this alert Window, all right?
284
284
00:15:28,470 --> 00:15:29,770
So let's copy this
285
285
00:15:31,628 --> 00:15:36,150
and do the same here for the elevation like this.
286
286
00:15:37,386 --> 00:15:39,436
And here, I will get rid of the comments.
287
287
00:15:40,370 --> 00:15:42,810
And so this is the first check.
288
288
00:15:42,810 --> 00:15:44,990
But in fact, we also want to test
289
289
00:15:44,990 --> 00:15:47,240
if the numbers are positive,
290
290
00:15:47,240 --> 00:15:50,710
because otherwise, they don't make much sense.
291
291
00:15:50,710 --> 00:15:52,223
So let's reload here again.
292
292
00:15:53,960 --> 00:15:57,019
So right now, if I put a letter in any of these,
293
293
00:15:57,019 --> 00:16:00,880
then it's not gonna work, right?
294
294
00:16:00,880 --> 00:16:05,310
But if I put in a negative number of steps,
295
295
00:16:05,310 --> 00:16:07,830
then this is perfectly acceptable
296
296
00:16:07,830 --> 00:16:12,040
and we already get the marker here printed to the map.
297
297
00:16:12,040 --> 00:16:15,650
But in fact, we don't want this to be acceptable.
298
298
00:16:15,650 --> 00:16:18,040
So negative values should not be allowed
299
299
00:16:18,040 --> 00:16:20,170
for any of these three.
300
300
00:16:20,170 --> 00:16:22,080
But in the cycling, it should be allowed
301
301
00:16:22,080 --> 00:16:23,810
for the elevation gain.
302
302
00:16:23,810 --> 00:16:26,660
So here, we can, of course have a negative number,
303
303
00:16:26,660 --> 00:16:30,823
which happens when we go basically down a mountain, right?
304
304
00:16:31,990 --> 00:16:35,490
So that's simple as well,
305
305
00:16:35,490 --> 00:16:39,000
all you have to do is to check if these three values here
306
306
00:16:39,000 --> 00:16:43,000
are greater than zero, and the same for these two,
307
307
00:16:43,000 --> 00:16:44,363
but not for the elevation, okay?
308
308
00:16:45,970 --> 00:16:48,840
And so actually, to make this really cool,
309
309
00:16:48,840 --> 00:16:52,633
I will create another small helper function like this one.
310
310
00:16:53,570 --> 00:16:56,060
And it might be a good habit for you as well
311
311
00:16:56,060 --> 00:16:59,410
to get used to these small helper functions.
312
312
00:16:59,410 --> 00:17:02,290
So they're especially nice in these situations
313
313
00:17:02,290 --> 00:17:04,293
for testing complex conditions.
314
314
00:17:05,130 --> 00:17:06,961
So instead of writing all of this,
315
315
00:17:06,961 --> 00:17:10,660
and plus checking now for positive numbers,
316
316
00:17:10,660 --> 00:17:14,200
we can simply export that into one or two functions,
317
317
00:17:14,200 --> 00:17:16,053
which then do the job for us.
318
318
00:17:17,370 --> 00:17:21,160
So here, I'm gonna create a function called all positive,
319
319
00:17:21,160 --> 00:17:23,430
and this one is gonna be almost the same
320
320
00:17:23,430 --> 00:17:24,603
as the previous one.
321
321
00:17:25,490 --> 00:17:28,663
So it takes in an arbitrary amount of inputs.
322
322
00:17:32,250 --> 00:17:36,160
And then we will only return true if all of them
323
323
00:17:36,160 --> 00:17:38,320
are greater than zero.
324
324
00:17:38,320 --> 00:17:42,350
And so here the every method is very useful again.
325
325
00:17:42,350 --> 00:17:45,700
So input, and then here, we need some condition
326
326
00:17:45,700 --> 00:17:48,170
that returns true or false.
327
327
00:17:48,170 --> 00:17:51,733
And so that's input greater than zero.
328
328
00:17:53,100 --> 00:17:55,630
And so let's not use that here.
329
329
00:17:55,630 --> 00:17:57,692
And so we want basically,
330
330
00:17:57,692 --> 00:18:01,810
if all of the inputs are not valid,
331
331
00:18:01,810 --> 00:18:06,810
or if there is basically any number that is not positive.
332
332
00:18:06,840 --> 00:18:08,880
So if not all positive
333
333
00:18:10,980 --> 00:18:15,980
distance, duration, and cadence, all right?
334
334
00:18:18,770 --> 00:18:21,680
So in this case, we then want to get this alert
335
335
00:18:22,660 --> 00:18:27,660
and now here, let's do the same for the cycling.
336
336
00:18:30,150 --> 00:18:33,650
But here, we are only interested in distance and duration,
337
337
00:18:33,650 --> 00:18:37,563
because again, the elevation might very well be negative.
338
338
00:18:39,010 --> 00:18:41,720
So this is a little bit complex validation
339
339
00:18:41,720 --> 00:18:43,590
but that's no problem at all.
340
340
00:18:43,590 --> 00:18:46,670
That's why I spent some time here on this validation
341
341
00:18:46,670 --> 00:18:48,580
without any problem.
342
342
00:18:48,580 --> 00:18:50,720
Now, it would have been a little bit easier
343
343
00:18:50,720 --> 00:18:53,060
if we didn't have these different values
344
344
00:18:53,060 --> 00:18:56,433
of elevation and cadence for the two different workouts.
345
345
00:18:57,280 --> 00:19:00,790
But we do have it and yeah,
346
346
00:19:00,790 --> 00:19:03,040
so we have to solve that problem.
347
347
00:19:03,040 --> 00:19:07,060
And so I think it works really nice like this.
348
348
00:19:07,060 --> 00:19:10,330
Let me just check it out here one more time now
349
349
00:19:10,330 --> 00:19:13,130
with these negative values.
350
350
00:19:13,130 --> 00:19:15,560
So if we have a negative distance,
351
351
00:19:15,560 --> 00:19:20,560
then now indeed, we get the alert to accept for cycling.
352
352
00:19:22,580 --> 00:19:27,580
So let's remove that one, and two, two
353
353
00:19:27,670 --> 00:19:31,830
and two here minus two, but that still works.
354
354
00:19:31,830 --> 00:19:36,830
And so clearly, our validation logic here is just fine.
355
355
00:19:37,500 --> 00:19:41,513
Great, so next up, let's see what we have to do.
356
356
00:19:42,470 --> 00:19:47,150
So actually, we still have to finish these ones.
357
357
00:19:47,150 --> 00:19:48,830
So if the workout is running,
358
358
00:19:48,830 --> 00:19:50,800
then create a running object
359
359
00:19:50,800 --> 00:19:55,140
and otherwise, create a cycling object, now right?
360
360
00:19:55,140 --> 00:20:00,140
And then afterwards, push that object to the workout array.
361
361
00:20:00,320 --> 00:20:01,920
So add it to the array
362
362
00:20:01,920 --> 00:20:05,043
and for that, we're gonna use the push method as always.
363
363
00:20:06,730 --> 00:20:08,650
So let's start with this one here,
364
364
00:20:08,650 --> 00:20:12,660
right after this guard clause, all right?
365
365
00:20:12,660 --> 00:20:17,660
And so here, let's say, work out, should be a new running.
366
366
00:20:19,820 --> 00:20:23,590
And now let's see what we need for running.
367
367
00:20:23,590 --> 00:20:26,410
Or actually, we can probably just hover this
368
368
00:20:26,410 --> 00:20:28,680
and indeed, here we have two coordinates,
369
369
00:20:28,680 --> 00:20:32,900
distance, duration and cadence, all right.
370
370
00:20:32,900 --> 00:20:35,603
So where do we get the coordinates from?
371
371
00:20:36,900 --> 00:20:40,290
Well, we already know from the marker
372
372
00:20:40,290 --> 00:20:42,350
that they are right here.
373
373
00:20:42,350 --> 00:20:44,250
So in this.MapEvent.latitudelongitude.
374
374
00:20:46,530 --> 00:20:49,630
So we notice because we already used this data before
375
375
00:20:49,630 --> 00:20:52,460
to render a marker on the map.
376
376
00:20:52,460 --> 00:20:55,540
So let's get this one and paste it here
377
377
00:20:55,540 --> 00:20:56,883
as the first argument.
378
378
00:20:58,150 --> 00:21:02,193
But actually, this here is now gonna be an object.
379
379
00:21:03,570 --> 00:21:07,410
So we know that because here we use destructuring,
380
380
00:21:07,410 --> 00:21:11,850
to get the latitude and longitude out of that object.
381
381
00:21:11,850 --> 00:21:14,680
But up here, we said,
382
382
00:21:14,680 --> 00:21:16,280
so in the class definition,
383
383
00:21:16,280 --> 00:21:18,943
that indeed we want an array, right?
384
384
00:21:20,260 --> 00:21:25,260
So let's simply get this code from here, to up there.
385
385
00:21:27,250 --> 00:21:30,680
So here, and so basically create
386
386
00:21:30,680 --> 00:21:33,290
the latitude and longitude variables here
387
387
00:21:33,290 --> 00:21:35,620
based on this object.
388
388
00:21:35,620 --> 00:21:40,560
And so then here, we can define an array with.data.
389
389
00:21:40,560 --> 00:21:42,813
So lat and launch.
390
390
00:21:44,220 --> 00:21:47,540
So we already have our array of the coordinates
391
391
00:21:47,540 --> 00:21:49,320
just as expected.
392
392
00:21:49,320 --> 00:21:54,083
And then all we need is distance, duration and cadence.
393
393
00:21:57,120 --> 00:22:01,600
And then we can take this.activities,
394
394
00:22:01,600 --> 00:22:04,253
and I think we didn't even create that one yet.
395
395
00:22:05,460 --> 00:22:08,357
So that's up here.
396
396
00:22:08,357 --> 00:22:11,913
And now again, we could do it right here like this.
397
397
00:22:12,770 --> 00:22:15,430
So basically, the more classical way.
398
398
00:22:15,430 --> 00:22:20,430
So this.workouts would be an empty array.
399
399
00:22:22,610 --> 00:22:24,200
But again, in this project,
400
400
00:22:24,200 --> 00:22:28,213
I chose to already use the class fields specification.
401
401
00:22:29,120 --> 00:22:30,670
And so this will become part
402
402
00:22:30,670 --> 00:22:33,720
of standard JavaScript very soon.
403
403
00:22:33,720 --> 00:22:37,380
And so therefore, I can create a class field like this
404
404
00:22:37,380 --> 00:22:41,440
and I can even make it private, just like the other two.
405
405
00:22:41,440 --> 00:22:44,660
But this time, I actually already initialized it here
406
406
00:22:44,660 --> 00:22:47,500
to a new empty array.
407
407
00:22:47,500 --> 00:22:48,993
And so now we can take that.
408
408
00:22:50,170 --> 00:22:54,423
So here in new workout, we can say this.workouts.push
409
409
00:22:58,880 --> 00:23:00,453
this new workout.
410
410
00:23:02,320 --> 00:23:04,050
Now, we are gonna do
411
411
00:23:04,050 --> 00:23:07,053
basically the exact same thing down here.
412
412
00:23:07,900 --> 00:23:11,283
And so this here is something that always needs to happen.
413
413
00:23:12,230 --> 00:23:15,470
So in both cases, and so let's not repeat that,
414
414
00:23:15,470 --> 00:23:18,090
and instead, put it down here.
415
415
00:23:18,090 --> 00:23:21,350
But then we have the problem that this workout variable
416
416
00:23:21,350 --> 00:23:25,540
is defined here in this block scope, right?
417
417
00:23:25,540 --> 00:23:28,830
And so because of the scope chain, as we already know,
418
418
00:23:28,830 --> 00:23:32,880
this workout variable will then not be available outside
419
419
00:23:32,880 --> 00:23:35,920
of this block, right?
420
420
00:23:35,920 --> 00:23:38,470
But we want it outside of the block.
421
421
00:23:38,470 --> 00:23:40,870
So right here, and so therefore,
422
422
00:23:40,870 --> 00:23:43,203
we put it right here outside.
423
423
00:23:45,650 --> 00:23:47,053
So let's work out.
424
424
00:23:49,050 --> 00:23:51,923
And then here, we simply redefine that.
425
425
00:23:53,160 --> 00:23:54,770
And then let's simply take this
426
426
00:23:58,030 --> 00:23:59,930
and put it here again.
427
427
00:23:59,930 --> 00:24:03,223
But this time, of course, with a cycling,
428
428
00:24:04,140 --> 00:24:07,230
and then still the coordinates, distance, duration,
429
429
00:24:07,230 --> 00:24:10,763
but here the elevation, all right?
430
430
00:24:12,320 --> 00:24:15,490
The next step here is to actually render the workout
431
431
00:24:15,490 --> 00:24:18,870
on the map, all right?
432
432
00:24:18,870 --> 00:24:22,030
But before we do that, let's actually take a quick look
433
433
00:24:22,893 --> 00:24:27,570
at the console, and see our work out there.
434
434
00:24:27,570 --> 00:24:30,290
And so with that, we can already check
435
435
00:24:30,290 --> 00:24:33,060
if all of this that we have up here
436
436
00:24:33,060 --> 00:24:36,003
is already working, right?
437
437
00:24:38,020 --> 00:24:40,770
Okay, so let's wait for the map.
438
438
00:24:40,770 --> 00:24:44,910
And now let's click here and add a running.
439
439
00:24:44,910 --> 00:24:49,910
So five, and 25 with 170.
440
440
00:24:50,370 --> 00:24:54,023
And indeed, here we get our running object.
441
441
00:24:55,210 --> 00:24:57,020
So it has the coordinates
442
442
00:24:57,020 --> 00:24:59,800
and so this worked and of course,
443
443
00:24:59,800 --> 00:25:02,832
it has has all the other data as well.
444
444
00:25:02,832 --> 00:25:06,010
This ID is now corrected, as you see.
445
445
00:25:06,010 --> 00:25:08,590
And also the pace is calculated here,
446
446
00:25:08,590 --> 00:25:13,350
based on this input data, right?
447
447
00:25:13,350 --> 00:25:16,380
And so Indeed, the most complicated part
448
448
00:25:16,380 --> 00:25:20,290
of adding a new workout is already completed.
449
449
00:25:20,290 --> 00:25:21,980
So that's beautiful.
450
450
00:25:21,980 --> 00:25:24,093
Let's just try the same with cycling.
451
451
00:25:25,200 --> 00:25:27,263
Let's say 10 kilometers,
452
452
00:25:28,400 --> 00:25:31,023
in 10 minutes with 30 meters.
453
453
00:25:32,570 --> 00:25:35,020
Now, and I didn't even click anywhere on the map.
454
454
00:25:36,620 --> 00:25:39,173
Okay, and so that clearly means
455
455
00:25:39,173 --> 00:25:43,570
that we are still missing a step, which is to hide the form.
456
456
00:25:43,570 --> 00:25:47,640
But anyway, it simply took the coordinates from earlier
457
457
00:25:47,640 --> 00:25:51,393
and then it added all the correct data here as well.
458
458
00:25:52,970 --> 00:25:55,180
So indeed, it is now a cycling object,
459
459
00:25:55,180 --> 00:25:58,220
while before it was a running object.
460
460
00:25:58,220 --> 00:25:59,650
Let's just do that again here,
461
461
00:25:59,650 --> 00:26:01,133
but this time with clicking,
462
462
00:26:02,030 --> 00:26:03,680
so that I can show you something.
463
463
00:26:05,730 --> 00:26:08,510
All right so it still says workout
464
464
00:26:08,510 --> 00:26:10,700
and we're gonna fix that in the next video.
465
465
00:26:10,700 --> 00:26:13,170
But for now, what I want is the cycling,
466
466
00:26:13,170 --> 00:26:15,563
actually to have this orange border.
467
467
00:26:16,440 --> 00:26:19,183
So just like this one.
468
468
00:26:20,450 --> 00:26:24,343
All right, so orange is for cycling and green for running.
469
469
00:26:25,430 --> 00:26:27,923
And so let's quickly do that.
470
470
00:26:29,370 --> 00:26:33,000
So in our CSS, I think I showed you earlier
471
471
00:26:33,000 --> 00:26:36,410
that we have running pop up and cycling pop up.
472
472
00:26:36,410 --> 00:26:40,923
And these two values here are essentially simply the value
473
473
00:26:40,923 --> 00:26:42,803
of the input type.
474
474
00:26:43,660 --> 00:26:46,040
So this one here.
475
475
00:26:46,040 --> 00:26:50,800
And so here, we can simply do a template literal
476
476
00:26:53,080 --> 00:26:56,163
and then plug in the type here.
477
477
00:26:57,850 --> 00:27:00,430
And now actually, let's also export this here
478
478
00:27:00,430 --> 00:27:05,170
to its own method to make this add workout method here,
479
479
00:27:05,170 --> 00:27:07,810
a little bit cleaner, all right.
480
480
00:27:07,810 --> 00:27:11,163
So let's add down here, renderWorkoutMarker.
481
481
00:27:18,120 --> 00:27:20,463
Let's grab this code here.
482
482
00:27:24,477 --> 00:27:26,283
And so now all we need to do
483
483
00:27:26,283 --> 00:27:31,283
is to call this.renderWorkoutMarker.
484
484
00:27:31,990 --> 00:27:34,780
And here, we need to pass in the workout object
485
485
00:27:35,700 --> 00:27:39,110
because otherwise, it's not gonna work.
486
486
00:27:39,110 --> 00:27:42,350
I mean, right now, we don't even need to workout yet
487
487
00:27:42,350 --> 00:27:43,593
but later, we will.
488
488
00:27:45,000 --> 00:27:48,490
So we want to display some kind of data about the workout
489
489
00:27:48,490 --> 00:27:50,483
And so let's pass it in.
490
490
00:27:51,660 --> 00:27:53,080
So work out there.
491
491
00:27:53,080 --> 00:27:56,293
And here, let's actually call it work out as well.
492
492
00:27:58,250 --> 00:28:00,970
And so here, instead of displaying this,
493
493
00:28:00,970 --> 00:28:05,223
let's simply display workout.distance.
494
494
00:28:06,299 --> 00:28:08,230
Okay, just for now,
495
495
00:28:08,230 --> 00:28:10,440
just so we are actually using the workout
496
496
00:28:10,440 --> 00:28:12,063
here in this method, okay?
497
497
00:28:13,960 --> 00:28:15,330
You see that we are also using
498
498
00:28:15,330 --> 00:28:17,780
the this keyword in this method
499
499
00:28:17,780 --> 00:28:20,580
but actually, that's no problem in this case
500
500
00:28:20,580 --> 00:28:23,210
because here, we are actually calling this one here
501
501
00:28:23,210 --> 00:28:25,963
as a method of the this keyword.
502
502
00:28:27,020 --> 00:28:30,720
And besides that, we are also calling it ourselves.
503
503
00:28:30,720 --> 00:28:32,480
So it's not a callback function
504
504
00:28:32,480 --> 00:28:34,950
of any other function in JavaScript.
505
505
00:28:34,950 --> 00:28:38,260
And so therefore, the this keyword in this method here
506
506
00:28:38,260 --> 00:28:40,980
will still be the current object.
507
507
00:28:40,980 --> 00:28:43,963
And so no need to using bind in this case.
508
508
00:28:44,810 --> 00:28:47,790
And so finally, the last step is to actually render
509
509
00:28:47,790 --> 00:28:49,820
the workout on the list.
510
510
00:28:49,820 --> 00:28:52,860
And this one, I'm gonna leave for the next lecture,
511
511
00:28:52,860 --> 00:28:55,740
because this one is gonna take a little bit of time
512
512
00:28:55,740 --> 00:28:59,060
in order to format all the HTML correctly.
513
513
00:28:59,060 --> 00:29:00,850
So let's give this one a save.
514
514
00:29:00,850 --> 00:29:04,853
And so besides that, this one is basically complete.
515
515
00:29:05,730 --> 00:29:09,470
And so let's quickly check it out one more time,
516
516
00:29:09,470 --> 00:29:12,403
just to see the cycling pop up.
517
517
00:29:13,560 --> 00:29:15,063
So let's see right there,
518
518
00:29:15,063 --> 00:29:20,063
cycling 10, 10, 10 values don't matter.
519
519
00:29:21,160 --> 00:29:24,710
Oh, and here, we do actually have an error,
520
520
00:29:24,710 --> 00:29:28,120
which says that latitude is not defined.
521
521
00:29:28,120 --> 00:29:31,873
And so indeed, here it is not defined.
522
522
00:29:32,740 --> 00:29:35,330
So instead, this coordinate should of course,
523
523
00:29:35,330 --> 00:29:37,740
come from the workout itself.
524
524
00:29:37,740 --> 00:29:41,680
And so that itself is already a reason enough
525
525
00:29:41,680 --> 00:29:46,013
to pass in the workout argument here into this function.
526
526
00:29:47,580 --> 00:29:50,400
So now it becomes very important for the first time
527
527
00:29:50,400 --> 00:29:53,810
to have some data in the actual workout object.
528
528
00:29:53,810 --> 00:29:55,720
Because here we do need that
529
529
00:29:55,720 --> 00:29:57,750
in order to tell JavaScript
530
530
00:29:57,750 --> 00:30:00,149
or actually in order to tell leaflet
531
531
00:30:00,149 --> 00:30:04,520
where to display this marker, okay?
532
532
00:30:04,520 --> 00:30:08,300
So it's the data that's coming directly from the workout.
533
533
00:30:08,300 --> 00:30:11,440
And so now this should work.
534
534
00:30:11,440 --> 00:30:13,163
Or maybe it shouldn't.
535
535
00:30:14,700 --> 00:30:16,599
So I'm looking at this variable here.
536
536
00:30:16,599 --> 00:30:18,750
And right now the type is, of course,
537
537
00:30:18,750 --> 00:30:22,690
also no longer defined, right?
538
538
00:30:22,690 --> 00:30:25,280
So we get to type here from this one.
539
539
00:30:25,280 --> 00:30:27,170
But of course, this type variable
540
540
00:30:27,170 --> 00:30:29,853
is not gonna be available right here.
541
541
00:30:30,790 --> 00:30:33,210
So how do we fix that?
542
542
00:30:33,210 --> 00:30:36,090
Well, ideally, we should get the information,
543
543
00:30:36,090 --> 00:30:39,020
whether the current workout is of running,
544
544
00:30:39,020 --> 00:30:42,383
or of cycling, right from the workout object.
545
545
00:30:43,520 --> 00:30:46,050
And actually, that's a pretty good idea.
546
546
00:30:46,050 --> 00:30:48,810
And so let's add that value
547
547
00:30:48,810 --> 00:30:51,660
to the cycling and to the running.
548
548
00:30:51,660 --> 00:30:56,300
However, it doesn't make much sense to always pass that in.
549
549
00:30:56,300 --> 00:30:57,982
So we already know that running
550
550
00:30:57,982 --> 00:31:00,020
is always gonna be running
551
551
00:31:00,020 --> 00:31:03,400
and cycling is always gonna be cycling.
552
552
00:31:03,400 --> 00:31:08,313
And so we can simply add, basically, that type right here.
553
553
00:31:09,670 --> 00:31:10,793
And so let's do that.
554
554
00:31:12,020 --> 00:31:14,453
So again, we are defining a field here.
555
555
00:31:16,170 --> 00:31:20,030
So cycling, and so this value type
556
556
00:31:20,030 --> 00:31:22,760
will now be a property that's gonna be available
557
557
00:31:22,760 --> 00:31:24,283
on all the instances.
558
558
00:31:25,720 --> 00:31:28,640
Okay, so again, this would be the same thing
559
559
00:31:28,640 --> 00:31:33,640
as doing this.type equals cycling like this, okay?
560
560
00:31:37,344 --> 00:31:41,183
And now the same for running like this, all right?
561
561
00:31:46,613 --> 00:31:49,030
And then, so now we can use that here
562
562
00:31:49,030 --> 00:31:52,483
and we will actually also need that in some other places.
563
563
00:31:53,780 --> 00:31:56,563
And so this is indeed a good thing to have.
564
564
00:31:57,990 --> 00:32:01,250
So workout.type, and so now
565
565
00:32:01,250 --> 00:32:03,833
this will whether it be running or cycling.
566
566
00:32:05,290 --> 00:32:07,663
So let's test that now with cycling.
567
567
00:32:09,830 --> 00:32:11,830
So cycling, and then
568
568
00:32:14,030 --> 00:32:15,893
and we get another error.
569
569
00:32:17,030 --> 00:32:22,030
Okay, so it failed to execute appendChild on node,
570
570
00:32:23,640 --> 00:32:24,860
for some reason.
571
571
00:32:24,860 --> 00:32:26,730
But let's go back to that in a second.
572
572
00:32:26,730 --> 00:32:31,170
For now, I just want to see if actually, the type is there
573
573
00:32:31,170 --> 00:32:33,400
and indeed it is.
574
574
00:32:33,400 --> 00:32:36,250
So that's great already.
575
575
00:32:36,250 --> 00:32:38,032
Now let's just go back and see
576
576
00:32:38,032 --> 00:32:40,483
why this error here is happening.
577
577
00:32:42,920 --> 00:32:47,563
Well, there is no appendChild method anywhere here.
578
578
00:32:48,920 --> 00:32:52,053
Let's just set this here to something else.
579
579
00:32:53,660 --> 00:32:56,363
But that's probably not the problem anyway.
580
580
00:32:58,030 --> 00:32:59,970
So probably I shouldn't have changed anything
581
581
00:32:59,970 --> 00:33:03,040
because now the error message here will be gone
582
582
00:33:03,040 --> 00:33:04,693
and then I cannot read these,
583
583
00:33:08,688 --> 00:33:10,020
the stack trace there,
584
584
00:33:10,020 --> 00:33:14,473
which is what we call to that list of errors.
585
585
00:33:15,370 --> 00:33:19,500
Oh, but now it actually worked, all right.
586
586
00:33:19,500 --> 00:33:21,203
So the problem there was
587
587
00:33:21,203 --> 00:33:24,793
that we were actually probably passing in some value
588
588
00:33:24,793 --> 00:33:26,580
that was not a string
589
589
00:33:26,580 --> 00:33:28,940
and so therefore, for some reason,
590
590
00:33:28,940 --> 00:33:32,180
leaflet created some problem there.
591
591
00:33:32,180 --> 00:33:34,850
But anyway, we will take care of this string here
592
592
00:33:34,850 --> 00:33:35,943
in the next video.
593
593
00:33:36,870 --> 00:33:41,133
For now, I just want to create just a running one here.
594
594
00:33:42,300 --> 00:33:46,110
And so this time, it turns out to be green.
595
595
00:33:46,110 --> 00:33:49,053
And so indeed, here the type is now running.
596
596
00:33:50,810 --> 00:33:54,787
All right, so this was a very long video.
597
597
00:33:54,787 --> 00:33:57,240
And so let's finish it here.
598
598
00:33:57,240 --> 00:33:59,800
And as I already said in the next one,
599
599
00:33:59,800 --> 00:34:02,320
we will then finally render the workout
600
600
00:34:02,320 --> 00:34:04,223
also here on this sidebar.
52140
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.