Original subtitles

1 1

All right, so let's now render the workout 2

2

input form whenever the user clicks on the map. 3

3

And so just to make sure 4

4

that we're still all on the same page 5

5

right now we basically have an arrow 6

6

pointing from here when the user clicks on the map 7

7

to render a workout on the map, 8

8

which essentially is the marker that we put on the map 9

9

in the last video. 10

10

So right now, when the map is clicked here 11

11

then a marker appears on the map. 12

12

But right now what we actually want 13

13

in that event handler that we set up in the last video 14

14

is to render the form so that a new workout can be added. 15

15

And then on that form, we will add an EventListener 16

16

so that whenever that form is submitted 17

17

only then the marker is rendered on the map. 18

18

And so we will basically move this rendering 19

19

of the marker to right here. 20

20

Okay, so, let's take a look at our Index.HTML. 21

21

And so the form that I'm talking about it's this one here. 22

22

So, this form element here with the class form 23

23

is the one that we want to render now. 24

24

And as before I actually already selected it 25

25

and it is this one here simply called form. 26

26

Let's take a look here again 27

27

and you'll see that right now, it has the hidden class. 28

28

And so one more time, 29

29

we are going to do that manipulation here 30

30

by adding and removing classes. 31

31

And in this case it is our old friend, 32

32

basically the hidden class. 33

33

So, let's do what I just set, which is that when a click 34

34

on the map happens, then we want to show the form. 35

35

And so not this, and so let's get, 36

36

for now let's actually get rid of all this, 37

37

so I will comment it and later we will need it. 38

38

And the same actually for this one. 39

39

And so all we want to do now is to take the form 40

40

.ClassList.remove, and then remove the class of hidden. 41

41

So let's see, and this is our demo. 42

42

This is the real one. 43

43

And as I click here then edit the form here 44

44

showed up on the left side. 45

45

And now one cool thing that we can do 46

46

for a better user experience is to immediately focus 47

47

on this field here. 48

48

So that's also what happens when we click on the map here. 49

49

So you see that right away, the cursor is blinking there. 50

50

And so that's actually relatively easy. 51

51

So all we need is for this input element here 52

52

of the distance. 53

53

And again, I actually already selected all of the inputs 54

54

and so that's InputDistance 55

55

and we can simply say InputDistance. 56

56

So, not that one, but this one. 57

57

And then on that we can call the focus method. 58

58

And that's actually it very simple 59

59

but for user experience, it's a lot better 60

60

because we can then immediately start typing like this. 61

61

And now let's add an event handler 62

62

to this form for submitting it. 63

63

And for now we are not gonna care at all 64

64

about the data here. 65

65

All we want is whenever this form is submitted 66

66

that a marker then appears on the page 67

67

and exactly at the place that was previously clicked. 68

68

And notice, that we actually don't even have 69

69

any submit button here. 70

70

So there's no button to submit this form to make it smaller. 71

71

But remember that whenever we hit the Enter key 72

72

on any of these fields in a form 73

73

then that will actually also trigger 74

74

the submit event on that form. 75

75

And so that's what we're gonna make use of now. 76

76

And so let's now add that EventListener. 77

77

And so that of course, we will do outside of all of this. 78

78

So we will not have an EventListener 79

79

inside an EventListener right? 80

80

And also this has nothing to do with the geolocation. 81

81

And so let's do that completely separate out here. 82

82

So, that's form.addeventlistener. 83

83

And then as I just explained, 84

84

we are gonna listen for submit. 85

85

And so this is the one that will then display the marker. 86

86

So, that's right at here. 87

87

Okay, and so let's get this code here and paste it here. 88

88

And of course getting rid of the comments, 89

89

and maybe you're starting to notice 90

90

that we have not only one, but two problems here actually. 91

91

So, right now we are trying to use two variables 92

92

that do not exist in the current scope. 93

93

So, we are trying to access map and also map event right? 94

94

Now this map here is easy to fix. 95

95

So that map is this variable here right? 96

96

So it is defined inside of the callback function 97

97

