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.