Welcome back, my friends.
Come to another lecture where we are going to build our logic when some of the buttons are clicked.
So are we going to add a couple of events, listeners?
So first is to create some comments here and I'm going to say calories module controller.
And the second one will be the app.
You are modules controller and the last one, the controller will be our main hub controller.
Main module controller.
Very good.
Now I do have this three controllers.
So what I'm trying to say is when I click this button here, I want something to happen.
Right.
And that is we can add event listener.
So if you go back to your where it is disclosers, if you go back to the index, it should be here.
This button show actual form and in this is the name of the button.
But what I will do, because you already know, we discussed about the layout here, the markup, what
I will do in future, I will just go here and I will respect the element here and I will grab it.
So this is actually the the the the AI class.
This is the font awesome icon.
But I actually am interested in this part here.
This is show form activity in class and we're going to use the query where we select.
So what I'm going to do is I'm going to see document not query selector and I'm going to say dot show
for it and I'm going to attach event listener so it will be unclick and we will have a function.
Remember that this function can happen.
Arguments in that arguments can be events.
So I'm going to say e here right now, what we will do is actually when we see when we hit this when
we hit this button.
I just want something here, and there are a lot of I'm annoyed by all of these things.
All right.
So I just want when this is clicked in future, I want to grab all of the information in storage.
Right.
Regarding maybe it's for food or for exercise one on this button to have that event.
So I'm just going to say comes along and I'm going to store it.
So what I'm going to say here, it's BGN clicked, right.
So let's see if it's going to work.
It is beedi enclaved, so if I hit twice, it will be beedi and clicked twice.
Now look what will happen.
I will add food here and the quantity and 150 calories.
So when I eat now enter.
I don't want this to happen.
Why it's happening because this is a form and it's submitting it right.
So these event last time we say to either prevent default so it will prevent the default or default
action on the form and that is actually the submitting.
So it will prevent to the form to be submitted somewhere.
So let's save it now and let's test it out again.
I'm just going to remove these jibberish from up here and I'm just going to say food.
I don't know.
Food doesn't matter what we write.
I just don't want this form to be submitted.
Here is I just want to grab this blank clicked.
Right.
We can if we use allured, it will stop the window for a second from submitting.
But after that, when we close, let me just show you, this is something that probably I haven't shown
yet.
So we can see alert here and here and click.
And this will give us a pop up window.
Right.
So the form again, we will fill the form food.
One hundred and fifty and I will enter now BTD click there.
Look what will happen here after I click.
Because I don't do I'm not preventing the default action of the form and that is submitting somewhere
it will submit right.
There it is.
That is why you prevent default.
Right.
That's what we can do.
OK, now one more thing that I want to show you is that we need to use another event listener.
But this event listener, we're not going to attach to some button here.
Right, because sometimes the people feel here for one, some mentoring tap, actually tap 150 calories
and hit, enter or return.
And when they do this now, the button will be clicked.
Right.
But I want this to happen on specific keko, so how we can do this.
So I'm going to say document dot, event listener and look what I'm doing here.
I'm going to say keep.
Not kidding.
We have a couple of things, but we are going to be concerned about key prayers in here, I'm going
to pass in the function with an argument of E. just like death.
And I'm going to close this one from here now.
So how we will know which key from the keyboard is pressed.
And I'm not attaching to any or I'm not doing any query selector.
I'm not attaching to any buttons I'm attaching to the entire document object.
So what I'm can do, I can see a log in.
I can cancel the event.
Right.
So what we will try to see now is when I start typing Irrealis, I type as the Yulieski as the P, for
example, enter.
OK, now this is a keyboard event and the button is click.
Actually it's it's going there but don't worry about it.
So the key is enter.
But this is actually an object.
And from this object, what we can grab is this key code because every prest keyboard element like this
D has different key code right.
In these.
Checo is one hundred from here.
Now in future, when you watch this lecture, they're not going to change probably the key codes, but
you need if you want to use, for example, instead of pressing enter or return key, if you want to
use some other key, for example, for submitting of the form, you can just go here and grab this key
code.
Right now.
What I would do want is I want for the enter and the enter key code is the number 13.
Right, so I can do something interesting about it.
So I just want this form with these values to be submitted when I hit enter, but not when I hit space
or when I hit, I don't know, backspace or P, for example.
But you can do it as well.
So what I can do here, I'm just going to commandeers.
Actually, I'm not going to comment.
I'm going to use it.
So I'm going to say e that key code, if that is equal to what does the number 13.
So this is for enter.
I'm going to say, OK.
Here we can see enter is clicked now let's see space, this one a little bit more.
Save it.
Let's go down here like that.
Yeah, so I'm going to add so I don't see the Nike coats now.
I don't see the key keyboard event, their food one Ellery's in a head space.
Nothing happened when I hit enter.
So enter is clicked.
Right.
That is what is happening.
The enter is click in that.
Well it's what we want also here we can use, we can use here because it's a meeting somewhere what
we can say died prevent default.
And now I'm just going to say food.
One hundred and fifty calories.
Enter, enter is click.
This button is clicked.
Right.
How cool is this video.
This click enter is clicked.
That is the beauty with no what.
Basically one is these two event listeners to have the same body here.
I mean what we are going to write the function here for adding a calories.
I want the same function to go here as well.
So if I add content here, I don't want to repeat the same content here because these two actually will
do the same job is actually to submit the form somewhere.
Now, how we can just get rid of that cold repetition?
Well, that is pretty much easy.
We can create a function here outside and that function, we can name it at calories and we will use
it later.
So I'm just going to create for add calories.
It will be a function, right.
And I'm going to close this function here and let's say console mark and calories function.
It's called No, what we can do here is that we can call add calories function, we can call it even
here, we can just get rid of this part in college of calories function.
But for sake of like the structure, for sake of having this structure and I'm just going to comment
these two here because I don't need it now.
I'm just going to call that function here.
And what we have in this function, it will be one code and that code will be borrowed by these to add
event listeners.
So let's see if it's going to work.
Now, I'm just going to first I'm going to talk it.
I'm going to say hamburger.
One hundred and fifty and I'm going to hit enter.
Right.
And I'm going to hit again this button.
So the function is called twice.
So mean is working.
And in future, we're going to update these add calories with our own logic.
Right.
So we will see what we will do inside.
But don't worry about it.
Now you know how to grab this, the how to write event listeners.
We already have done this.
And also about key press.
The main point of the key press is to find the key code.
And based on that key code, you can add calories.
In the past they used which so some of the browser, they don't support the key codes and they use,
I think e which and after that the rest is history.
So you can do it like that each.
And but we're not going to do it because most of the modern browser now supports this key code.
And if they don't let me know, I just will let you know how you can write it down.
So thank you very much.
I think we're done here in.
Yeah, we have.
We will just need to write some comments here.
So if event listener for at the end of the forum.
Very good now.
Event listener for when when user hit, enter or return key, and we are calling the calories
function
function like that.
So that is pretty much it.
You what you can do, you can get rid of these bad boys here and you can get rid of this because you
don't need it.
And yeah, that's pretty much it.
Now our application is getting somewhere, so we start working on our application and next lecture we
will work on add calories in what we will do in the in that in this function.
So thank you very much.
I hope you enjoyed this lecture and I will see you in the next one.