of the geolocation API solve this, get current position 98

98

but all you have to do is to basically create a global 99

99

variable here like this. 100

100

So this one, I'm gonna call map. 101

101

And so here we then simply reassign that map 102

102

to the already existing variable. 103

103

And now for map event, 104

104

we actually have to do the exact same thing. 105

105

All right, so this map event, we get access to it 106

106

in this event handler that we set up previously. 107

107

So, that's right here. 108

108

Let's just add a comment here, handling clicks on map 109

109

and don't worry, we are gonna fix this entire code here. 110

110

So this whole mess that we have been building 111

111

now very soon actually, so handling 112

112

because yeah, right now it is all a little bit messy 113

113

but that's exactly what I was saying 114

114

in the beginning of the section, 115

115

so that we will simply start coding 116

116

without caring for now about the architecture. 117

117

So, without the structure of the codes 118

118

but very soon we should actually start to think a little bit 119

119

about this, to organize this code. 120

120

But anyway, it is inside of this event handler 121

121

that we get access to the map event. 122

122

So to that object, which will contain the coordinates 123

123

however, we don't really need it here right? 124

124

So here we are only displaying the form 125

125

but where we need it is then later 126

126

when that form is actually submitted. 127

127

And so basically as a way of passing it here, 128

128

we will simply also define the map event 129

129

as a global variable too. 130

130

So let me here create also map event. 131

131

And then here we will... 132

132

Well, we will have to change the name here. 133

133

So let's just call it map E 134

134

because usually I only call events simply E 135

135

and so let's now say map event, so, this one here 136

136

which is the global variable, should be equal to map E. 137

137

So again, we did this one here 138

138

because we don't need this map event 139

139

right here in this function. 140

140

Which is a place where we get access to it. 141

141

And so we basically copy it to a global variable 142

142

and then here, where we do actually need it. 143

143

We will get access to the global variable 144

144

and can then use the latitude and longitude 145

145

right here in this function. 146

146

And so this will already work at this point. 147

147

So let's wait for the map to load, there it is. 148

148

I will click here in the middle of the city 149

149

and then again, we don't need to care about the data at all. 150

150

So I will just hit the Enter key. 151

151

And then maybe for a second, you saw it appearing down here 152

152

but then immediately the page reloaded. 153

153

And so the reason for that 154

154

is because the default behavior of forms 155

155

is doing exactly that. 156

156

And so once again, we actually need the event here 157

157

and then we need to call event.preventdefault. 158

158

And so that should now fix it. 159

159

And so let me click here again 160

160

I will just hit Enter and there it is. 161

161

So now basically the marker appears here in two steps. 162

162

First, the form is displayed. 163

163

And then when we submit that form, 164

164

finally, the marker is then rendered here on the map. 165

165

All right, cool, let's try another one here. 166

166

Let's just put some values here, 167

167

but indeed that works now. 168

168

Now this form here is far from complete. 169

169

For example, all the values here should be cleared 170

170

and also the form should disappear 171

171

after we inputted something. 172

172

But, well, let's take care actually of the first one now. 173

173

So clearing all the input fields, but then about the hiding 174

174

of the form, let's actually do that a little bit later. 175

175

All right, so, let's take all the values. 176

176

So that's input, distance, duration and cadence or cadence. 177

177

I'm not sure about that one. 178

178

So these three are these three fields. 179

179

Okay, but then we also have the elevation gain for cycling. 180

180

And so that's another input, 181

181

and so we need to clear all of them. 182

182

even though this one here is not yet visible 183

183

but actually we will take care of that 184

184

right after doing this one. 185

185

So let's take these four inputs and clear them, 186

186

and then I will actually show you 187

187

how we can display this one. 188

188

So, let's do that here. 189

189

Clear, input, fields. 190

190

And so that's input distance 191

191

as we can say it equal to the empty string 192

192

and then we can actually put them 193

193

all equal at the same time. 194

194

So, input, let's say duration 195

195

then this one, and then finally the elevation as well. 196

196

So, just to test that and to show you, 197

197

