WEBVTT 1 00:00:01.500 --> 00:00:05.220 All right, so let's now render the workout 2 00:00:05.220 --> 00:00:09.093 input form whenever the user clicks on the map. 3 00:00:10.920 --> 00:00:12.510 And so just to make sure 4 00:00:12.510 --> 00:00:14.950 that we're still all on the same page 5 00:00:14.950 --> 00:00:17.800 right now we basically have an arrow 6 00:00:17.800 --> 00:00:20.810 pointing from here when the user clicks on the map 7 00:00:20.810 --> 00:00:23.240 to render a workout on the map, 8 00:00:23.240 --> 00:00:26.330 which essentially is the marker that we put on the map 9 00:00:26.330 --> 00:00:28.090 in the last video. 10 00:00:28.090 --> 00:00:30.503 So right now, when the map is clicked here 11 00:00:30.503 --> 00:00:33.210 then a marker appears on the map. 12 00:00:33.210 --> 00:00:35.190 But right now what we actually want 13 00:00:35.190 --> 00:00:38.650 in that event handler that we set up in the last video 14 00:00:38.650 --> 00:00:42.750 is to render the form so that a new workout can be added. 15 00:00:42.750 --> 00:00:45.840 And then on that form, we will add an EventListener 16 00:00:45.840 --> 00:00:48.890 so that whenever that form is submitted 17 00:00:48.890 --> 00:00:52.610 only then the marker is rendered on the map. 18 00:00:52.610 --> 00:00:55.200 And so we will basically move this rendering 19 00:00:55.200 --> 00:00:58.030 of the marker to right here. 20 00:00:58.030 --> 00:01:02.793 Okay, so, let's take a look at our Index.HTML. 21 00:01:03.730 --> 00:01:08.730 And so the form that I'm talking about it's this one here. 22 00:01:09.270 --> 00:01:12.270 So, this form element here with the class form 23 00:01:12.270 --> 00:01:14.623 is the one that we want to render now. 24 00:01:16.080 --> 00:01:20.440 And as before I actually already selected it 25 00:01:20.440 --> 00:01:25.160 and it is this one here simply called form. 26 00:01:25.160 --> 00:01:27.020 Let's take a look here again 27 00:01:27.020 --> 00:01:30.380 and you'll see that right now, it has the hidden class. 28 00:01:30.380 --> 00:01:31.530 And so one more time, 29 00:01:31.530 --> 00:01:34.030 we are going to do that manipulation here 30 00:01:34.030 --> 00:01:36.300 by adding and removing classes. 31 00:01:36.300 --> 00:01:39.700 And in this case it is our old friend, 32 00:01:39.700 --> 00:01:41.313 basically the hidden class. 33 00:01:44.240 --> 00:01:49.240 So, let's do what I just set, which is that when a click 34 00:01:49.520 --> 00:01:53.200 on the map happens, then we want to show the form. 35 00:01:53.200 --> 00:01:56.377 And so not this, and so let's get, 36 00:01:57.490 --> 00:02:00.110 for now let's actually get rid of all this, 37 00:02:00.110 --> 00:02:03.063 so I will comment it and later we will need it. 38 00:02:05.830 --> 00:02:08.220 And the same actually for this one. 39 00:02:08.220 --> 00:02:11.792 And so all we want to do now is to take the form 40 00:02:11.792 --> 00:02:16.792 .ClassList.remove, and then remove the class of hidden. 41 00:02:22.580 --> 00:02:25.000 So let's see, and this is our demo. 42 00:02:25.000 --> 00:02:26.560 This is the real one. 43 00:02:26.560 --> 00:02:30.780 And as I click here then edit the form here 44 00:02:30.780 --> 00:02:32.493 showed up on the left side. 45 00:02:33.430 --> 00:02:35.310 And now one cool thing that we can do 46 00:02:35.310 --> 00:02:38.610 for a better user experience is to immediately focus 47 00:02:38.610 --> 00:02:40.710 on this field here. 48 00:02:40.710 --> 00:02:45.710 So that's also what happens when we click on the map here. 49 00:02:45.890 --> 00:02:49.123 So you see that right away, the cursor is blinking there. 50 00:02:50.690 --> 00:02:53.990 And so that's actually relatively easy. 51 00:02:53.990 --> 00:02:57.100 So all we need is for this input element here 52 00:02:57.100 --> 00:02:58.053 of the distance. 53 00:02:59.400 --> 00:03:03.510 And again, I actually already selected all of the inputs 54 00:03:03.510 --> 00:03:05.930 and so that's InputDistance 55 00:03:05.930 --> 00:03:08.460 and we can simply say InputDistance. 56 00:03:10.099 --> 00:03:12.890 So, not that one, but this one. 57 00:03:12.890 --> 00:03:15.813 And then on that we can call the focus method. 58 00:03:17.909 --> 00:03:20.640 And that's actually it very simple 59 00:03:20.640 --> 00:03:23.130 but for user experience, it's a lot better 60 00:03:23.130 --> 00:03:26.363 because we can then immediately start typing like this. 61 00:03:27.870 --> 00:03:30.890 And now let's add an event handler 62 00:03:30.890 --> 00:03:33.710 to this form for submitting it. 63 00:03:33.710 --> 00:03:35.750 And for now we are not gonna care at all 64 00:03:35.750 --> 00:03:37.220 about the data here. 65 00:03:37.220 --> 00:03:40.090 All we want is whenever this form is submitted 66 00:03:40.090 --> 00:03:42.690 that a marker then appears on the page 67 00:03:42.690 --> 00:03:45.913 and exactly at the place that was previously clicked. 68 00:03:47.890 --> 00:03:50.150 And notice, that we actually don't even have 69 00:03:50.150 --> 00:03:53.090 any submit button here. 70 00:03:53.090 --> 00:03:56.970 So there's no button to submit this form to make it smaller. 71 00:03:56.970 --> 00:03:59.800 But remember that whenever we hit the Enter key 72 00:03:59.800 --> 00:04:02.150 on any of these fields in a form 73 00:04:02.150 --> 00:04:04.200 then that will actually also trigger 74 00:04:04.200 --> 00:04:06.870 the submit event on that form. 75 00:04:06.870 --> 00:04:10.380 And so that's what we're gonna make use of now. 76 00:04:10.380 --> 00:04:14.530 And so let's now add that EventListener. 77 00:04:14.530 --> 00:04:17.743 And so that of course, we will do outside of all of this. 78 00:04:18.690 --> 00:04:20.890 So we will not have an EventListener 79 00:04:20.890 --> 00:04:23.120 inside an EventListener right? 80 00:04:23.120 --> 00:04:27.140 And also this has nothing to do with the geolocation. 81 00:04:27.140 --> 00:04:30.053 And so let's do that completely separate out here. 82 00:04:31.290 --> 00:04:35.260 So, that's form.addeventlistener. 83 00:04:35.260 --> 00:04:37.580 And then as I just explained, 84 00:04:37.580 --> 00:04:39.763 we are gonna listen for submit. 85 00:04:42.940 --> 00:04:46.883 And so this is the one that will then display the marker. 86 00:04:47.970 --> 00:04:49.220 So, that's right at here. 87 00:04:50.630 --> 00:04:55.333 Okay, and so let's get this code here and paste it here. 88 00:04:59.730 --> 00:05:02.223 And of course getting rid of the comments, 89 00:05:03.300 --> 00:05:05.770 and maybe you're starting to notice 90 00:05:05.770 --> 00:05:10.770 that we have not only one, but two problems here actually. 91 00:05:10.790 --> 00:05:14.510 So, right now we are trying to use two variables 92 00:05:14.510 --> 00:05:16.623 that do not exist in the current scope. 93 00:05:17.640 --> 00:05:22.323 So, we are trying to access map and also map event right? 94 00:05:23.840 --> 00:05:26.203 Now this map here is easy to fix. 95 00:05:27.260 --> 00:05:30.640 So that map is this variable here right? 96 00:05:30.640 --> 00:05:33.850 So it is defined inside of the callback function 97 00:05:33.850 --> 00:05:38.560 of the geolocation API solve this, get current position 98 00:05:39.520 --> 00:05:43.670 but all you have to do is to basically create a global 99 00:05:43.670 --> 00:05:45.163 variable here like this. 100 00:05:46.180 --> 00:05:47.793 So this one, I'm gonna call map. 101 00:05:48.900 --> 00:05:51.890 And so here we then simply reassign that map 102 00:05:51.890 --> 00:05:54.603 to the already existing variable. 103 00:05:55.930 --> 00:05:57.540 And now for map event, 104 00:05:57.540 --> 00:06:00.530 we actually have to do the exact same thing. 105 00:06:00.530 --> 00:06:04.480 All right, so this map event, we get access to it 106 00:06:04.480 --> 00:06:07.723 in this event handler that we set up previously. 107 00:06:09.050 --> 00:06:10.510 So, that's right here. 108 00:06:10.510 --> 00:06:15.510 Let's just add a comment here, handling clicks on map 109 00:06:16.670 --> 00:06:20.060 and don't worry, we are gonna fix this entire code here. 110 00:06:20.060 --> 00:06:22.910 So this whole mess that we have been building 111 00:06:22.910 --> 00:06:25.650 now very soon actually, so handling 112 00:06:26.820 --> 00:06:31.250 because yeah, right now it is all a little bit messy 113 00:06:31.250 --> 00:06:32.980 but that's exactly what I was saying 114 00:06:32.980 --> 00:06:35.200 in the beginning of the section, 115 00:06:35.200 --> 00:06:37.490 so that we will simply start coding 116 00:06:37.490 --> 00:06:40.580 without caring for now about the architecture. 117 00:06:40.580 --> 00:06:42.600 So, without the structure of the codes 118 00:06:42.600 --> 00:06:45.830 but very soon we should actually start to think a little bit 119 00:06:45.830 --> 00:06:48.223 about this, to organize this code. 120 00:06:49.200 --> 00:06:52.344 But anyway, it is inside of this event handler 121 00:06:52.344 --> 00:06:55.300 that we get access to the map event. 122 00:06:55.300 --> 00:06:58.550 So to that object, which will contain the coordinates 123 00:06:58.550 --> 00:07:02.390 however, we don't really need it here right? 124 00:07:02.390 --> 00:07:04.640 So here we are only displaying the form 125 00:07:04.640 --> 00:07:06.830 but where we need it is then later 126 00:07:06.830 --> 00:07:09.900 when that form is actually submitted. 127 00:07:09.900 --> 00:07:13.160 And so basically as a way of passing it here, 128 00:07:13.160 --> 00:07:16.240 we will simply also define the map event 129 00:07:16.240 --> 00:07:19.450 as a global variable too. 130 00:07:19.450 --> 00:07:23.483 So let me here create also map event. 131 00:07:26.620 --> 00:07:29.200 And then here we will... 132 00:07:29.200 --> 00:07:31.630 Well, we will have to change the name here. 133 00:07:31.630 --> 00:07:33.890 So let's just call it map E 134 00:07:33.890 --> 00:07:37.657 because usually I only call events simply E 135 00:07:37.657 --> 00:07:41.910 and so let's now say map event, so, this one here 136 00:07:41.910 --> 00:07:46.910 which is the global variable, should be equal to map E. 137 00:07:47.260 --> 00:07:48.900 So again, we did this one here 138 00:07:48.900 --> 00:07:51.170 because we don't need this map event 139 00:07:51.170 --> 00:07:52.720 right here in this function. 140 00:07:52.720 --> 00:07:55.540 Which is a place where we get access to it. 141 00:07:55.540 --> 00:07:58.920 And so we basically copy it to a global variable 142 00:07:58.920 --> 00:08:01.510 and then here, where we do actually need it. 143 00:08:01.510 --> 00:08:03.990 We will get access to the global variable 144 00:08:03.990 --> 00:08:06.810 and can then use the latitude and longitude 145 00:08:06.810 --> 00:08:09.030 right here in this function. 146 00:08:09.030 --> 00:08:13.243 And so this will already work at this point. 147 00:08:14.560 --> 00:08:17.770 So let's wait for the map to load, there it is. 148 00:08:17.770 --> 00:08:20.650 I will click here in the middle of the city 149 00:08:20.650 --> 00:08:24.170 and then again, we don't need to care about the data at all. 150 00:08:24.170 --> 00:08:26.023 So I will just hit the Enter key. 151 00:08:27.890 --> 00:08:32.640 And then maybe for a second, you saw it appearing down here 152 00:08:32.640 --> 00:08:35.170 but then immediately the page reloaded. 153 00:08:35.170 --> 00:08:36.750 And so the reason for that 154 00:08:36.750 --> 00:08:39.730 is because the default behavior of forms 155 00:08:39.730 --> 00:08:41.840 is doing exactly that. 156 00:08:41.840 --> 00:08:46.220 And so once again, we actually need the event here 157 00:08:46.220 --> 00:08:49.083 and then we need to call event.preventdefault. 158 00:08:52.458 --> 00:08:54.730 And so that should now fix it. 159 00:08:54.730 --> 00:08:56.920 And so let me click here again 160 00:08:56.920 --> 00:09:00.740 I will just hit Enter and there it is. 161 00:09:00.740 --> 00:09:04.640 So now basically the marker appears here in two steps. 162 00:09:04.640 --> 00:09:06.700 First, the form is displayed. 163 00:09:06.700 --> 00:09:09.210 And then when we submit that form, 164 00:09:09.210 --> 00:09:13.300 finally, the marker is then rendered here on the map. 165 00:09:13.300 --> 00:09:17.080 All right, cool, let's try another one here. 166 00:09:17.080 --> 00:09:19.170 Let's just put some values here, 167 00:09:19.170 --> 00:09:21.103 but indeed that works now. 168 00:09:22.350 --> 00:09:25.940 Now this form here is far from complete. 169 00:09:25.940 --> 00:09:29.130 For example, all the values here should be cleared 170 00:09:29.130 --> 00:09:31.350 and also the form should disappear 171 00:09:31.350 --> 00:09:33.570 after we inputted something. 172 00:09:33.570 --> 00:09:37.580 But, well, let's take care actually of the first one now. 173 00:09:37.580 --> 00:09:40.810 So clearing all the input fields, but then about the hiding 174 00:09:40.810 --> 00:09:44.340 of the form, let's actually do that a little bit later. 175 00:09:44.340 --> 00:09:49.340 All right, so, let's take all the values. 176 00:09:50.830 --> 00:09:55.350 So that's input, distance, duration and cadence or cadence. 177 00:09:55.350 --> 00:09:57.500 I'm not sure about that one. 178 00:09:57.500 --> 00:10:01.400 So these three are these three fields. 179 00:10:01.400 --> 00:10:06.140 Okay, but then we also have the elevation gain for cycling. 180 00:10:06.140 --> 00:10:07.750 And so that's another input, 181 00:10:07.750 --> 00:10:10.000 and so we need to clear all of them. 182 00:10:10.000 --> 00:10:12.760 even though this one here is not yet visible 183 00:10:12.760 --> 00:10:15.000 but actually we will take care of that 184 00:10:15.000 --> 00:10:17.410 right after doing this one. 185 00:10:17.410 --> 00:10:20.560 So let's take these four inputs and clear them, 186 00:10:20.560 --> 00:10:22.620 and then I will actually show you 187 00:10:22.620 --> 00:10:24.253 how we can display this one. 188 00:10:26.230 --> 00:10:27.733 So, let's do that here. 189 00:10:30.556 --> 00:10:34.733 Clear, input, fields. 190 00:10:35.910 --> 00:10:37.970 And so that's input distance 191 00:10:37.970 --> 00:10:41.350 as we can say it equal to the empty string 192 00:10:41.350 --> 00:10:42.860 and then we can actually put them 193 00:10:42.860 --> 00:10:45.173 all equal at the same time. 194 00:10:46.160 --> 00:10:49.120 So, input, let's say duration 195 00:10:51.840 --> 00:10:56.023 then this one, and then finally the elevation as well. 196 00:10:57.290 --> 00:10:59.840 So, just to test that and to show you, 197 00:10:59.840 --> 00:11:01.523 the next step here as well. 198 00:11:02.560 --> 00:11:06.073 So when we click, let's just put some random values here. 199 00:11:07.810 --> 00:11:09.950 Oh, and now we get an error here. 200 00:11:09.950 --> 00:11:12.330 So assignment to constant variable 201 00:11:12.330 --> 00:11:14.680 and a good thing that this is happening 202 00:11:14.680 --> 00:11:18.290 because I already remembered the mistake that I made. 203 00:11:18.290 --> 00:11:21.810 And so that is forgetting the value here. 204 00:11:21.810 --> 00:11:23.920 So of course we don't want to clear 205 00:11:23.920 --> 00:11:26.150 the entire element right? 206 00:11:26.150 --> 00:11:27.993 We just want to clear the value. 207 00:11:29.400 --> 00:11:31.300 So this is one that I keep forgetting. 208 00:11:32.180 --> 00:11:34.730 I think this wasn't the first time for some reason. 209 00:11:36.110 --> 00:11:38.513 All right, but that actually works. 210 00:11:39.370 --> 00:11:41.460 And so now finally, what I want to do 211 00:11:41.460 --> 00:11:45.730 is whenever we click on cycling here 212 00:11:45.730 --> 00:11:49.623 then this cadence or cadence should change to elevation. 213 00:11:51.040 --> 00:11:53.853 So, watch what happens here in the demo when I cycling, 214 00:11:54.920 --> 00:11:57.020 then both of these changed. 215 00:11:57.020 --> 00:12:00.280 And if I click again, then that changes back 216 00:12:01.120 --> 00:12:04.820 and that is actually easier to do than you might think 217 00:12:04.820 --> 00:12:08.400 because there is actually an event which is triggered 218 00:12:08.400 --> 00:12:12.850 whenever we change the value of this select element. 219 00:12:12.850 --> 00:12:15.710 And so let's now listen for that event. 220 00:12:15.710 --> 00:12:19.990 And then whenever it happens, we will then basically hide 221 00:12:19.990 --> 00:12:22.703 and display the corresponding fields. 222 00:12:25.590 --> 00:12:30.590 So that element that I just showed you, is this one. 223 00:12:34.130 --> 00:12:37.363 So it is the form input type. 224 00:12:38.920 --> 00:12:42.330 Alright, so form input type. 225 00:12:42.330 --> 00:12:45.300 And so it's this one it's input type 226 00:12:45.300 --> 00:12:48.910 and so that's listed for the change event on that one. 227 00:12:48.910 --> 00:12:50.460 So, InputType.addEventListener. 228 00:12:55.680 --> 00:12:57.993 So again it is called change, 229 00:13:01.350 --> 00:13:06.000 and then let's move back actually to the HTML here, 230 00:13:06.000 --> 00:13:09.423 just to see how the form is hidden. 231 00:13:10.460 --> 00:13:15.460 And so you'll see that this here is the elevation field. 232 00:13:16.290 --> 00:13:20.530 So you see input and then form, input, elevation. 233 00:13:20.530 --> 00:13:24.730 And so that is exactly this one here. 234 00:13:24.730 --> 00:13:26.833 So again, form input elevation. 235 00:13:27.710 --> 00:13:29.950 So, that's the input elevation. 236 00:13:29.950 --> 00:13:33.033 And so this is the element that we're gonna work with. 237 00:13:34.090 --> 00:13:35.740 So that's actually right at here. 238 00:13:37.410 --> 00:13:40.650 So input elevation but then the one 239 00:13:40.650 --> 00:13:44.450 that actually has the hidden class and in this case, 240 00:13:44.450 --> 00:13:48.110 the class is called form, row, hidden. 241 00:13:48.110 --> 00:13:49.153 So let's copy that. 242 00:13:50.040 --> 00:13:52.770 And so again, the element that has this hidden 243 00:13:52.770 --> 00:13:57.050 class is essentially the closest div element 244 00:13:57.050 --> 00:13:59.130 to this input field. 245 00:13:59.130 --> 00:14:02.110 Or in other words, it is the closest parent 246 00:14:02.110 --> 00:14:04.593 which also has this form, row, class. 247 00:14:05.940 --> 00:14:09.190 And so what we're gonna do is to toggle this hidden class 248 00:14:09.190 --> 00:14:13.170 both on the elevation gain and on the cadence 249 00:14:13.170 --> 00:14:16.463 or the cadence, because these two rows here. 250 00:14:17.500 --> 00:14:19.200 So, from these two, 251 00:14:19.200 --> 00:14:22.490 there will only ever be one of them visible. 252 00:14:22.490 --> 00:14:24.350 So, whenever this one is hidden 253 00:14:24.350 --> 00:14:25.800 this one should be visible. 254 00:14:25.800 --> 00:14:27.350 And when this one is hidden, 255 00:14:27.350 --> 00:14:29.250 then this one should be visible. 256 00:14:29.250 --> 00:14:31.940 And so what we can do is simply toggle 257 00:14:31.940 --> 00:14:34.500 this hidden class here on both of them 258 00:14:34.500 --> 00:14:37.393 whenever this change event happens. 259 00:14:38.780 --> 00:14:41.650 So I just set a couple of different things 260 00:14:41.650 --> 00:14:43.170 there at the same time. 261 00:14:43.170 --> 00:14:45.290 So, the first thing that we need to do 262 00:14:45.290 --> 00:14:49.550 is to select the closest parent with that form row. 263 00:14:49.550 --> 00:14:52.450 And so for that, we use (indistinct) traversal 264 00:14:52.450 --> 00:14:55.223 and the very handy, closest method. 265 00:14:56.350 --> 00:14:59.250 And so here we can now specify the class name 266 00:14:59.250 --> 00:15:00.950 or actually a selector. 267 00:15:00.950 --> 00:15:03.560 So here we need a fully flesh selector 268 00:15:03.560 --> 00:15:04.993 to select an element. 269 00:15:06.140 --> 00:15:09.380 So basically remember the closest method 270 00:15:09.380 --> 00:15:12.110 is like an inverse query selector. 271 00:15:12.110 --> 00:15:14.693 So, it selects parents and not children. 272 00:15:15.920 --> 00:15:18.500 All right, then we take the class list 273 00:15:18.500 --> 00:15:23.450 and then we simply toggle this class here 274 00:15:24.440 --> 00:15:27.483 and then we do the same on the input cadence. 275 00:15:29.180 --> 00:15:33.160 So this one, and so by toggling the same class 276 00:15:33.160 --> 00:15:35.370 on both of them, we make sure 277 00:15:35.370 --> 00:15:37.610 that it's always one of them that's hidden 278 00:15:37.610 --> 00:15:40.983 and the other one visible all right? 279 00:15:43.570 --> 00:15:46.310 So, let's wait for it one more time 280 00:15:47.370 --> 00:15:50.603 clicking somewhere, and so let's wait for it. 281 00:15:51.540 --> 00:15:54.653 And yep, that works beautifully. 282 00:15:56.160 --> 00:16:00.183 So, let's just add one here and indeed there it is. 283 00:16:01.110 --> 00:16:05.210 Okay, so all of this works very nicely now 284 00:16:05.210 --> 00:16:07.030 and the next step here would be 285 00:16:07.030 --> 00:16:09.280 to actually take the data here 286 00:16:09.280 --> 00:16:11.970 out of the form and then using that data 287 00:16:11.970 --> 00:16:14.240 create an actual workout. 288 00:16:14.240 --> 00:16:15.840 However, here in our code, 289 00:16:15.840 --> 00:16:19.570 we are at a point where we need some structure 290 00:16:19.570 --> 00:16:23.460 and we will also need a way of managing that work out data. 291 00:16:23.460 --> 00:16:25.870 That is gonna come from this form. 292 00:16:25.870 --> 00:16:29.290 So this data here will have to be stored somewhere. 293 00:16:29.290 --> 00:16:32.490 And so again we need to think a little bit 294 00:16:32.490 --> 00:16:34.460 about our code structure here 295 00:16:34.460 --> 00:16:36.640 and about our code architecture. 296 00:16:36.640 --> 00:16:38.840 And so that is gonna be exactly the topic 297 00:16:38.840 --> 00:16:40.183 of the next video.