Make a Wordle Clone with React #5 - Submitting Guesses

Key Takeaways

okay then so now when a user is typing we can see that we're tracking the current guess and we can delete letters and the maximum length of a word is gonna be five characters if i try to add more then we can't add more characters okay so this is all working but what we want to do now is when a user types in a word it's five characters long and they press enter we want to submit that guess and handle that guess and check it so we're gonna handle that key press that enter key press in this lesson all right so where do we put this logic well it's still going to go inside the handle key up function because remember this fires every time a user hits a key on the keyboard and the enter key to submit a guess is a key on the keyboard so we're going to handle this scenario inside this function and what we need to do is a little of check to see if the key is triple equal to enter all right because if that's the case it means they want to submit a guess now under what conditions do we want to submit the guess well we only want to add the guess if first of all the turn is less than five because if the turn is at five it means they've had already as many guesses as they're allowed and the game is over okay so that's the first condition so let me do a comment to say only add guess if turn is less than five right that's the first condition now the second condition is that they've not already submitted that word in the past so i'm going to do another comment here to say do not allow duplicate words all right so if in the past i've added the word ninja as a guess then ultimately what we're going to do is add that to the guesses and also the history as a string so we could potentially check that history to see has this word been added in the past by the user and if it has then we don't allow them to guess the same word because that would be a waste of a guess okay and the third condition is that the word must be five characters long if they've typed three characters in the word and press enter then we don't want to submit that word it has to be five characters long so we'll say here check word is five cars long all right so let's handle one of these conditions at the top first of all only add the guess if the turn is less than five all right so we can say if turn which is the bit of state oops that needs to go inside parentheses that's this piece of state right here if the turn is less than five then we want to do something okay now i'm going to do all the checks first of all then i'll come back and fill out these things so the next if check is going to be if history dot includes and then we pass in the current guess so let me explain this so what i'm saying is take the history which is a bit of state right here now at the minute there's nothing in the history but we could add in a couple of words here if we wanted to so i could add in hello i could add in ninja and they could be fake past guesses right now if i try to submit a guess which is hello or ninja then this right here is gonna be true because we're saying look at the history and see if it includes the current guess i remember the current guess is what we're tracking when the user types and if that's ninja then the history does include this and it's going to be true and in this case we're not going to add that word either okay so the final check is gonna be to see if the word is five characters long so we'll just say if and then in parentheses we'll say current guess dot length is not equal to five so if it's not equal to five then this if block is going to fire so let's go back to the top if the turn is oh it should be greater than five okay um so if the turn is greater than five then we don't want to carry on with the submission of the guess so what i'm going to do is log something to the console i'll just say you used all your guesses and then what i'm going to do is just return and that's it and that means that we're not going to carry on with the rest of the code in here we're not going to submit the guess we're just going to return because the turn is greater than five they're not allowed any more turns so we just return okay the second one if the history includes the current guess well we're not going to allow that either so let's do another console log say console.log and we'll say you already tried that word and then again we'll just return right here okay so if they try to add a duplicate word then we're just going to return we're not going to carry on with the submission and we see this message in the console and finally if the current guess length is not equal to five we'll do another console log and this is going to say something like word must be five cars long and then again we'll return so if any of these conditions are true we are not going to submit the guess however if none of them are true then it's going to skip past each of these if checks and then at the end what we want to do is we want to take the guess the current guess and what we're going to do is call the format guess function now remember that's this function right here we don't need to pass in the current guess as an argument like this because the current guess is stored in the state already so we can access it inside the format guess function without passing it in right here so i'm just going to call the function and we only call this function if all of these conditions kind of are bypassed okay so up here what i'm going to do is just log to the console so console.log and we'll say formatting the guess and then we'll do a hyphen and then we'll just output the current guess current guess like so so this is only going to appear in the console like i said if the guess is valid if none of these are fired okay so let's save this and try it out in the browser all right so in a browser i've got the console open and i'm just going to try a guess which is valid to begin with so brave five letters long it's not in the history press enter and we can see formatting the guess brave so that format guest function did run because all of those conditions whereby the guess is not valid kind of passed right and if i delete this now and try something else for example bra then we see word must be five characters long so it's not letting us submit anything that's less than five characters all right cool so what about if we try one of the words which we manually added to the history like ninja so let me press enter on that and it says you already tried that word so let's delete that one and try the other one we added to the history which was hello and again we see you already tried that word so this is working it's not submitting the word if you like it's not calling that format get function if one of those conditions are met so if the word is not five characters long it won't submit and also if the word is already in the history now the other condition was whether the turn was greater than five now we can't test that at the minute because there's nothing in our application code that's increasing the value of the turn yet but that will come later and we'll see that log to the console later on okay for now pretty much all of this functionality is in place so now in the next lesson what we need to do is go ahead and start fleshing out that format guess function