Project JavaScript: Event Listener

[00:00:00]
>> The first thing I'm gonna do is I'm just gonna go query the DOM for all of the things that I know I'm definitely gonna need. I'm gonna need all of the letters for sure so I'm gonna say const letters equals document.query selector all. And I'm gonna ask for .scoreboard-letter.

[00:00:25]
So, if I just say console.logletters, and I come back over here and refresh and I open this into the console. I now have a node list, which is a array like right? It's not quite an array but for all intensive purposes it's very array like. I have all of the letters here, in an array like thing, but what's important here is that they're in order, right?

[00:00:58]
Which is important now because if I have to modify the zero a thing, I can just go modify this one and I know exactly which one I'm modifying. So that's gonna become important with my approach to this later. Again, I'm doing my approach, you could have done this a totally different way.

[00:01:14]
And then I'm going to grab the loading div as well because I'll have to hide and show that as well. You could do get element by ID or query selector up to you, query selector will do that. .info-bar like that, which is this info-bar appears this loading indicator, okay?

[00:01:50]
So what can we do first? What would I do first? I might grab the word of the day first. Or you could work on typing. Maybe we work on typing, that might be a good thing. Let's do that. Okay, as you can see there's tons of ways that we could do this, so I'm gonna make an async function called init.

[00:02:25]
And then I'm going to call init down here. Part of the reason why I'm doing it this way is now inside of my init function, I can do await wherever I want, which is nice. Okay. So let's do our event listener here, I'm going to document getElement, sorry, document.addEventListener.

[00:03:05]
We're gonna listen for a keydown. We're gonna listen for keydown because we wanna catch backspace and enter, which I think doesn't activate on key press. Some of it's a little finicky on which one will fire on which event. But I remember that keydown is one that I'm looking for.

[00:03:26]
I'm gonna write a function here just it takes an event. In my notes here actually named this function which is optional by the way. I call it handleKeyPress. Why would I name this? The only reason is like when there's an error and that you see like the whole stack trace that it prints out into your console, it'll print the name of whatever's here.

[00:03:52]
If I don't have this, it'll just say anonymous function. But if I have this, it'll say handleKeyPress. It helps me debug code later stuff breaks. So, the name here is optional, it could just totally be an anonymous function which would be totally fine. And then the first thing I'm looking for here is const.

[00:04:16]
Action = event.key. And then let's just take a look at what that is. Refresh the page. So if I start typing in here, you can see I'm getting all the letters that the person is typing. If I hit Enter, I get enter. If I hit Backspace, I get backspace.

[00:04:43]
All the things. I can do, dog, it's up to what I'm actually typing anything so it doesn't know what to do about that. You can see that if I hold it, it's gonna give me many events, right? So this was 74 key presses of F just because I held it down.

[00:05:05]
That spacebar plus all the things, okay, good so far Now I'm gonna make this just delegate to other functions, right? Because I want to keep my event listener kind of simple. So I'm gonna say, if action triple equals enter, then we'll make some function here that'll handle that, right?

[00:05:40]
I called this commit, don't do that. And we'll go write a function called commit. But this is basically the users trying to commit a guess, right? They're trying to guess something, okay? Else if, by the way, you could totally use a switch statement here, would be totally valid.

[00:06:06]
If action is triple equal to backspace, they're trying to do, erase something. So, we'll call some backspace function, that we go right. I find that I do this very often. I kind of write skeleton code, is like, okay, I know I have to have some function that does this.

[00:06:24]
And so I kind of treat commit like a black box, right? Like I'm trying to do something and then later I'll go make it do the thing that I told myself I'll do. But I'll write the skeleton of the code first to kind of lay myself out. Basically, I'm relying on future Brian to fix past Brian's problems.

[00:06:46]
And then here, remember that is letter function I showed you before we got started, we're gonna use that here. Otherwise if this is a letter. Then we're going to go do add letter, with action.toUppercase Remember here, like if we look here at the correct word, all right, the one that I have up here, everything is in uppercase, even if I do lowercase or uppercase, right?

[00:07:21]
Everything's uppercase, so I'm just gonna call this right here. So everything that I'm dealing with is uppercase. That's just a good advice for you. Just pick a lane, make everything lowercase, make everything uppercase, and then just be consistent. Okay, if it's not enter, if it's not backspace, and if it's not a letter, it's like a symbol, it's a number, it's a space bar, it's an arrow key, what do we do?

[00:07:55]
Ignore it, right? Like if you do spacebar on this, let's do, what would you expect it to do it just doesn't do anything, right? It just ignores it. So, that's we're gonna do. Do nothing. Now, you could say, do I have to for that else do nothing? No, you could just leave it off.

[00:08:24]
You can make it implicit. I'd like to put it in there and put this do nothing in there, so I'm very explicitly telling future person reading my code. I know that I did not put an else here and I am expecting it to do nothing.
>> Is that the same thing as return?

[00:08:40]
>> No, so this is just a comment, right? I'm just leaving a comment. This can be anything, right? I'm leaving a future comment for someone just saying, I mean, this block does nothing, this entire if statement does nothing. If I put like for example, return right here, it actually, you can see this actually grayed out my code there, right?

[00:09:05]
It's because this ends now, right? None of this code gets run, if I put return here and I had something underneath it, it would not run the code underneath it. That makes sense? Yeah, good question. So you only want to put return there when you're explicitly trying to short circuit and exit early.

[00:09:27]
Now, I'm actually not gonna put any code underneath this because I don't need to do anything else. So, implicitly there's a term return here at the end. Or which would essentially do a return undefined, right? Because if you don't return anything, then return it undefined. But we don't need that.

[00:09:44]
We can leave that implicit. Okay, good so far? So now we have to just go and do commit, and backspace, and isLetter, and addLetter. We have to go do all of these things, right? But we now have a skeleton of how we expect our code to work. Another piece of advice I'm just gonna give you right now is like, I try not to do very much in these event listeners.

[00:10:14]
I try to just delegate things out. So that's just kind of a good habit to get into.