the next step here as well. 198

198

So when we click, let's just put some random values here. 199

199

Oh, and now we get an error here. 200

200

So assignment to constant variable 201

201

and a good thing that this is happening 202

202

because I already remembered the mistake that I made. 203

203

And so that is forgetting the value here. 204

204

So of course we don't want to clear 205

205

the entire element right? 206

206

We just want to clear the value. 207

207

So this is one that I keep forgetting. 208

208

I think this wasn't the first time for some reason. 209

209

All right, but that actually works. 210

210

And so now finally, what I want to do 211

211

is whenever we click on cycling here 212

212

then this cadence or cadence should change to elevation. 213

213

So, watch what happens here in the demo when I cycling, 214

214

then both of these changed. 215

215

And if I click again, then that changes back 216

216

and that is actually easier to do than you might think 217

217

because there is actually an event which is triggered 218

218

whenever we change the value of this select element. 219

219

And so let's now listen for that event. 220

220

And then whenever it happens, we will then basically hide 221

221

and display the corresponding fields. 222

222

So that element that I just showed you, is this one. 223

223

So it is the form input type. 224

224

Alright, so form input type. 225

225

And so it's this one it's input type 226

226

and so that's listed for the change event on that one. 227

227

So, InputType.addEventListener. 228

228

So again it is called change, 229

229

and then let's move back actually to the HTML here, 230

230

just to see how the form is hidden. 231

231

And so you'll see that this here is the elevation field. 232

232

So you see input and then form, input, elevation. 233

233

And so that is exactly this one here. 234

234

So again, form input elevation. 235

235

So, that's the input elevation. 236

236

And so this is the element that we're gonna work with. 237

237

So that's actually right at here. 238

238

So input elevation but then the one 239

239

that actually has the hidden class and in this case, 240

240

the class is called form, row, hidden. 241

241

So let's copy that. 242

242

And so again, the element that has this hidden 243

243

class is essentially the closest div element 244

244

to this input field. 245

245

Or in other words, it is the closest parent 246

246

which also has this form, row, class. 247

247

And so what we're gonna do is to toggle this hidden class 248

248

both on the elevation gain and on the cadence 249

249

or the cadence, because these two rows here. 250

250

So, from these two, 251

251

there will only ever be one of them visible. 252

252

So, whenever this one is hidden 253

253

this one should be visible. 254

254

And when this one is hidden, 255

255

then this one should be visible. 256

256

And so what we can do is simply toggle 257

257

this hidden class here on both of them 258

258

whenever this change event happens. 259

259

So I just set a couple of different things 260

260

there at the same time. 261

261

So, the first thing that we need to do 262

262

is to select the closest parent with that form row. 263

263

And so for that, we use (indistinct) traversal 264

264

and the very handy, closest method. 265

265

And so here we can now specify the class name 266

266

or actually a selector. 267

267

So here we need a fully flesh selector 268

268

to select an element. 269

269

So basically remember the closest method 270

270

is like an inverse query selector. 271

271

So, it selects parents and not children. 272

272

All right, then we take the class list 273

273

and then we simply toggle this class here 274

274

and then we do the same on the input cadence. 275

275

So this one, and so by toggling the same class 276

276

on both of them, we make sure 277

277

that it's always one of them that's hidden 278

278

and the other one visible all right? 279

279

So, let's wait for it one more time 280

280

clicking somewhere, and so let's wait for it. 281

281

And yep, that works beautifully. 282

282

So, let's just add one here and indeed there it is. 283

283

Okay, so all of this works very nicely now 284

284

and the next step here would be 285

285

to actually take the data here 286

286

out of the form and then using that data 287

287

create an actual workout. 288

288

However, here in our code, 289

289

we are at a point where we need some structure 290

290

and we will also need a way of managing that work out data. 291

291

That is gonna come from this form. 292

292

So this data here will have to be stored somewhere. 293

293

And so again we need to think a little bit 294

294

about our code structure here 295

295

and about our code architecture. 296

296

And so that is gonna be exactly the topic 297

297

of the next video.