Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated: 1 1 00:00:01,510 --> 00:00:03,190 Welcome back 2 2 00:00:03,190 --> 00:00:05,880 and let's now implement the architecture 3 3 00:00:05,880 --> 00:00:08,563 that we just discussed in the previous lecture. 4 4 00:00:10,280 --> 00:00:14,090 And so, let's start by implementing that App class 5 5 00:00:14,090 --> 00:00:16,560 that I just showed you previously. 6 6 00:00:16,560 --> 00:00:19,650 And actually, I also have this architecture diagram 7 7 00:00:19,650 --> 00:00:23,223 right here, and it is this one called part one. 8 8 00:00:24,450 --> 00:00:26,540 And so as you see, this is exactly 9 9 00:00:26,540 --> 00:00:29,030 what we just discussed before. 10 10 00:00:29,030 --> 00:00:32,420 And so I will now go ahead and start to implement 11 11 00:00:32,420 --> 00:00:35,053 this class here and all of these methods. 12 12 00:00:36,400 --> 00:00:37,233 All right. 13 13 00:00:39,410 --> 00:00:41,893 So class App, 14 14 00:00:43,960 --> 00:00:46,380 and then we need the constructor, 15 15 00:00:46,380 --> 00:00:48,623 which for now I'm gonna leave empty here. 16 16 00:00:50,770 --> 00:00:52,663 Then we need getPosition, 17 17 00:00:57,950 --> 00:00:59,620 Next we need loadMap, 18 18 00:01:02,390 --> 00:01:04,923 let's take a look at what's next here. 19 19 00:01:06,060 --> 00:01:08,980 Then we have showForm toggleElevationField, 20 20 00:01:08,980 --> 00:01:10,230 and newWorkout. 21 21 00:01:14,560 --> 00:01:16,493 So, showForm, 22 22 00:01:20,646 --> 00:01:23,913 toggleElevationField, 23 23 00:01:27,660 --> 00:01:29,980 and finally newWorkout, okay. 24 24 00:01:34,310 --> 00:01:36,580 And so now, we have this structure 25 25 00:01:36,580 --> 00:01:39,453 where we can put our code that we already have. 26 26 00:01:40,430 --> 00:01:42,750 So let's start with this one here. 27 27 00:01:42,750 --> 00:01:47,010 So getting the user's current position using geolocation 28 28 00:01:49,120 --> 00:01:51,993 and so I'm gonna start by taking all of this code here. 29 29 00:01:53,810 --> 00:01:56,993 So, it ends here I believe. 30 30 00:01:58,870 --> 00:02:01,520 Yap, that's the one, cut it 31 31 00:02:01,520 --> 00:02:04,113 and put it here into getPosition. 32 32 00:02:06,800 --> 00:02:10,640 But now I actually want to refactor this a little bit better 33 33 00:02:10,640 --> 00:02:13,160 because I think it's still a bit messy 34 34 00:02:13,160 --> 00:02:15,470 to have this callback function here 35 35 00:02:15,470 --> 00:02:20,243 off to get current position function right here, okay. 36 36 00:02:21,830 --> 00:02:25,290 And so this function here, so this callback 37 37 00:02:25,290 --> 00:02:29,430 of getCurrentPosition is gonna become the loadMap. 38 38 00:02:30,380 --> 00:02:34,860 Okay, because that is exactly what we do here in function. 39 39 00:02:34,860 --> 00:02:36,140 So let's cut this here 40 40 00:02:37,200 --> 00:02:39,483 and put it here in loadMap 41 41 00:02:41,800 --> 00:02:44,350 and actually of course we don't need this function keyword 42 42 00:02:44,350 --> 00:02:48,993 here because we already called it a loadMap, right? 43 43 00:02:49,980 --> 00:02:52,770 So let's just copy the parameter name here 44 44 00:02:53,990 --> 00:02:57,763 and put it here and then get rid of these. 45 45 00:02:59,830 --> 00:03:01,010 Okay. 46 46 00:03:01,010 --> 00:03:04,150 And so now here as the first callback function, 47 47 00:03:04,150 --> 00:03:08,100 which is the one for success, so actually here, 48 48 00:03:08,100 --> 00:03:09,690 we need to call loadMap. 49 49 00:03:10,580 --> 00:03:12,853 And so since we're now in a class, 50 50 00:03:13,870 --> 00:03:16,180 we need to say this.loadMap. 51 51 00:03:20,100 --> 00:03:22,360 And so in JavaScript, we'll then call 52 52 00:03:22,360 --> 00:03:24,550 this callback function here and pass 53 53 00:03:24,550 --> 00:03:28,730 in the position argument, as soon as the current position 54 54 00:03:28,730 --> 00:03:32,510 of the user is determined, all right? 55 55 00:03:32,510 --> 00:03:34,800 And so that event that I just mentioned 56 56 00:03:34,800 --> 00:03:37,700 is basically this receive position. 57 57 00:03:37,700 --> 00:03:41,110 And as I said, it is not an event in the common sense 58 58 00:03:41,110 --> 00:03:42,550 that we used before. 59 59 00:03:42,550 --> 00:03:46,170 So one that we hand using addEventListener, 60 60 00:03:46,170 --> 00:03:48,853 but we can still think of this as an event. 61 61 00:03:49,750 --> 00:03:53,320 All right, and so basically on that event, 62 62 00:03:53,320 --> 00:03:56,473 the, this.loadMap method is called. 63 63 00:03:58,650 --> 00:04:01,120 Now, here we have some other code, 64 64 00:04:01,120 --> 00:04:03,830 So to event list notice, but for now, 65 65 00:04:03,830 --> 00:04:07,270 let's actually make this code here work 66 66 00:04:07,270 --> 00:04:11,010 because right now of course, none of this will do anything 67 67 00:04:11,010 --> 00:04:13,490 to our application, will it? 68 68 00:04:13,490 --> 00:04:15,510 And why is that? 69 69 00:04:15,510 --> 00:04:18,010 Well, it is because first of all, 70 70 00:04:18,010 --> 00:04:23,010 we need to create an actual object out of this class, okay? 71 71 00:04:23,290 --> 00:04:26,000 So right now this is all just a plan. 72 72 00:04:26,000 --> 00:04:28,130 So like the blueprint of a house, 73 73 00:04:28,130 --> 00:04:30,950 but it is not the actual house yet 74 74 00:04:30,950 --> 00:04:34,980 and so that analogy is sometimes very helpful. 75 75 00:04:34,980 --> 00:04:38,200 So in this case, this is just a theoretical plan 76 76 00:04:38,200 --> 00:04:42,410 or for application, but it's not a real object yet. 77 77 00:04:42,410 --> 00:04:44,453 And so let's create that down here. 78 78 00:04:46,140 --> 00:04:49,920 And so I will again call this app, but lowercase. 79 79 00:04:49,920 --> 00:04:54,770 And so this app will be new App like this 80 80 00:04:55,880 --> 00:04:59,820 and this application actually does need any arguments. 81 81 00:04:59,820 --> 00:05:01,520 And so here in the constructor 82 82 00:05:01,520 --> 00:05:06,130 we don't have any parameters in this method, okay. 83 83 00:05:06,130 --> 00:05:08,930 Because right now we don't need any inputs 84 84 00:05:08,930 --> 00:05:10,580 into our application. 85 85 00:05:10,580 --> 00:05:13,980 If we need it then, could add that here to the constructor, 86 86 00:05:13,980 --> 00:05:17,170 but in this case, that's just not necessary. 87 87 00:05:17,170 --> 00:05:19,700 One example that we could use for inputs 88 88 00:05:19,700 --> 00:05:22,710 in an application like this would be for example, 89 89 00:05:22,710 --> 00:05:24,830 an object of options, 90 90 00:05:24,830 --> 00:05:28,220 which is pretty common in third party libraries. 91 91 00:05:28,220 --> 00:05:31,280 So if we were building a library for some other people 92 92 00:05:31,280 --> 00:05:34,810 to use, then we could allow these developers to customize 93 93 00:05:34,810 --> 00:05:37,440 the library, using some options. 94 94 00:05:37,440 --> 00:05:42,440 But again does just not necessary in this case, all right? 95 95 00:05:43,300 --> 00:05:47,600 Now in order to actually trigger the geolocation API, 96 96 00:05:47,600 --> 00:05:50,860 this method here needs to be called, right? 97 97 00:05:50,860 --> 00:05:53,403 But right now dad is not happening. 98 98 00:05:54,340 --> 00:05:56,750 So how can we do that? 99 99 00:05:56,750 --> 00:05:59,620 We could do this, right? 100 100 00:05:59,620 --> 00:06:04,620 So app.getPosition and so then this code here 101 101 00:06:05,550 --> 00:06:07,870 would get executed, right at a point 102 102 00:06:07,870 --> 00:06:09,820 where the application loads 103 103 00:06:09,820 --> 00:06:13,007 and that's because as we already know all the code, 104 104 00:06:13,007 --> 00:06:15,690 that's here in the top level scope. 105 105 00:06:15,690 --> 00:06:18,210 So out here outside of any function 106 106 00:06:18,210 --> 00:06:21,860 will get executed immediately as the script loads, 107 107 00:06:21,860 --> 00:06:22,940 all right? 108 108 00:06:22,940 --> 00:06:24,190 And so, right in the beginning, 109 109 00:06:24,190 --> 00:06:27,670 this new app variable here is created out of the class. 110 110 00:06:27,670 --> 00:06:30,930 And then right now, immediately afterwards, 111 111 00:06:30,930 --> 00:06:34,020 we would get to the position of the user. 112 112 00:06:34,020 --> 00:06:37,180 However, why should we do this out here, 113 113 00:06:37,180 --> 00:06:40,520 if we could simply do it inside of the class? 114 114 00:06:40,520 --> 00:06:42,523 That would actually be a lot cleaner. 115 115 00:06:43,460 --> 00:06:46,600 So inside of the class, we also have a method 116 116 00:06:46,600 --> 00:06:50,200 that automatically gets called as the page loads. 117 117 00:06:50,200 --> 00:06:52,743 So let's think how we could do this instead. 118 118 00:06:53,640 --> 00:06:55,920 So inside of the App class, 119 119 00:06:55,920 --> 00:06:58,730 we also have a method that gets executed 120 120 00:06:58,730 --> 00:07:03,200 as soon as this app here is created, right? 121 121 00:07:03,200 --> 00:07:08,060 And that is the constructor method, remember? 122 122 00:07:08,060 --> 00:07:11,210 So this constructor method is called immediately 123 123 00:07:11,210 --> 00:07:15,360 when a new object is created from this class 124 124 00:07:15,360 --> 00:07:17,670 and this object that is created, 125 125 00:07:17,670 --> 00:07:20,690 so this app object is created right in the beginning 126 126 00:07:20,690 --> 00:07:22,380 when the page loads down. 127 127 00:07:22,380 --> 00:07:25,770 So that means that the constructor is also executed 128 128 00:07:25,770 --> 00:07:27,890 immediately as the page loads. 129 129 00:07:27,890 --> 00:07:32,090 And so what we can do is to simply getPosition 130 130 00:07:32,090 --> 00:07:33,263 in the constructor. 131 131 00:07:36,631 --> 00:07:38,980 And so here, all we have to do is to change it 132 132 00:07:38,980 --> 00:07:42,720 to the this word, so to the current object 133 133 00:07:42,720 --> 00:07:44,900 and that's actually it. 134 134 00:07:44,900 --> 00:07:47,420 So our code should actually already be working 135 135 00:07:47,420 --> 00:07:49,060 at this point. 136 136 00:07:49,060 --> 00:07:51,560 So the current position should be determined 137 137 00:07:51,560 --> 00:07:55,280 here in this method and then the loadMap method 138 138 00:07:55,280 --> 00:07:59,730 should be called with that current position, right? 139 139 00:07:59,730 --> 00:08:02,270 And actually that's exactly what we also have here 140 140 00:08:02,270 --> 00:08:03,413 in our diagram. 141 141 00:08:04,250 --> 00:08:06,800 So you'll see the load page events will trigger 142 142 00:08:06,800 --> 00:08:10,420 the constructor, which will then trigger getPosition. 143 143 00:08:10,420 --> 00:08:12,860 And then as soon as we receive the position, 144 144 00:08:12,860 --> 00:08:17,450 the loadMap method is called with the position, okay? 145 145 00:08:17,450 --> 00:08:19,493 And so let's see if that actually works. 146 146 00:08:20,550 --> 00:08:22,563 So here in our version, 147 147 00:08:23,420 --> 00:08:25,543 and let's just reload it to manually here, 148 148 00:08:27,210 --> 00:08:31,820 and here we go, so here is our map again. 149 149 00:08:31,820 --> 00:08:35,723 So our first part of the refactoring is already working. 150 150 00:08:36,840 --> 00:08:38,290 So that's great, 151 151 00:08:38,290 --> 00:08:40,760 but now let's go back to our code here 152 152 00:08:40,760 --> 00:08:43,733 because we still have some things to fix here. 153 153 00:08:45,600 --> 00:08:50,600 So remember that right here in the loadMap function, 154 154 00:08:50,660 --> 00:08:54,050 we have this global variable here called map. 155 155 00:08:54,050 --> 00:08:55,740 I mean, we don't have here, 156 156 00:08:55,740 --> 00:08:59,720 we are simply redefining it because it is defined up here 157 157 00:08:59,720 --> 00:09:01,210 in the global scope. 158 158 00:09:01,210 --> 00:09:04,300 But now, remember that we actually want everything 159 159 00:09:04,300 --> 00:09:07,070 that is related to our application. 160 160 00:09:07,070 --> 00:09:10,463 And that includes the map right in this App class. 161 161 00:09:11,305 --> 00:09:13,730 And so therefore we're now gonna define the map 162 162 00:09:13,730 --> 00:09:17,920 and map event as properties of the object. 163 163 00:09:17,920 --> 00:09:22,370 And for that, let's actually use a private class field. 164 164 00:09:22,370 --> 00:09:26,470 So remember that works like this and so map, 165 165 00:09:26,470 --> 00:09:29,020 and now we will not set it to anything. 166 166 00:09:29,020 --> 00:09:32,773 So just like this, and then the same for the mapEvent. 167 167 00:09:35,900 --> 00:09:40,350 So both of them will now become private instance properties. 168 168 00:09:40,350 --> 00:09:42,600 So properties that are gonna be present 169 169 00:09:42,600 --> 00:09:46,073 on all the instances created through this class. 170 170 00:09:47,820 --> 00:09:50,950 Now let's keep them here for now, in order to not break 171 171 00:09:50,950 --> 00:09:52,970 the rest of the application, 172 172 00:09:52,970 --> 00:09:57,760 but now we need to fix of course, the rest of this code. 173 173 00:09:57,760 --> 00:09:59,970 So at least this load map method, 174 174 00:09:59,970 --> 00:10:03,210 because that one relies on map and so therefore 175 175 00:10:03,210 --> 00:10:05,780 we need to start using it now. 176 176 00:10:05,780 --> 00:10:09,973 So here we now need to actually use this.map, 177 177 00:10:11,520 --> 00:10:15,610 because again, this is now like a property that is defined 178 178 00:10:15,610 --> 00:10:17,340 on the object itself, 179 179 00:10:17,340 --> 00:10:20,870 it's no longer just a normal variable, right? 180 180 00:10:20,870 --> 00:10:25,070 And then here the same, this.map 181 181 00:10:25,070 --> 00:10:29,920 and here also this.map 182 182 00:10:29,920 --> 00:10:33,350 and then here we need to define the mapEvent. 183 183 00:10:33,350 --> 00:10:37,903 And so this one, we also called this.#mapEvent. 184 184 00:10:39,800 --> 00:10:41,493 Now here, this is just wrong, 185 185 00:10:42,350 --> 00:10:47,350 so let's fix that and all right, that's actually it, 186 186 00:10:48,010 --> 00:10:51,100 but actually this will not yet work, 187 187 00:10:51,100 --> 00:10:54,363 but let me show you the error before I actually fix it. 188 188 00:10:55,620 --> 00:10:58,873 So let's go back here and reload this page again, 189 189 00:10:59,820 --> 00:11:02,070 and now it should not work. 190 190 00:11:02,070 --> 00:11:06,633 And so indeed we get, Cannot set property #map of undefined. 191 191 00:11:07,550 --> 00:11:12,490 So on line 38, so that's right here. 192 192 00:11:12,490 --> 00:11:16,050 And so if the error message says that we cannot set map 193 193 00:11:16,050 --> 00:11:17,490 on the this keyword. 194 194 00:11:17,490 --> 00:11:19,460 It means that something must be wrong 195 195 00:11:19,460 --> 00:11:22,023 with the this keyword, right? 196 196 00:11:22,960 --> 00:11:27,360 So let's use our friend console.log to take a look at it 197 197 00:11:28,370 --> 00:11:31,343 and indeed it is undefined here. 198 198 00:11:32,920 --> 00:11:34,783 So, why is that? 199 199 00:11:36,070 --> 00:11:39,800 Well, this loadMap method is actually called 200 200 00:11:39,800 --> 00:11:42,800 by function here, right? 201 201 00:11:42,800 --> 00:11:46,880 So that's right here and in fact this is actually treated 202 202 00:11:46,880 --> 00:11:51,210 as a regular function call, not as a method call. 203 203 00:11:51,210 --> 00:11:54,140 So again, since this is a callback function, 204 204 00:11:54,140 --> 00:11:56,390 we are not calling it ourselves. 205 205 00:11:56,390 --> 00:11:59,430 It is to getCurrentPosition function that we'll call 206 206 00:11:59,430 --> 00:12:01,890 this callback function once that it gets 207 207 00:12:01,890 --> 00:12:04,280 the current position of the user. 208 208 00:12:04,280 --> 00:12:08,370 And when it calls this method, so this function here, 209 209 00:12:08,370 --> 00:12:11,500 then it does so, as a regular function call. 210 210 00:12:11,500 --> 00:12:14,760 And as we learned before in a regular function call, 211 211 00:12:14,760 --> 00:12:18,020 the this keyword is set to undefined. 212 212 00:12:18,020 --> 00:12:21,973 And so that's why in here that this keyword is undefined. 213 213 00:12:23,010 --> 00:12:26,480 But fortunately for us, there is a good solution 214 214 00:12:26,480 --> 00:12:28,640 that we already know about. 215 215 00:12:28,640 --> 00:12:32,530 And that solution is to manually bind the this keyword 216 216 00:12:32,530 --> 00:12:34,450 to whatever we need. 217 217 00:12:34,450 --> 00:12:36,923 And in this case, that is simply this. 218 218 00:12:38,200 --> 00:12:41,793 So right here, this points to the current object. 219 219 00:12:42,770 --> 00:12:43,603 All right? 220 220 00:12:43,603 --> 00:12:45,340 And so that's exactly the this keyword 221 221 00:12:45,340 --> 00:12:48,700 that we also want inside of loadMap. 222 222 00:12:48,700 --> 00:12:53,700 And so here we explicitly say that, okay? 223 223 00:12:53,820 --> 00:12:57,890 And remember that binds will simply return a new function 224 224 00:12:57,890 --> 00:13:01,240 and so all of this here is still a function that JavaScript 225 225 00:13:01,240 --> 00:13:03,963 can then call whenever it needs to. 226 226 00:13:05,440 --> 00:13:09,936 So that should now work and so if we go back here, 227 227 00:13:09,936 --> 00:13:14,290 then our maps should still work as it should. 228 228 00:13:14,290 --> 00:13:17,633 And indeed, now we get the this keyword here. 229 229 00:13:18,830 --> 00:13:21,780 So we have the map and we have the mapEvent 230 230 00:13:21,780 --> 00:13:26,023 and we already see that or map is this big object here 231 231 00:13:26,023 --> 00:13:29,110 that is coming from the leaflet library. 232 232 00:13:29,110 --> 00:13:29,943 Now, all right. 233 233 00:13:30,860 --> 00:13:33,550 So that was the most important thing 234 234 00:13:33,550 --> 00:13:36,680 and the biggest thing we had to refactor, 235 235 00:13:36,680 --> 00:13:40,850 but now let's quickly also talk about these two event 236 236 00:13:40,850 --> 00:13:42,773 listeners that we have down here. 237 237 00:13:43,860 --> 00:13:48,550 So the one listening for the event of submitting the form 238 238 00:13:48,550 --> 00:13:52,213 and to one of toggling the input type field. 239 239 00:13:54,200 --> 00:13:58,383 So basically that's this event here and this one, okay? 240 240 00:14:00,640 --> 00:14:03,720 So where do you think these event listeners 241 241 00:14:03,720 --> 00:14:05,700 should be located? 242 242 00:14:05,700 --> 00:14:08,230 Do you think that they should be outside here? 243 243 00:14:08,230 --> 00:14:09,763 So outside of the class. 244 244 00:14:10,680 --> 00:14:14,320 Well, that doesn't make a lot of sense, does it? 245 245 00:14:14,320 --> 00:14:17,830 So instead, just like before we actually want 246 246 00:14:17,830 --> 00:14:20,880 these event listeners, of course, to be set 247 247 00:14:20,880 --> 00:14:24,520 right at the beginning, so when a script first loads, 248 248 00:14:24,520 --> 00:14:29,023 but again, of course, that should be inside of the class. 249 249 00:14:29,900 --> 00:14:33,430 And so what is the method that automatically gets called 250 250 00:14:33,430 --> 00:14:35,680 as soon as the script loads? 251 251 00:14:35,680 --> 00:14:37,350 At least in this case. 252 252 00:14:37,350 --> 00:14:40,690 Well, again, it is the constructor. 253 253 00:14:40,690 --> 00:14:43,450 And so, we are gonna attach or event listeners 254 254 00:14:43,450 --> 00:14:47,083 to the dumb elements right here in the constructor. 255 255 00:14:50,160 --> 00:14:54,130 So, of course now we want to, again refactor this code 256 256 00:14:54,130 --> 00:14:57,053 a little bit more and take this function here, 257 257 00:14:58,010 --> 00:15:02,650 out of here to basically create its own function 258 258 00:15:02,650 --> 00:15:03,633 with this code. 259 259 00:15:04,780 --> 00:15:07,953 So that's all of this I believe, yeah. 260 260 00:15:10,390 --> 00:15:12,653 And so where should that go? 261 261 00:15:13,630 --> 00:15:16,940 Well, it should go here into newWorkout, 262 262 00:15:19,900 --> 00:15:23,660 because submitting the form for the newWorkout 263 263 00:15:23,660 --> 00:15:26,216 will of course create a new workout 264 264 00:15:26,216 --> 00:15:29,107 and so that's what this method here is all about. 265 265 00:15:30,750 --> 00:15:33,500 But then here, we also need the event 266 266 00:15:34,930 --> 00:15:36,180 so we can preventDefault. 267 267 00:15:37,107 --> 00:15:41,270 And then here again, we have the map event and the map, 268 268 00:15:41,270 --> 00:15:43,033 so we need the this keyword, 269 269 00:15:45,590 --> 00:15:48,640 or actually here we are just logging it to the console. 270 270 00:15:48,640 --> 00:15:50,343 So there's no need for this one, 271 271 00:15:51,700 --> 00:15:56,700 but here we need this.map like this, all right? 272 272 00:15:58,520 --> 00:16:02,100 But now, well, let's actually analyze 273 273 00:16:02,100 --> 00:16:03,350 what's gonna happen here. 274 274 00:16:04,500 --> 00:16:09,370 So first of all, of course, here we need to replace this one 275 275 00:16:09,370 --> 00:16:13,010 and actually call the newWorkout method 276 276 00:16:13,860 --> 00:16:18,653 and actually not call it, but just passing it in, right? 277 277 00:16:19,710 --> 00:16:23,960 Now, keep in mind that this method here is basically 278 278 00:16:23,960 --> 00:16:26,170 an event handler function. 279 279 00:16:26,170 --> 00:16:28,600 So it's a function that's gonna be called 280 280 00:16:28,600 --> 00:16:31,110 by an event listener. 281 281 00:16:31,110 --> 00:16:34,300 Now, do you remember what the this keyword looks like 282 282 00:16:34,300 --> 00:16:37,420 inside of an event listener function 283 283 00:16:37,420 --> 00:16:39,243 or of an event handler function? 284 284 00:16:40,240 --> 00:16:44,993 Well, just to make it really clear, let's take a look at it. 285 285 00:16:47,330 --> 00:16:51,473 So let's log the this keyword, now right? 286 286 00:16:55,250 --> 00:16:58,240 So again, we need to wait for the map to load 287 287 00:16:58,240 --> 00:17:01,110 and now as I click somewhere, then you see, 288 288 00:17:01,110 --> 00:17:02,773 we get some error here. 289 289 00:17:03,800 --> 00:17:08,043 So that's on line 60 cannot write private member map event. 290 290 00:17:09,330 --> 00:17:13,830 Okay, so let's go to line 60 and see what happens there. 291 291 00:17:13,830 --> 00:17:17,450 And so that's right here in this event handler function 292 292 00:17:17,450 --> 00:17:21,940 of the event listener on clicking on the map. 293 293 00:17:21,940 --> 00:17:25,230 So remember this is basically the add event listener 294 294 00:17:25,230 --> 00:17:27,853 equivalent from the leaflet library. 295 295 00:17:28,870 --> 00:17:31,670 So we need to fix this next, but for now, 296 296 00:17:31,670 --> 00:17:33,973 let's go back to the newWorkout method 297 297 00:17:33,973 --> 00:17:37,600 that we were working on and so I was trying to take a look 298 298 00:17:37,600 --> 00:17:39,850 at the this keyword here, 299 299 00:17:39,850 --> 00:17:42,880 but apparently that's not possible for now, 300 300 00:17:42,880 --> 00:17:44,600 so let's just remove it here 301 301 00:17:44,600 --> 00:17:47,223 and I will just tell you the solution. 302 302 00:17:48,060 --> 00:17:49,490 So I was asking you, 303 303 00:17:49,490 --> 00:17:52,380 what do you think the this keyword will be like 304 304 00:17:52,380 --> 00:17:55,780 in this method now, because this is an event handler 305 305 00:17:55,780 --> 00:17:58,750 function and so an event handler function 306 306 00:17:58,750 --> 00:18:02,170 will always have the this keyword of the dumb element 307 307 00:18:02,170 --> 00:18:04,800 onto which it is attached. 308 308 00:18:04,800 --> 00:18:08,580 And so in this case, that's gonna be the form Element. 309 309 00:18:08,580 --> 00:18:11,457 So again, inside of this method here, 310 310 00:18:11,457 --> 00:18:15,030 the this keyword is gonna point to Form 311 311 00:18:15,030 --> 00:18:18,140 and no longer to the App object. 312 312 00:18:18,140 --> 00:18:21,973 And so once again, we need to fix that using bind, 313 313 00:18:26,427 --> 00:18:27,610 all right? 314 314 00:18:27,610 --> 00:18:31,110 And this is actually a real pain point of working 315 315 00:18:31,110 --> 00:18:35,570 with event handlers in classes like we are doing right now. 316 316 00:18:35,570 --> 00:18:38,130 So even when you're working in the real world 317 317 00:18:38,130 --> 00:18:41,070 and you have event listeners inside of a class, 318 318 00:18:41,070 --> 00:18:44,090 you will be binding the this keywords all the time 319 319 00:18:44,090 --> 00:18:46,830 because otherwise many parts of your code 320 320 00:18:46,830 --> 00:18:48,810 are not gonna work. 321 321 00:18:48,810 --> 00:18:51,130 So again, in this case, because right 322 322 00:18:51,130 --> 00:18:53,750 in this method call, here did this keyword 323 323 00:18:53,750 --> 00:18:55,770 will simply point to the Form, 324 324 00:18:55,770 --> 00:18:58,310 but that's just not where we want. 325 325 00:18:58,310 --> 00:19:01,200 In most of these methods, we want this keyword 326 326 00:19:01,200 --> 00:19:04,550 to still point to the object itself. 327 327 00:19:04,550 --> 00:19:06,650 So in this case, the app object, 328 328 00:19:06,650 --> 00:19:10,830 which is what this is currently pointing to. 329 329 00:19:10,830 --> 00:19:14,490 And so here again, we will need to use the bind keyword 330 330 00:19:14,490 --> 00:19:18,370 and so this should now work, all right? 331 331 00:19:18,370 --> 00:19:21,270 Then we also have this one here to refactor, 332 332 00:19:21,270 --> 00:19:24,150 but actually there is another method 333 333 00:19:24,150 --> 00:19:28,690 that we want to implement, which is showForm, right? 334 334 00:19:28,690 --> 00:19:33,080 And so showForm is basically this code right here. 335 335 00:19:33,080 --> 00:19:34,883 So let's just cut it from here. 336 336 00:19:37,980 --> 00:19:41,150 then paste that here, all right? 337 337 00:19:41,150 --> 00:19:45,207 Now we of course also need this parameter here, now okay. 338 338 00:19:47,460 --> 00:19:52,033 And then here we will call this.showForm, 339 339 00:19:54,880 --> 00:19:57,530 but now if we run this code, then we will actually 340 340 00:19:57,530 --> 00:20:00,980 get the same error that we already saw the last time 341 341 00:20:00,980 --> 00:20:02,983 that we inspected our code. 342 342 00:20:04,800 --> 00:20:07,600 So the error that we saw previously, when I clicked 343 343 00:20:07,600 --> 00:20:10,823 on the map, and so that's gonna be this one. 344 344 00:20:11,700 --> 00:20:15,520 And so it says, again, that we cannot write this mapEvent 345 345 00:20:15,520 --> 00:20:20,482 property onto this object that we are trying to currently. 346 346 00:20:20,482 --> 00:20:22,180 And so once again, the reason for that 347 347 00:20:22,180 --> 00:20:26,070 is a incorrectly set this keyword. 348 348 00:20:26,070 --> 00:20:29,680 So again, this method here is right now being used 349 349 00:20:29,680 --> 00:20:33,400 as an event handler function right here. 350 350 00:20:33,400 --> 00:20:35,910 And so just like in regular JavaScript, 351 351 00:20:35,910 --> 00:20:40,360 the this keyword in this function here will then be set 352 352 00:20:40,360 --> 00:20:44,390 to the object onto which the event handler is attached. 353 353 00:20:44,390 --> 00:20:49,260 And so that's gonna be simply the map itself, okay. 354 354 00:20:49,260 --> 00:20:51,833 And so here we are trying to write mapEvent on the map. 355 355 00:20:54,390 --> 00:20:57,320 So again, the this keyword points to the map 356 356 00:20:57,320 --> 00:21:00,713 because this is where we attached the event handler on. 357 357 00:21:01,840 --> 00:21:05,050 And so once again, the solution to that is 358 358 00:21:05,050 --> 00:21:08,750 to bind the this keywords because the this keyword 359 359 00:21:08,750 --> 00:21:11,900 is the App object and so then here, 360 360 00:21:11,900 --> 00:21:14,070 this will also be the App object. 361 361 00:21:14,070 --> 00:21:17,513 And of course that's where we have the mapEvent property, 362 362 00:21:18,670 --> 00:21:19,583 so right here. 363 363 00:21:21,040 --> 00:21:21,873 Correct. 364 364 00:21:23,460 --> 00:21:25,650 So with that fixed it should now work 365 365 00:21:26,850 --> 00:21:29,630 and yeah, it does. 366 366 00:21:29,630 --> 00:21:33,660 And so now we can also test the refactoring of the Form 367 367 00:21:33,660 --> 00:21:34,990 that we just had before 368 368 00:21:36,470 --> 00:21:40,070 and indeed we get an error, but that's not problem 369 369 00:21:40,070 --> 00:21:43,420 that is completely normal when we are refactoring. 370 370 00:21:43,420 --> 00:21:47,853 So I'm sure we just forgot like a this keyword on line 78. 371 371 00:21:49,550 --> 00:21:54,530 So 78, yep that's correct. 372 372 00:21:54,530 --> 00:21:59,530 So here, of course we need this.mapEvent like this, 373 373 00:22:02,450 --> 00:22:04,890 let's give it another safe and another 374 374 00:22:04,890 --> 00:22:08,623 try and to then, we're actually almost done with this video. 375 375 00:22:10,570 --> 00:22:13,610 So, beautiful, now it works 376 376 00:22:13,610 --> 00:22:17,420 and now all we need to do is to refactor this last piece 377 377 00:22:17,420 --> 00:22:21,140 of code that we have in a constructor, because of course, 378 378 00:22:21,140 --> 00:22:24,430 we also don't want this function here 379 379 00:22:24,430 --> 00:22:26,700 to be right here in the constructor. 380 380 00:22:26,700 --> 00:22:29,780 So basically every small piece of functionality 381 381 00:22:29,780 --> 00:22:31,400 that is in our application, 382 382 00:22:31,400 --> 00:22:33,563 we now want to be its own function. 383 383 00:22:34,540 --> 00:22:37,420 So let's take this and for that, 384 384 00:22:37,420 --> 00:22:42,080 we have the toggleElevationField method, all right? 385 385 00:22:44,050 --> 00:22:46,680 Now this one here actually does not use 386 386 00:22:46,680 --> 00:22:48,530 the this keyword anywhere 387 387 00:22:48,530 --> 00:22:50,210 and so here, it doesn't matter 388 388 00:22:50,210 --> 00:22:52,920 what the this keyword will be like. 389 389 00:22:52,920 --> 00:22:56,900 And so therefore we don't have to bind it manually here 390 390 00:22:56,900 --> 00:22:59,853 because as I just said, it doesn't really matter. 391 391 00:23:00,810 --> 00:23:05,200 ElevationField, all right. 392 392 00:23:05,200 --> 00:23:08,270 So now our constructor nicely simply 393 393 00:23:08,270 --> 00:23:10,930 gets the currentPosition and then it adds 394 394 00:23:10,930 --> 00:23:13,980 these two event listeners to the Form 395 395 00:23:13,980 --> 00:23:15,763 and the input type element. 396 396 00:23:16,860 --> 00:23:18,463 So that's very nice and clean, 397 397 00:23:19,610 --> 00:23:22,543 everything is neatly organized into these methods. 398 398 00:23:23,640 --> 00:23:26,380 And so I think this is a really great structure 399 399 00:23:26,380 --> 00:23:28,170 that we just created here. 400 400 00:23:28,170 --> 00:23:31,820 And now indeed, we no longer need these very ugly 401 401 00:23:31,820 --> 00:23:36,053 global variables that we relied on before. 402 402 00:23:37,010 --> 00:23:40,410 And now let's just test if this one here is working as well 403 403 00:23:41,290 --> 00:23:44,930 and of course it is, all right. 404 404 00:23:44,930 --> 00:23:49,290 So great, we successfully implemented or architecture 405 405 00:23:49,290 --> 00:23:51,100 at least part of it. 406 406 00:23:51,100 --> 00:23:54,720 And so now in the next lecture, we will actually implement 407 407 00:23:54,720 --> 00:23:57,500 the rest of the architecture. 408 408 00:23:57,500 --> 00:24:01,200 So that's gonna be these other three classes here. 409 409 00:24:01,200 --> 00:24:02,893 So I hope to see you there soon. 36409