isLetter Function

[00:00:00]
>> Some tips and tricks, I think I said this in the last time but please solve one problem at a time. It's very hard to solve big problems, it's very easy to solve very small problems. So just make a bunch of very small problems for you. That is half of what coding is, it's just taking big problems and dividing it into smaller problems.

[00:00:18]
I tend to do the HTML and CSS first but you don't have to. But I would go something like, make sure the user's able to guess six times, then maybe add detection for correct guesses. Maybe add correct highlighting, then maybe add the odd or the yellows or something like that.

[00:00:40]
I definitely didn't show you all the JavaScript methods that you're gonna need to be able to do this. I'm relying on you that you're gonna have to google some of these things. That's just coding in general, you have to google a lot of things. Please, google a lot of things.

[00:00:53]
A lot of this course is just learning how to answer your own questions. I added some animations. Do animations definitely all the way last, that's the least important part of this. I would just start with alert win, or alert lose, and just start from there. And then the one thing that I did wanna show you, this is gonna help you with if the user is typing in letters or not.

[00:01:21]
So, for example here, if I click on this, if I hit F, right, and I can also backspace as well, right? But if I hit four, right, there's no words that have numbers in them. So, right now I'm just ignoring numbers or exclamation points or anything like that.

[00:01:38]
So I'm detecting is the user trying to input a letter or not. I'm gonna show you really quick just how to do that. I actually wrote the function for you because I really didn't wanna talk about regular expressions in this class. So this function here, just copy this and paste it directly into your code.

[00:01:59]
This will tell you is this a letter or not. So, let's just take a look at this. We'll go into the console, clear here. All right, so now I have this function called is letter. And if I give it just an a, a letter? Yes, is capital A a letter?

[00:02:23]
Yes, is exclamation point a letter? No, is aaaa a letter? No, because it's multiple letters. I'm looking for specifically four single letters, right? So that's what this function does, is it just tells you isLetter, is this a single alphanumeric letter? And I intentionally left out things like umlauts, and circumflexes, and accents just to keep it really simple for you.

[00:02:56]
So for example, if I give it like an umlaut here, it's still gonna say no. Again, they are valid letters. I'm not saying anything about anyone's language but for the purpose of this class, I'm trying to just limit it to the 26 letters uppercase and lowercase. Okay. So, I know some of you are curious about what the hell is this.

[00:03:24]
I don't really wanna spend a ton of time on it, but I'll give you just a super high level explanation. It's called a regular expression and basically you can define patterns and then you can say, does this match this sort of pattern? This actually goes through here in depth if you really wanna figure out what this does.

[00:03:43]
But the general gist is it's gonna say, is this one letter, which is what this is. So, the two slashes here denote that it is a regular expression. This is asking with this circumflex and the $ sign is that both the beginning and the end of the word which means is it's one letter.

[00:04:03]
And then it's asking, does it fall in the range of either a to z or capital A to capital Z? That's it, that's what this regular expression does you can make regular expressions do all sorts of wild things. This one just checks to see if it's a letter.

[00:04:18]
And this will go into that. If you're more curious than that, this steps through everything about what that actually does. So, use this function to determine if a user has entered some sort of key or if they haven't. Right, so I do that here, actually I showed you.

[00:04:41]
So, I can type in here letters but I can't type in numbers, right? So I do that here. This event.prevent default basically means that whatever this was trying to do, stop it, right? So they were trying to type in this, so don't let them. So if it's not a letter, which is what this exclamation point means.

[00:05:02]
So another way of thinking that is, if this is triple equal to false, Then prevent default here. That's what that's doing. It actually won't even let you backspace cuz the backspace isn't actually a character, right? It won't let you hit Enter, this will only accept key. So you actually do you have to be a little bit more intelligent than asking if it's a letter or not.

[00:05:27]
Because backspace is allowed if they're trying to delete something, and if they hit Enter, they expect it to try and guess, right? I say that right there, this will even prevent backspace and enter.