Jonas: All right, so let's now render the workout
input form whenever the user clicks on the map.
And so just to make sure
that we're still all on the same page
right now we basically have an arrow
pointing from here when the user clicks on the map
to render a workout on the map,
which essentially is the marker that we put on the map
in the last video.
So right now, when the map is clicked here
then a marker appears on the map.
But right now what we actually want
in that event handler that we set up in the last video
is to render the form so that a new workout can be added.
And then on that form, we will add an EventListener
so that whenever that form is submitted
only then the marker is rendered on the map.
And so we will basically move this rendering
of the marker to right here.
Okay, so, let's take a look at our Index.HTML.
And so the form that I'm talking about it's this one here.
So, this form element here with the class form
is the one that we want to render now.
And as before I actually already selected it
and it is this one here simply called form.
Let's take a look here again
and you'll see that right now, it has the hidden class.
And so one more time,
we are going to do that manipulation here
by adding and removing classes.
And in this case it is our old friend,
basically the hidden class.
So, let's do what I just set, which is that when a click
on the map happens, then we want to show the form.
And so not this, and so let's get,
for now let's actually get rid of all this,
so I will comment it and later we will need it.
And the same actually for this one.
And so all we want to do now is to take the form
.ClassList.remove, and then remove the class of hidden.
So let's see, and this is our demo.
This is the real one.
And as I click here then edit the form here
showed up on the left side.
And now one cool thing that we can do
for a better user experience is to immediately focus
on this field here.
So that's also what happens when we click on the map here.
So you see that right away, the cursor is blinking there.
And so that's actually relatively easy.
So all we need is for this input element here
of the distance.
And again, I actually already selected all of the inputs
and so that's InputDistance
and we can simply say InputDistance.
So, not that one, but this one.
And then on that we can call the focus method.
And that's actually it very simple
but for user experience, it's a lot better
because we can then immediately start typing like this.
And now let's add an event handler
to this form for submitting it.
And for now we are not gonna care at all
about the data here.
All we want is whenever this form is submitted
that a marker then appears on the page
and exactly at the place that was previously clicked.
And notice, that we actually don't even have
any submit button here.
So there's no button to submit this form to make it smaller.
But remember that whenever we hit the Enter key
on any of these fields in a form
then that will actually also trigger
the submit event on that form.
And so that's what we're gonna make use of now.
And so let's now add that EventListener.
And so that of course, we will do outside of all of this.
So we will not have an EventListener
inside an EventListener right?
And also this has nothing to do with the geolocation.
And so let's do that completely separate out here.
So, that's form.addeventlistener.
And then as I just explained,
we are gonna listen for submit.
And so this is the one that will then display the marker.
So, that's right at here.
Okay, and so let's get this code here and paste it here.
And of course getting rid of the comments,
and maybe you're starting to notice
that we have not only one, but two problems here actually.
So, right now we are trying to use two variables
that do not exist in the current scope.
So, we are trying to access map and also map event right?
Now this map here is easy to fix.
So that map is this variable here right?
So it is defined inside of the callback function
of the geolocation API solve this, get current position
but all you have to do is to basically create a global
variable here like this.
So this one, I'm gonna call map.
And so here we then simply reassign that map
to the already existing variable.
And now for map event,
we actually have to do the exact same thing.
All right, so this map event, we get access to it
in this event handler that we set up previously.
So, that's right here.
Let's just add a comment here, handling clicks on map
and don't worry, we are gonna fix this entire code here.
So this whole mess that we have been building
now very soon actually, so handling
because yeah, right now it is all a little bit messy
but that's exactly what I was saying
in the beginning of the section,
so that we will simply start coding
without caring for now about the architecture.
So, without the structure of the codes
but very soon we should actually start to think a little bit
about this, to organize this code.
But anyway, it is inside of this event handler
that we get access to the map event.
So to that object, which will contain the coordinates
however, we don't really need it here right?
So here we are only displaying the form
but where we need it is then later
when that form is actually submitted.
And so basically as a way of passing it here,
we will simply also define the map event
as a global variable too.
So let me here create also map event.
And then here we will...
Well, we will have to change the name here.
So let's just call it map E
because usually I only call events simply E
and so let's now say map event, so, this one here
which is the global variable, should be equal to map E.
So again, we did this one here
because we don't need this map event
right here in this function.
Which is a place where we get access to it.
And so we basically copy it to a global variable
and then here, where we do actually need it.
We will get access to the global variable
and can then use the latitude and longitude
right here in this function.
And so this will already work at this point.
So let's wait for the map to load, there it is.
I will click here in the middle of the city
and then again, we don't need to care about the data at all.
So I will just hit the Enter key.
And then maybe for a second, you saw it appearing down here
but then immediately the page reloaded.
And so the reason for that
is because the default behavior of forms
is doing exactly that.
And so once again, we actually need the event here
and then we need to call event.preventdefault.
And so that should now fix it.
And so let me click here again
I will just hit Enter and there it is.
So now basically the marker appears here in two steps.
First, the form is displayed.
And then when we submit that form,
finally, the marker is then rendered here on the map.
All right, cool, let's try another one here.
Let's just put some values here,
but indeed that works now.
Now this form here is far from complete.
For example, all the values here should be cleared
and also the form should disappear
after we inputted something.
But, well, let's take care actually of the first one now.
So clearing all the input fields, but then about the hiding
of the form, let's actually do that a little bit later.
All right, so, let's take all the values.
So that's input, distance, duration and cadence or cadence.
I'm not sure about that one.
So these three are these three fields.
Okay, but then we also have the elevation gain for cycling.
And so that's another input,
and so we need to clear all of them.
even though this one here is not yet visible
but actually we will take care of that
right after doing this one.
So let's take these four inputs and clear them,
and then I will actually show you
how we can display this one.
So, let's do that here.
Clear, input, fields.
And so that's input distance
as we can say it equal to the empty string
and then we can actually put them
all equal at the same time.
So, input, let's say duration
then this one, and then finally the elevation as well.
So, just to test that and to show you,
the next step here as well.
So when we click, let's just put some random values here.
Oh, and now we get an error here.
So assignment to constant variable
and a good thing that this is happening
because I already remembered the mistake that I made.
And so that is forgetting the value here.
So of course we don't want to clear
the entire element right?
We just want to clear the value.
So this is one that I keep forgetting.
I think this wasn't the first time for some reason.
All right, but that actually works.
And so now finally, what I want to do
is whenever we click on cycling here
then this cadence or cadence should change to elevation.
So, watch what happens here in the demo when I cycling,
then both of these changed.
And if I click again, then that changes back
and that is actually easier to do than you might think
because there is actually an event which is triggered
whenever we change the value of this select element.
And so let's now listen for that event.
And then whenever it happens, we will then basically hide
and display the corresponding fields.
So that element that I just showed you, is this one.
So it is the form input type.
Alright, so form input type.
And so it's this one it's input type
and so that's listed for the change event on that one.
So, InputType.addEventListener.
So again it is called change,
and then let's move back actually to the HTML here,
just to see how the form is hidden.
And so you'll see that this here is the elevation field.
So you see input and then form, input, elevation.
And so that is exactly this one here.
So again, form input elevation.
So, that's the input elevation.
And so this is the element that we're gonna work with.
So that's actually right at here.
So input elevation but then the one
that actually has the hidden class and in this case,
the class is called form, row, hidden.
So let's copy that.
And so again, the element that has this hidden
class is essentially the closest div element
to this input field.
Or in other words, it is the closest parent
which also has this form, row, class.
And so what we're gonna do is to toggle this hidden class
both on the elevation gain and on the cadence
or the cadence, because these two rows here.
So, from these two,
there will only ever be one of them visible.
So, whenever this one is hidden
this one should be visible.
And when this one is hidden,
then this one should be visible.
And so what we can do is simply toggle
this hidden class here on both of them
whenever this change event happens.
So I just set a couple of different things
there at the same time.
So, the first thing that we need to do
is to select the closest parent with that form row.
And so for that, we use (indistinct) traversal
and the very handy, closest method.
And so here we can now specify the class name
or actually a selector.
So here we need a fully flesh selector
to select an element.
So basically remember the closest method
is like an inverse query selector.
So, it selects parents and not children.
All right, then we take the class list
and then we simply toggle this class here
and then we do the same on the input cadence.
So this one, and so by toggling the same class
on both of them, we make sure
that it's always one of them that's hidden
and the other one visible all right?
So, let's wait for it one more time
clicking somewhere, and so let's wait for it.
And yep, that works beautifully.
So, let's just add one here and indeed there it is.
Okay, so all of this works very nicely now
and the next step here would be
to actually take the data here
out of the form and then using that data
create an actual workout.
However, here in our code,
we are at a point where we need some structure
and we will also need a way of managing that work out data.
That is gonna come from this form.
So this data here will have to be stored somewhere.
And so again we need to think a little bit
about our code structure here
and about our code architecture.
And so that is gonna be exactly the topic
of the next video.