Make a Wordle Clone with React #13 - Making a Keypad

Key Takeaways

so then my friends we've come a pretty long way now we've implemented a lot of the game logic and we've also added a couple of nice animations as well next up i want to make a little keypad that's going to sit below the grid and that's going to show us what letters we've used and which ones have matched so far so they're going to be color coordinated just like the tiles on the rows up here if you take a look at the official game site you can see how it looks at the bottom after a few guesses so initially all the tiles are a very light gray color but then as you make guesses any exact matches become green and any partial matches become yellow also any letter that you've used that doesn't match go dark gray so it's just another way to visualize what letters we've used so far in the game really and in this lesson we're going to start this process by just initially making the keypad at the bottom so the first thing i'm going to do is to create a keypad components so new file inside the components folder call this keypad dot js and then inside here we'll say rfc and tab to create a react functional components now the first thing i want to do is create some state for the letters themselves that we're going to output on the screen and we need a function to update these as well called set letters because we do need to update them in the future because remember each letter is going to have a color associated with it and if we make some guesses then those colors are going to change with those letters that we're outputting now to begin with we're going to set this to be null and we're actually going to store all of the letters inside our data db.json file so that we can fetch them and then cycle through them now if you prefer you could just make a giant array inside this keypad component that's entirely your decision for me what i'd like to do is just paste them all inside this thing right here so we have a letters resource so the end point for that is just going to be forward slash letters this is an array of objects where each object represents a single letter and it has a key property which is a b c d e etc all the way through to z okay so we have all the letters there we just need to fetch them from this component and once we have them we update the state set letters to be these objects right here okay so then let's do that i'm going to say use effect right here click on this to auto import it at the top and by the way make sure you imported use state as well inside use effect we need to fire a function and this function is gonna fire when we first load the component so it's just gonna have an empty dependency array right here and inside we'll say fetch and we want to fetch from and it's going to be http forward slash forward slash local host and it's port 3000 3001 forward slash letters that was the name of the resource inside here okay so we're going to fetch them return to promise so we tack on a then method which fires a function when it's complete and inside that function we take the response object now from that we need to pass the json so we say response.json like so this also returns a promise therefore we tack on a then method again we get back the past json and what i'm going to do is just update the letters by using set letters and i'm going to pass in that json right here well it's not really json at this point it's an array of objects okay then so we have this right now we've updated the letters and when we have letters we want to cycle through them and return a little key if you like a little square for each letter so what i'm going to do is delete this text and give this a class name here equal to keypad so we can style it later on and then inside this div we want to cycle through the letters but we only want to do that when we have a value four letters so we say letters then double ampersand and then letters.map and we do that because initially letters is null and when letters is null we don't want to use a map method on node because that's going to cause an error so we wait until we have letters then we map through them all right so inside here we get access to the letter inside this function and what we want to do is return a template so parentheses and in fact what we'll do is curly braces because i want some extra logic inside this function later on but inside here it will return and then inside parentheses for each key we want a div and let's close that off as well each div needs to have a key prop so the key is going to be just equal to l dot key remember that was this property right here because they're all unique so it doesn't matter that we're using the key property they're all unique so that is the key prop and then inside here we want to output the key as well so l dot key all right and that's all there is to it as far as this component is concerned we're going to style it shortly but let's take a look at this in the browser before we do that however we need to nest this component inside the word or component and it's going to be underneath the grid so we'll output the keypad component which is this thing press it it's going to auto import we don't need to pass any props into it we just save it and now we can test this in a browser all right so in a browser now we can see all of those letters at the bottom it looks terrible but at least there now you might be getting an error over here which is a 404 error for the letters and if you're getting that that's a json server issue so if we take a look at the code let me open up this again if we go over here we added these letters in okay now in order for json server to pick up that change you have to cancel out of the current process so where json server is running in the terminal you can say control c and then you want to run json server again as we did before so json server a path to the json file port 3001 and press enter and that picks up then the latest additions we've added to the file so it creates an end point for this letters resource whereas before it didn't have that so if you've got an error in the console make sure you do this before anything else and then it should work anyway now we've done that let's try styling those letters because at the minute they look absolutely terrible so what i'm going to do is just copy a couple of rules from the course files over here and then i'm going to go to the css file and at the bottom i'm just going to paste those in so we have one rule for the keypad we say max with 500 pixels margin 20 pixels top and bottom auto left and right and what that does is kind of centralize this width of 500 pixels in the middle of the screen and the keypad by the way was this div right here then underneath that keypad and then any div directly inside that we style like this so this is each key remember each key is a div so we say each one should have a margin of 5 pixels to space them out a little bit a width of 40 pixels and a height of 50 pixels a background of a very very light gray display in line blocks so they all sit next to each other up until the 500 pixel width that is then they go into the next line uh border radius of each one is six pixels just to soften up the corners and then a line height of 50 pixels and what that does is make sure that the text sits vertically in the middle so i'm going to save this now and preview in a browser all right then my friend so there we go there is the keypad and that looks okay now if we try to put in i guess for example blame and press enter well we get the green here and the gray here but none of these are colorized yet so we need to do that in the next lesson we need to make sure these keys are updated to reflect what color each letter should be