Jonas: Welcome back to the project.
And in this lecture, we're gonna set up
our first event listener to handle our input button.
So, the new things that you're gonna learn in this lecture
is how to set up event listeners
specifically for keypress events,
and you will also learn what the event object is
and how to use it.
But, let's start by cleaning up our code here,
because I wanna get rid of all of this,
because this was just to show you how everything works.
And, up here as well.
So let's delete this.
So, some code.
And I'll give it some structure here.
So this is the budget controller.
Give it some more space here.
The UI controller.
And then, finally,
let's say the global app controller.
All right.
So I'm gonna set up the event listener
for the input button right here in our controller,
because this is the central place where I want to decide,
so where I want to control what happens upon each event,
and then delegate these tasks to the other controllers.
Okay, and we already know
how to set up event listeners, right?
So, we first select an element,
and then attach it the event listener.
So we use the querySelector method.
So, document.querySelector,
and you remember that one, right?
And now we need to know the class
or the ID name of this button.
So in order to do that, let's check out our HTML file.
And then I will just try to grab the class name.
So we see that down here, we have the button, all right.
So this is the class that is attached to this button.
So I'm gonna copy it.
And, actually, we should probably
take a closer look at all this markup structure,
but I'm gonna leave that for later, okay.
So, for now, I'm just going to grab this class name here,
but later, we're going to look better at the structure
of this HTML file, so that we can better understand
our user interface, okay.
So let's move back here and paste it here.
So the add button, and this, remember,
is the class selector, because it is a class.
And since this is how we select with CSS,
remember, this is done the exact same way
after we select using the querySelector,
because it uses the same syntax as the CSS selectors.
Okay, and now all we need to do
is to use the addEventListener method, right?
And what we want is the click event,
and then the function that gets executed
as soon as the user clicks on the button.
All right.
So, just to test this, let's create a console.log here.
So, button was clicked.
And let's check this out.
So, reload.
And, clicking the button, all right.
So, button was clicked.
So it works.
Event handler is properly set up.
All right.
So this was just a test.
Now, of course, we cannot yet write the code in here,
but we can write what we want to happen here later,
so we can, basically, create a to-do list in here,
which is basically the to-do list
that we did in the planning lecture.
So, as soon as someone hits the button,
we first need to get the input data, right?
So, get the field input data.
Okay, after that, we need to add the item
to the budget controller.
So, here, we're basically creating a recipe
for what we're gonna do next.
Then, we need to add the new item
to the user interface as well.
We need to calculate the budget.
And we also need to display the budget
on the user interface.
All right.
And let's create some space here.
So this is what we're going to do
as soon as someone hits the button, right?
So we get the input data.
We then add the item to the budget controller,
to the user interface, and then we calculate this budget
and display them.
So, over the next lectures, we're going to focus on that,
but for now, there's one more thing that we need to do,
because we not only want all of this here
to happen when someone hits the button, but also,
when someone hits the return key, so, the enter key.
So, let's see this.
So imagine that
someone writes something in here, let's say, project.
Then a value here, and then instead
of hitting this button here, hits the return key.
So in this case, we also want all of that to happen.
We also want to get the input data,
we want to add the item to the user interface,
and to the controller, and all of that.
So it should be the exact same thing.
So, not only the click event, but also a keypress event.
And this is something new, so we did never
use the keypress event, so let's now do that.
So we need another event listener here.
But now we're gonna do it in a slightly different way.
We're not going to select anything.
We will just add this event listener to the global document.
Okay?
So, just like this,
document, and then, addEventListener.
And that's because this keypress event
doesn't happen on any specific element,
but it happens on the global web page,
so on the global document, anywhere in the document.
Right?
Now, there are actually more than one type of event
that handles when someone presses a key.
So let's look at the event reference
that I have already open here, okay.
So this is the reference for all the JavaScript events,
or the DOM events, and you can find this
on my resources page as well.
But now, I already have it here open.
And so, here, we see the keyboard events,
and there are actually three.
So, keydown is when we start pressing the key,
so any keys pressed.
And then, the keypress event is when the key
is already in the pressed position,
and then the keyup event is after we release the key.
So, for us, there is no need
to use the keydown or keyup events.
We're simply going to use the
more common keypress event here, okay?
And, remember, this is when any key is pressed,
not just the enter or the return key,
but this is for any key, right?
So we'll need to talk about that in a second.
But first, let's use the keypress event here.
So, keypress.
And then, again, our function.
Like this, okay.
Now, we actually only want to execute some code
when the user hits the return key, right?
Not just some random key on the keyboard.
So, how are we going to do that?
And the key to this is that this function here
that is passed into the event listener
can receive an argument, which is the event argument.
And this is something that we have not been,
up until this point,
so we've been using this function here,
this anonymous function, in this case,
all the time without any parameters.
But now we're gonna use it for the first time,
and I'm gonna call it event.
And actually, we can use any name for this that we want,
and then use it in our event listener function.
But I'm just going to do it event here.
Another popular name that developers use
is simply e, like this, but I'm going to go with event,
so that we are sure what this means.
So, this automatically gets passed
into our event handler by the browser,
and there's nothing we have to do,
so we just need to specify it here,
and then we can use it.
And just to see what this event object actually is,
let's start by logging it into the console.
So, console.log,
event.
And remember, this is going to happen
when we press any key, so not just the return key.
So, take a look at the console,
and I'm going to hit a button now.
All right, and here we have a keyword event.
So this is simply an object, as we can see,
with a lot of properties.
And it has a prototype, so just for the sake of curiosity,
let's take a look at that.
So, a keyword event is the prototype,
and this one has also a prototype, which is in the UI event.
So this means that the keyword event
is a UI, in the user interface, event.
And this one is also a prototype, which is an event,
and this one is also a prototype, the object.
And that's it, so we know that the object
is usually the last one in a prototype chain, right?
So we can use all of this here
with the keyboard event, right?
And you know that already, because of the prototype chain.
But right now, I want you to focus on something else,
which is this keyCode property here.
So here, you see a keycode and a number,
and this number is what identifies
the key that we pressed, so right now,
I pressed a key, and the keycode is 107.
But a different key will have another one.
So let me press now another key.
So I'm going to press the space key now.
Actually, it has to be here in the document.
So, I press the space button.
And this time, the key code is 32.
And now, I'm going to press the return key.
Again, it has to be here.
So, the enter key, and now the keycode is 13.
So this keycode here is what we're gonna use
to say that we only want something to happen
when this keycode was pressed.
So, in this case, that the enter key was pressed.
And in case that you ever need the keycode for another key,
I have this cool reference here,
which you can also find on the resource pages,
and in here, if we hit some button here,
then we have the keycode.
So, again, the enter key is 13,
the space is 32, and this happens on any other key here.
Okay?
So, just a cool reference.
So let's now go back and use this knowledge, okay.
So what we're going to do is,
as you can probably guess, an if statement.
So we're going to use the event,
and then they keyCode property.
And we say that it should be 13.
And if it's 13, so, if it's the return key,
then let's log to the console
that enter was pressed.
Now, some older browsers,
they don't use this keyCode property here.
They use another property called which,
and so, it's a good practice to use that as well,
and so we're simply going to use an or operator here,
and say, event.which,
13.
So, if the keycode is 13 or the which property is 13,
then this happens.
So, again, this is for more older browsers,
or other browsers that simply don't have
this keyCode property, and in this case, we're also safe,
because then we have this part here.
So let's now test this.
So I'm refreshing.
And now, I'm hitting some random keys here.
As you can hear, probably.
And nothing happens in the console, right.
And now I'm going to hit the enter key.
Okay.
Enter was pressed.
So, this works.
Now, what do we want to happen here?
Because we don't want to console.log, of course.
But we want something to happen.
Which is, as you can guess, the exact same thing
what we want to happen when someone hits the input button.
So we could copy this code
that we're later gonna write here and paste it here.
But, as you probably know,
this doesn't make any sense at all,
because that would completely disrespect
the DRY, the don't repeat yourself, principle.
So, the solution is, once again, to write a custom function.
So let's do that up here.
And I'm going to call this one the ctrlAddItem function.
So, var,
ctrlAddItem,
and I'm going to prepend this control here
to this function name, because there may be
functions with similar names in the other controllers,
and I wanna be able to distinguish them.
So I am already planning with that, okay?
So, a function
which simply will do all of this here.
So this is not real code, of course,
but this will then be where we specify all of this actions.
So now, what we're doing here
is to simply call this function,
so in case that someone hits the return key,
we want to call the ctrlAddItem function.
And that's it.
And now, here, the same thing.
So I'm going to remove this from here,
so we no longer want the anonymous function here,
but we actually want to pass
the ctrlAddItem function in here.
And we already did that before,
actually, in our other project.
So it doesn't have to be an anonymous function.
We can simply pass a function that we have,
a standalone function, pass it here
into the addEventListener method.
And, again, we're not going to call it here,
so we don't need this call operator,
because this is a callback, and so,
the addEventListener method will call it for us
when needed, so, when necessary,
so when someone clicks the button.
So, just to finally test this,
let's log something to the console here.
Doesn't matter here, so, it works.
And, all right.
So I'm going to hit the space key,
nothing happens, and now, the return key.
So it works, and now, I'm going to hit this key here,
sorry, this button here, and so it should appear again.
And, yes.
Here it is, so it works.
All right.
So now we're all set up to start adding some code
to our event listeners.
So let's do that in the next lecture.