Build a Wordle Clone in ReactJS - Best React Project

hey guys how's it going i'm back here with another video and today i'm going to show you guys how to build a world clone in react so i asked a lot of you guys if you guys wanted to see something like this especially because weirdo right now is is very popular and you guys said you guys want it because um in my opinion this is a really cool project i really had a lot of fun building this um and it's not it's surprisingly not that hard so um i felt like it's a good intermediate react project which would be perfect for a resume because it shows that you really know react and it teaches you a lot of the basics and actual fundamentals of react so for that reason i decided to make this video it might be a little bit long i don't know how long it's going to take however if you want to check out all the code the code will be in the description together with all the information related to the video so before we get into the tutorial i want to actually give a little demo of what we're building so you can see um it's obviously it looks like wordle it's not exactly the same because um i there are some features that i didn't add because they would just make it like not fun it's not fundamental to the project um i just added most of the the crucial features for wordle um for example the navbar is basically empty and you can see it just says wordle but then there's like a little grid over here where you can start typing so for example right now it i don't know what the word is but it randomizes every time you try right so for example i'm gonna try irate and i can just type on my keyboard and the letters will appear over here um i can also type on on this keyboard over here and it will also work as you can see and when i press enter you can see it will give me if it's yellow it means the letter exists in the word um if it's not then it means it doesn't and you can see now we can't use this ones as well so we can continue trying if we want to i'm not gonna i'm just gonna fail just so you guys can see what happens when we fail but basically at the end if we fail it says you failed to guess the word and the word was actually aping which i don't even know what it is but but i got a bank of words and we're going to be using that one to detect which words we're we're going to have so so yeah that's that's basically the game it's really nice really cool to play i i can actually play this on my own and i'll have a lot of fun because i'll i can play it's a kind of like infinite word because word was once a day this one you can just play how many times you want so yeah i find it to be a really really cool project so with that in mind if you guys could leave a like before we get into the video i would massively appreciate it it would help push my videos to more people and just support the channel overall so with that in mind let's hear a word from the sponsor of this video skillshare this video is sponsored by skillshare as many of you might know skillshare is an online learning community with thousands of inspiring classes for anyone who loves learning they have courses on a multitude of topics such as react typescript node.js and much more a course that i took and i really liked was the modern css writing better cleaner more scalable code course by harry roberts css is definitely one of my weak points in web development and this course helped me find a better approach to learning the technology one of the best aspects of skillshare is that it is curated specifically for learning meaning that there are no ads and they're always launching your premium classes so that you can stay focused and learn as many skills as you desire in 2022. the first 1000 of my subscribers that click the link in the description will get a month free trial of skillshare so you can start exploring your creativity today okay everyone so let's get into writing the code you can see that i opened a project inside of yes code inside of a folder called wordle but currently there's nothing inside of the project and in order to actually start creating the project i'm just going to come to the terminal and run the command yarn create react app like this and i'm going to put a dot to say that i want to create it inside of this folder and it's going to start generating all the packages that we need for this project i'm not going to be using any external library i believe um yeah i'm not going to use any external library everything will be done with pure react um just the core react that comes with create direct app so keep that in mind while we're building the project so as you can see um it generated the project i'm gonna run yarn start like this and it's gonna start running the project inside of our local host and as you can see it did appear here um it's just a the simple react code that comes with create react app um so we're going to start by changing that a little bit so we're first going to come to the source folder and we're going to delete a couple files which i always do when i set up a project with create react app we're going to delete the setup test because we're not going to be testing the logo the index.css and the app.task.js so i'm just going to delete all of these files and move them to trash then after we move them to trash we got to delete the the instances where we import those files so for example i'll just delete the index.css import over here and on the app.js i'll just delete literally everything because we're going to be rewriting all of our code over here and the logo as well so what my plan for this video is i won't be focusing at all with css i did write all of the css that i'm i'm i exist in this project um however since it's not the point of the video the point of the video is more focused on logic and like how the coding react but and not in css um i'm just going to leave the the css paste everything now in the beginning and if you guys want to check it out just download the code from github and just use the same css as i am using so as you can see i just pasted all the css that we'll be using in this video um obviously all of these classes don't make sense yet because we haven't created them but the other video will be adding classes and ids to to the elements inside of our code so um all the css will slowly but surely make the website look a little bit better so for now let's just see how it looks and it just looks like an empty website but with a caller of the website for wordle so what we want to do now is we want to start by setting up the structure of our project so i'm going to create a folder first of all called components and this folder will include all the components we're going to have in our project and before we create any component we got to think about how our our project hierarchy or our project tree will be structured so in the app component we're going to have a very simple nav over here something not that big i'm just saying something like um wordle right the little nav that we have on that i showed you guys in the beginning of the video so i'm going to say wordle like this i'm going to save it and as you can see now we have the navbar because the css that i pasted automatically just adds the styling correct for um every element so what we need now is we need to think about what we're going to put right below it so the idea is we have a board right with a grid with a bunch of cells where we can put letters and right below it we have um like the keyboard right the keyboard that we kind of create on our own so we're basically going to have two um different components over here one called board or we can call it whatever we want and another one called um keyboard and they will be right one on top of each other because that's how it will look right we'll have the grid over here and the keyboard right below here so since we created this we have to create the components so i'll just create the board component and board.js and i'll create the um keyboard component like this keyboard.js and in order to generate the components i'm using a snippet which is the i'll just show you guys real quick is the es6 es7 snippet um this one over here i believe yeah and it basically just when you go to a component or a file and you write rfce it will auto generate a component for you so i use this in every single project that i that i code and i would recommend having it as well so we'll just do it on both of them because it'll just make it a lot faster so now we have two components that are right on one in top of each other right so what exactly do we want to do now well i would say a good place to start is just building the board because that will be um the basis for all the logic we're going to write in our code and it's not even that hard um it's just you got to think about how exactly um a board will work right what what represents that cell with a bunch of letters that we see on the wordle gain so the way i see it is um we have uh basically an a a a word right and a word in javascript or in any language is um just an array of characters right for example the word wordle is just an array where um we have the letter w then the letter o then you get what i mean right so every word can be represented by an array of characters and when you look at weirdo you can have um five letter words with um and i'll just put like this word i'll put the other ones as well so you have five letter words but you have um six attempts to uh try them right so the grid will basically be um an array full of arrays right because we'll have an array over here which will have the first word that we try then we'll have the second word that we try then we'll have the third in continuing so it's basically an array of arrays which if you know the mathematical term for that this is a matrix so the the structure of how we're going to base our project is on a board that is made out of a matrix so i know that sounds a little bit complicated but let's let's just create the matrix right now and that will be what we'll be using throughout our video so in order to do that i'm going to create a basically a file that's going to be a helper for us called words and inside of here we're going to put a bunch of functions or stuff that um doesn't match in individual components but will be reused throughout the project and in this words um file we're going to start out by coming and creating a variable which is the matrix so we're going to say const board default because this is the default value of the board when we initially initialize our project this is how it will look so it will be an array and instead of this array there will be six different arrays which will contain five letters inside of them so the first one they will all start as empty letters because the board in wordle starts empty right so we'll just have five characters like this and we'll just copy and paste this a couple times just so we have six attempts so as you can see um this is our matrix we have one array and each array inside of them represents a new attempt and it kind of looks like the cell that we're going to be creating on the game so why are we doing this because now we're going to create a state in our project called board which will represent which letter is on each cell of the board so i'm going to come to the board component over here and let's create a state called board and set board like this and we're going to set this equal to use state and this will be basically the state that defines most of our project its initial value will be the board default a matrix that we created and um because it initializes as a bunch of empty letters but one thing i want to point out is that throughout this tutorial i believe you'll you'll start understanding more when the visual part starts appearing you can look back at your code and you'll fully understand it because there is a lot of logic underlying logic that we need to first establish so that everything works perfectly um that is a little complicated to understand at first but trust me you'll get it as we get along because the visual part is very self-explanatory so you can see we're creating this board state and now we are inside of our board component and in this component the ui will be pretty simple we're going to create a div over here which will have a class name of board and the way we create the cells and and react or in any kind of project like this is basically we have our major um board the div encompassing the whole board and then we have a couple divs inside of this representing different rows inside of the bar so in our case we have the board which is the main array and then six rows inside of it right so we can just create this div over here with a class name of row and we can just copy and paste um row six times or five more times right because it's six attempts and this is basically the format of our board we can check to see how it's looking and you can see uh it's saying keyboard and board is not defined oh the reason for that is because we haven't imported both the the keyboard and the board components over here so i'll just do this real quick and say import keyboard from the keyboard components class as well so we'll just come over here and you can see we basically can't see anything as of right now it doesn't look good at all but it's because we haven't added anything to inside the rows of our board and what exactly are we going to add here if you think about it inside of the row we'll have five letters each because each row represents one attempt to try to guess the word so in order to make this work we're going to create a new component called letter and this component will basically represent the little letter that you guess um for like each individual letter of each individual attempt of guessing the word so the letter component will be very simple but also very useful for us reason for that is because it's gonna first of all take in two different um props the first one is the letter position and the second one is the attempt value so both of them is just a way for us to get um exactly what letter represents this individual cell so for example inside of our board over here and i'll just close all the other components so it becomes easier to see instead of each of the rows we're going to call the letter component five times like this i'll just paste it five times and each of them will have the letter position and an attempt value and i'll just paste it five times so that we can just individually write them so each row will have five of them and what exactly is the letter position and what exactly is the attempted value so if we look at the words file over here this over here is the letter position is zero because it is the first letter of the word you're guessing but the attempt vowel is also zero because this is the first attempt you're um working through right so imagine the grid in in wordle if you are on your fourth attempt then attempt to file would be three because in programming we start at zero um and if you're guessing this ladder over here the letter position will be two because it will be zero one two so this is how we're gonna identify which letter fits like what exactly are we are we guessing for each um individual letter component so what we do is uh initially for the first row it will be represented by 0 1 then 2 then three and then four and then for the attempt vowel it will basically be zero for all of them because the first row is the only the first attempt but the letters are changing because there's multiple letters on each word you're guessing so then we move on and we just copy all of this and we paste it on the second row the second row this won't change because each guess also has five letters right in five possible places you can put a letter but what will change is your attempt because now you're attempting the second try right you're guessing the second word so we change this now i'm gonna basically paste for the rest of the rows because this takes a little bit but um just copy and paste everything and um it should be fine so as you can see i just pasted um the changes are barely anything it's just the exact same thing but we changed the attempt of all um to increase by one on each attempt so that now we technically have a working grid a way to see this this working is by putting the class name of letter on this and the css that i added in the beginning should generate a cool grid that as you can see it kind of resembles the word of one um at least there's like the correct amount of letters and the correct amount of attempts you can have um but obviously on each of them it's saying letter instead of the letter you're guessing or just an empty string meaning that there's no you didn't guess yet um so let's fix that right now and the way we're going to fix that is we're going to remove this over here and we're going to recognize that in order to know which letter we're trying to guess um for each of this each of this letter components we basically just have to say that the letter is equal to the bor that whatever is on the board at the tempt value uh row at the letter position position right so basically this is how we're going to access each letter individually now obviously right now we don't have anything in our board state because we initialize our board state as empty for everything but if i added something like this over here an f on this position then what should happen is um on on this exact position it should be working but there's an issue and you can see it's because board is not defined on the letter.js um component now how will we access this well we can access it by just passing it as props to the to the letter component um but it would be kind of annoying to put the the board as props to each of them and also we're probably going to be using this the state both the function and the value in many different components inside of this project so what i recommend for this project and what i'm going to be doing is i'm actually not going to be defining this inside of the board component i'm going to be defining it inside of the app.js component and i'm going to be using the context api for some state management in our project so it's going to be pretty simple but very useful for those who are not that familiar with the context api to actually get some practice working with it throughout a project so what will the context api help us with well we'll create this a bunch of states over here on the highest level component and we're just going to pass them through the context so that we don't have to keep passing them as props and be able to access them everywhere inside of our project so the way we do this is we first have to import from react like this from react the create context function and right above our app function definition we'll just say export const and we'll create our app context right over here and we'll set this equal to create context now we have to export this because um we'll have we need to have access to this for this on other because we need to have access to this on other components but we also need to have access to this inside of this component because now what we have to do is we know that we need to access the board state everywhere inside of board and keyboard i'll probably put it on keyboard as well because we just didn't get there yet so i'm going to wrap all of this around with the app context dot provider and now everything inside of this provider will have access to the states that we passed it through and how we pass the states well we'll just give it a value and we can just put your board and set board and now through the context api we have access to both of the states anywhere inside of either the letter component or the board component or the keyboard component because all of them are under this um provider over here so this is good because it's going to set us up for a easier code later on it's going to make our project a little more organized so that's pretty good but how do we have access to the bar component on our letter.js file right so the way we do this is we're going to import from react over here the use context hook and we also need to import this app context that we created over here so i'll just say import from that was created in our app.js file so i'll just say app and i'll import the app context and then right over here just press enter and say const then open and close curly braces set this equal to use context and pass the app context and now i can just access either the board or the the set board by just calling them inside of this object over here which works because this is exactly what we needed and now it shouldn't be give us as an error anymore let me refresh this oh it gives us an error because in our app.js over here we have to import the board default that we imported on the board component so we'll just copy and paste it over here and also we need to import use state from react so i'll just save this and we'll come over here refresh our page oh and also um this over here now is that it's not a the correct path we need to delete one dot so that it's now corrected so let's save this and check to see if um it's working and yeah it's working you can see i know it's not centered because we still have to add some f some classes but um you can see that our it's actually correctly putting the letters on the correct place so we basically um told on our words file over here that we want a matrix where there's nothing everywhere but uh over here we put an f so it correctly recognizes that that position is the correct one over here and it sets the letter um at that position to be what is being rendered in the letter component we can add other stuff like we can put in a over here we can put a g over here and you'll see that um it will correctly assign them to the correct cell so that's good that's a lot of progress already especially because it's good visual representation of what is happening um but obviously the game the core aspect of the game is trying to guess the words and we haven't even gotten close to that yet so what we can do to start um already playing the game is try to start already creating the keyboard component so that we can actually put letters and write letters and like actually guess words on our own so the keyboard component will be a little bit hard because we actually need to create a keyboard right like a fake keyboard that appears on the screen and we can click on it and actually write the word so the way we're going to do this is inside of this keyboard component we're going to give a class name to this div and this class name will be just um keyboard like this and inside of here we're going to have a couple um different divs and the reason for that is because i'm going to open up wordle over here um yeah this is this is weirdo this is our code but basically you can see that on on wordle um this was the guess for for this day i already did it um but you can see that there's three lines on the keyboard right there's the top line which is a little bit bigger than the middle line and the bottom line which is a little bit big like bigger than the middle line as well but also has the enter and the delete key over here so what i imagine is they have three different divs for each line right they have one for each line and they just center all of them but since there's less letters on this part over here um it becomes smaller and they just add individually the enter and the delete button so that it can make it work right so that's exactly what we're gonna do we're gonna come over here to our keyboard and inside of here we're going to divide our keyboard into three different lines so the first one is going to have a class name of just class name of line one and then we'll just create one for each of other lines there's three so line two and line three and then what i want to do is i want to create an array for each line with each of the keys representing um like possible keys for that exist in each line right so for example on wordle um we'll create an array which will be q o w e r t y u i o p right so the way we do this is i'll just paste it right here because i already created those arrays but you can just look at them and just copy onto your screen okay so as you can see these are the possible keys um this is the first line the second line and the third line um and you might notice that i didn't add the enter and the delete and the reason for that is because if we don't add them individually it will cause some issues later on so i would just much rather just keep letters like we have over here and i'll just add them individually later but why did we create three different arrays why are we creating arrays instead of just individually putting um each of the letters um in this keyboard as individual dips well because that is the beauty of react it will just it just makes it a lot easier and less code if we just create a race and map through them which is exactly what we're going to be doing so the way we do this is we come over here to for example the line 1 then we're going to say dot map and inside of here we're going to get the individual key and then we're going to let me just close this like this and we're going to return probably a div with the key for at least for now we're going to do something like this so i'll just say key and let's save this and you should see that um in our project yeah it lists all of the first line and we can do the same thing for the other two lines so just copy this paste it over here paste it over here save it and we can see that um it now shows the other lines as well but obviously the values are different because we need to change this from keys one to keys two and this one to keys three so now let's just look and you can see the keyboard starting to take shape but obviously um for styling purposes creating the keys wouldn't be wouldn't make sense to to do it like this just creating a div um it's actually better in my opinion to create an individual component for key because we're going to put a lot of logic inside of it so that's exactly what i'm going to do right now i'm going to create this component save it and instead of just returning div i'll just return the key component and just delete this and just paste it three more times now what exactly is the key component well this component will take in the value of the key through props so i'll say keval equals to the key and i'll do the same for the other ones like this and then what we want to do is we're going to come to the key component then we're going to see that it accepts a prop called key vol inside of this we're just going to return the key valve like this key but i'm also going to give a class name to this the class name will be key and on my css it will already style it to look like the actual keyboard so let's check it out um it says key is not defined because we need to import the key component into our keyboard and then save it and as you can see it looks exactly like the the keyboard from wardo so yeah the css makes everything looks look perfect um right from the start so um that's a thing that i really like because it was really quick after the css was already done but you might notice that we still have the the delete key over here and the enter key over here so the way we're going to do this is we're going to manually add them so the the enter key is on the left so we're just going to create a key component over here which will have a key value of enter like this i will have one for the delete as well and the key value will be delete now we'll look over here and you can see that um it seems to work fine like we were able to put the enter and the delete thing but obviously um it is too small for the letter and you can see that on wordle the cell the the little like icons for the delete and the enter are bigger than the rest so in order to make something like that work we're going to come to the key over here and we're going to put some conditional logic onto the css like ids and class names for this div which will help us a lot because it's something that we're going to be doing throughout the video more specifically i'm gonna add an id over here like this and then this id will be dependent on whether or not this should be a big key or not right so how do we know if this is a big key or not well let's just pass a prop over here called big key and this prop will be a true or false statement if it's true then we want to make the key bigger so if big key then let's set the id to big like this if not let's just not set any id and this will differentiate the the keys for the delete and the enter because now for both of them i can just say big key is equal to true and you'll see that the css since i on the css i do have uh the id like the id for big i set the width bigger um i can just come to over here and you can see that um and you refresh the page um it still doesn't work um let me see why uh okay yeah i just forgot to put another ampersand over here so i'll just save this and you can see now both of the keys um look better so so one thing that is annoying me right now is the fact that it's not centered um because it should be and i know that what i did to make it center through the css is i just came here to the app.js and right around the board and the keyboard we can basically separate the navbar from them by creating a div that um it's purely for still it like style purposes you don't need to create this if you're not making it exactly like mine but we'll just add a class name of game and the css will do its work where it will center everything on the center of the screen so it's starting to get shape it's starting to look good but as you can see we can like nothing happens when i click on the letters nothing happens if i type so let's fix that right now so in order to first make it so that when i click on one of these ladders it will actually add the letter to the board i'm going to come to the key component over here and instead of this div over here i'll just add an on click to it so whenever you click on this div which is an individual key i'll just basically call a function called select letter and we'll create this function right now so const select letter and the function will basically write all the logic for actually selecting and adding the letter to the board so the first thing i want to check is to see um which like which letter did i select right so the first thing i want to do is i want to get the current instance of the board so curveboard like this because the board is a state right and to do this i need to import the board state inside of this component because currently we're not accessing it and the way we do this is exactly like how we did it on the letter component over here through the context since now we have access to it i'll just come over here do the exact same thing i did and it should be fine so i'll just import this and also import the use context hook from react so use context so now that we have uh access to the board i'll just create the current instance of the board by saying this then i'll just change the current board um at the position of my current attempt which initially it should be um zero right because it's it's my first attempt so the attempt is zero and at the position of the letter zero as well we'll set it equal to whichever key value we have inside of this key right because we're changing the cell to be equal to that and then all we have to do is we just have to set the board to be equal to the current board right we can actually change this to new board it makes more sense actually the name and we'll just set the board to be equal to this and we obviously we don't have access to this function right now but we can just access it really quickly by saying set board and grabbing it from the context because we passed it over here so we have access to it so now let's check to see if this is working so we'll come over here and we'll try to click on one of these cells and let's see if this little cell over here will update to that letter and as you can see it worked but there's an issue um it's not moving forward i can just click and it will keep altering the same one and the reason for that is because we manually put the values of which cell we want to set the key value equal to and that's wrong because we want to make it so that when i add a letter to this cell it will automatically on the next try add one to this one and go it goes on until the point where you get to this one over here and you can't add more letters so the way we're going to keep track of which position of our letter we are right now and which attempt we are right now is we're going to create a state for that and similar to the board state we're going to create it on the app.js file because we also will have we want to have access to that everywhere inside of our project so we just pass it as a context variable and we have access to it everywhere so i'll just create that state like this um i'll say const and we can call it current attempt um just to keep to meaning that like this is this represents what you're currently attempting right so i'll say set current attempt and then i'll set this equal to use state and initially i want this to actually be an object because we'll keep track of two pieces of information it'll first keep track of the attempt right which attempt you're attempting right if it's first or the second word you're guessing whatever one it starts at zero so we'll put the initial value of zero and also which letter position are you in right so which letter are you currently adding to your guess so it also starts at zero and we'll just pass both of this over here um to our value in our um in our provider and now inside of our key over here we'll just import it as well we'll say we'll just say cur attempt like this and now instead of saying new board zero zero equals to key vault instead of just changing the first um letter and attempt to the value that we're clicking we're actually going to do it a little bit different we're going to first of all set the new board at the row of cur attempt dot attempt because it is the attempt that we are in um and then this one over here is just the cur attempt dot letter position right letter pause and you should see that um it will work right if i click on r it should have worked let me see is it breaking let's go to inspect element and see if there's any console it says cannot set properties of undefined probably because there's an error oh i found the error i forgot to put a t on attempt so just save this and it should be working now if i guess r it appears over here but do you think it will if i press another letter it will continue well actually no because we're not changing the value of our letter position so in order to do that we're going to come over here inside of our key and after we change the board we need to set the current attempt to be equal to whatever it was before so we'll just grab the cur attempt over here and we also need to grab the set cur attempt function from the context and we'll just keep everything the same in in that object but we'll change the letter position to be equal to itself plus one so we're moving forward inside of of the word so oh i can't say letter pause i have to say cur attempt dot letter pause and then um you can see that when i click r it will put on the first cell but when i click t now it's on the second one and i can keep going but it breaks because um it got to the last one and it continues there's nowhere to go right so that's a little check that we can put right over here before um anything we'll just check if the current attempt dot letter position is greater than four then don't even move forward don't even like continue with the function because um it doesn't make sense we're putting more letters than than five which is the max right so we just return and end the function right there so this is great um now we're able to to add letters to our cells but what happens after this well we need to press enter right and actually enter our word but right now enter is not working so how do we make the enter work so for the enter what we can do is we can kind of separate this so on the select letter over here we can actually wrap all this around with an if statement like and we say something like if the the key val is equal to enter for example then we do something um actually i need to put this outside um like this but if it's equal to enter we do something else at least for now we'll um it will be an actual ladder so we'll just wrap all of this around with this um so now the the logic for the enter will go inside of here and what exactly is that logic well the first thing we want to check is to see um if the the amount of letters in the current attempt is um five right so we can't press enter before we typed four letter five letters inside of this word so a check a really quick check that we can have is if the current attempt dot letter position is not equal to 5 then immediately return and end the function but then what we can do is we'll come down here and all we have to say is we have to set the current attempt to be equal to um an attempt plus one so we'll say attempt current attempt dot attempt plus one the reason why we do this is because we're moving now upwards like we're moving vertically instead of horizontally um but the the difference is that when we press enter letter pause is equal to five right because it's on the last letter of the first row but now we're moving downwards so the cur the attempt value goes up but the letter pause goes back to zero so that we can start a new word so we'll just set um letter pause to be equal to zero and we can test this out by coming over here typing your word like this and pressing enter and now continue typing and it works perfectly you can see that i can't press enter before i actually have five letters but when i have five now it's working correctly so now that we have that done let's also add the delete functionality because it's not working right now the delete won't be that much different from this one over here which is the actual selecting it so what we'll do is we'll put an else if over here and this else if we represent the case where um the the key is actually the um the key value is actually delete so let's say key value equal to delete and what we'll put over here is very simple we'll just say that if the current attempt dot letter pause is equal to zero then return and the reason for that is because it is the first letter you can't delete if you haven't written any letter yet but then we do the same thing we did over here with the the new board so we just copy this over here um like this paste it over here but instead of saying that the new board at the current attempt at the cur at the current letter position equals to the key vol we do the opposite um we go back one in the positioning and we set it back to an empty string again because now you just deleted the last letter and since you went back you also need to set the board to be equal to the new board and also go back um one letter position from the current attempt state so we'll say dot dot current attempt and then letter pause is equal to cur attempt dot letter pause minus one because now we're going backwards we're setting the the last like for example i'm going to refresh the page if i'm if i type the three r's i'm currently right over here now because i already typed three words so i'll set whatever is over here empty and i'll go back to over here so you can see that this is exactly what happens and i can keep typing and i can keep deleting right so the logic makes sense and take technically those are the the main functions or the main functionality that we're going to have in our project i don't like the fact that they're kind of like all inside of this key because of the fact that we're going to actually have two different ways of selecting ladders we're going to have this keyboard which is the one the screen but we also want to be able to type it right so for that reason i actually prefer to create individual functions for um each of um the enter the the delete and the just selecting the the letter individual function for each of them and put them on the app.js so that we can access them everywhere in the project so that when we're going to reuse them we can just use the context again so create those functions over here i'll create a function called on select letter and this one will be for the selecting an actual letter and the other ones will be like on delete so i have to create a function on delete and then we'll create another function called on enter and this function over here will be for the enter as well so we'll just copy all the functionality which should exist right now instead of the key function and we'll copy this functionality for the enter put it on the the on enter then copy the functionality for the delete and paste it on the on delete and then just copy the functionality for the selection and just paste it on the on select function so you might be asking okay but we don't have access to key valve outside of this component well that won't be a problem because we can just um grab the key as props so we'll just say kevo over here and we'll have it also on all the other ones as well so we'll just say kevo actually we're not using key vault over here so it's fine and not on this one as well so what exactly we do now is we pass both all of those functions as per as part of the provider for our context and now we can just access them everywhere in our project so i'll say on enter and over here we'll just grab them directly from the context like this on delete on select letter and on enter and then instead of this if else statements over here i'll just say on enter if this is the case then on the delete one i'll say on delete if this is the case and on this one i'll say on select letter and i'll pass the key ball because this one has it needs the key val for as pro as the arguments to the function so this is just us organizing our code better because it makes sense it will make it a lot better because we're going to reuse these functions later on in the project now we can just delete this stuff because we're not needing them right now inside of the key function we just have them right over here so we don't need those in pieces of information on this component anymore but what we can do now is we can start writing the functionality for actually detecting the your keyboard your actual keyboard while you're writing um so that we can also select letters that way so the way we do that is all on the keyboard component i'll close all of the other ones as well and basically we we need to whenever we want to detect some key events from the keyboard on react we have to do the following we have to import the use effect hook and then we'll have a use effect over here and the use effect will have a very specific functionality it will call some sort of function that will handle the the events um happening on your keyboard so let's call it something like handle keyboard we'll create this function later but let's just keep it like this then we need to access the actual document object which is something we don't do a lot of react but for this we have to because we have to add an event listener for um detecting when the like when a key down event happens and when this happens we're going to call the handle keyboard function that we're going to create and then finally um to clean up this use effect we're going to return um a function like this which returns back the same thing so we'll remove the event listener after we finish this um so we'll say remove event listener like this and it's also key down and we'll also put handle keyboard so this over here might look a little bit weird but it's how we actually uh have to put in order to detect um keyboard events in react so now the important part is i'm putting the on this keyboard div over here this is where we're going to put a on key down and passing the handle keyboard function like this and now we'll just create the keyboard the handle keyboard function so i'll say const handle keyboard and this function will be a little bit complicated because it's actually not a function in itself this is a function that is used that is created by using the use callback hook which um i've actually taught this hook in the past in my channel in my huge hooks video where i teach all of the react hooks i talk a lot about this it's one of the most important hooks in my opinion it's really useful especially for maintaining a performance inside of your react projects and in this case we're going to be using because it will prevent um re like re-updating our components or in our functions um every time like unnecessarily so in this case we'll just say use callback over here and inside of here we can just set a function that will grab the event as an argument to it and then this event will tell us which key on our keyboard we actually typed so there's a bunch of ways to detecting which keys you typed but the way i'm doing it's basically like this i'll say if event dot key is equal to enter for example then we know that someone pressed the enter key on their keyboard so we'll just put the logic for the enter over here but there's also the the backspace so i'll say else if event the key is equal to backspace and in this case will be the delete functionality so we'll just put the delete functionality here as well we'll say like this and then else if none of those are the case then we know we're typing a letter or something else but at the same time let's just keep it simple so we'll assume it's a letter and how exactly would we detect which letter we we clicked well there's a lot of different possibilities um and i don't just want to do an if else statement for each possible key that you can type on this keyboard over here um the way we're gonna do this is we're going basically to go through the list of keys like this and we're gonna loop through them by saying four each and grab the individual key and for each key we're just going to ask okay if the event dot key is equal to the key that we like is equal to one of these keys then we know that we're typing that specific key so we'll call the unselect on select letter function and pass the individual key to this function so that we can actually select it and we'll do the same thing for all of the other um arrays that we have over here so we'll do it for the keys two and two for the keys three now um now for the enter in the backspace it's simpler we'll just say on enter and no it's just on enter and we'll say on delete for the backspace like this and and then we'll just save this and we actually need to import both like all three of these functions by also grabbing the the context directly into this project inside the side of this component so we'll just copy this whole thing over here that we have on the letter component inside of here just to grab the the variables in our context so i'll just copy this and paste it over here i'll re-import the use callback and the use effect which we have in this component and then i'll grab the on enter the on delete and the on select letter now we'll save this and let's check to see if it's working we'll see that um it's not because apparently key is not defined let's see it looks like i accidentally typed keys4 when it should be keys 3 and it says key is not defined on keyboard which is this one over here and it is true we imported the key component but we didn't uh we didn't actually import it over here at the top so i'll say import key and not from react i'll import the key component that i created from the components folder over here and let's check to see if it's working so if i type a letter on my keyboard it doesn't actually select it and i'll explain to you guys why in a second however the backspace and the enter should be working yeah it's working i'm not i'm not typing anything it's deleting and if i type a word and i press enter on my keyboard the next word that i type will be on the next line but the reason why the the letters are not actually detecting is because um on the events over here um this word this key over here can be in it's probably in lower case um and mine on the array is an upper case so it shouldn't really matter if you're typing on lowercase or uppercase weirdos should technically just know like just us except both so that's exactly what we're going to be doing and the way we bypass that is we're basically going to transform both the event.key and the key that we we chose to be lowercase so that if both are lowercase it doesn't matter if you typed it on one and lowercase in the other and uppercase because both will be the same no matter what we could have just done both uppercase as well it doesn't really matter we just need to make sure that both of them have the same exact writing or else javascript will basically tell us that they're not the same so we'll paste this on all of the other ones as well like this and now it should be detecting if we come over here so i'll start typing and as you can see it does work i'll type enter and i'm typing everything on my keyboard and yeah it's working the delete as well everything looks perfect so now we are detecting key events inside of our project which is amazing now all we have to do is start detecting whether or not um the like the corr there are correct positionings depending on the word right so we need to add the coloring for example if this is in the correct position it should be green if it's in the word but it's not in the same position um it should be yellow and if it's not it should be gray um all that should be done directly inside of our letter component so this logic over here in my opinion is one of the most complicated out of all of them because um it's a bunch of conditionals but i'll go slowly so that you guys can understand as best as possible um and basically what we're trying to check is we need to basically determine the color of the letter or when i say letter i mean this little cell over here based on if it's correct the positioning or if it's in the word but it's not in the correct position or if it's just not in the word at all and the way we do this is we first of all have to define which word um we're trying to guess right and i'll do this by just coming to our app.js um i'm literally just creating right now a variable for a word um let's just call it correct word and set it equal to let's pretend like the correct word is um right um because it's five letters and it can be a word right so i'll just paste it over here and on the context so that we have access to it elsewhere i'll save this and now in our letter component over here what we want to do is we want to give the id an id to this div that will change depending on whether or not it is correct or it's close or it isn't correct at all right there's three possible ids that we might have we might have the correct id which will make this green as you can see over here it'll make all of them green because i already added the styling for this id we can have the almost which will make it yellow and we can have the error or we could call it default whatever you just guessed it wrong and it will become agree or like oh great right so i'll just remove this um it will depend on whether or not it's on the correct position and the way we do this is we'll actually create three different variables over here one called correct one called almost and one called which like letter state now what do they mean right letter state is what we're going to pass to the id so this over here is what it's going to check if it is correct almost uh or just wrong and re set this equal to the id corresponding to that specific case now the correct um is basically boolean that will say if it is correct or not and like like fundamentally it's not that hard to understand that for for it to be correct what we have to do is we have to get the current um the correct word that we created which in this case is it's right so we'll say correct word and we need to grab the correct word from the context like this then we'll just grab whatever letter is on the current letter positioning of this letter because this is an individual letter and this over here is defaulted to the cell right so we'll just say okay if it is equal to the letter inside of this cell then it means it is correct so this boolean over here will set to true if it's not it will set to false so basically we already know which positioning this letter is so we'll just check to see if the positioning on the word is equal to the current the actual letter in the cell so this will determine if it's correct or not now for it to be almost correct it's a little bit more complicated what we'll do is we'll say first of all um it's not correct right because for it to be almost it can't be correct then it also um the letter can't be empty so we'll say it can be empty because um if it's empty then we don't want it to be yellow right because you you didn't even put an empty letter then it will also need to have the correct word to include so you can use the includes function from javascript the current letter in the cell so all we're saying is um for it to be almost it can't be correct because if it is correct then it's correct it's not almost correct so it can be correct it can't it can be empty and the correct word must include this letter somehow right so we know we eliminate the fact that the case of it including it in the correct positioning because this is handled over here now this is the almost state but what exactly is this over here well this will just ask okay if correct is true then we'll set the letter state variable to correct but if it's not true then we need to ask if almost is true because if it is then letter state will be almost and if none of that is true then it means it is error because it means the person got like the it's not almost and it's not correct so it'll be the gray um thing right so we can check to see if this works um it's obviously saying that all of them are great because of the fact that um this should only be calculated um if the current attempt so like if the current uh i need to grab current attempt from here so we'll say cur attempt and we need to ask okay if the current attempt dot attempt is equal is greater than um the attempt vol then sets all of this and the reason why we say something like this is because we only want to set the colors after you guessed you moved on in the attempts right so you see they're empty right but when i guess a word so i'll guess for example uh right i'll write it's almost right correct and i press enter you can see it got all of this but this is not correct because it is not in this position but it is technically t is also in the word so that's why it is yellow so we can try again we can put like um the word false all of them are wrong letters we can try um party and you can see it correctly recognizes which letters should be included in the word or not and which color they should be so i can put like right i don't know and it it shows green for the first two letters so it means it's working the logic is working perfectly um but there's a thing that i need to mention that is um you guys must recognize that as of right now um you can basically guess any combination of five letters which is not what wordle is because word or you actually need to guess a word um and this is one of the best parts of this project which is we need to have access to some sort of bank of words so that we we recognize if the user is actually trying to guess a word or not right so the way i did this is i found on reddit a list of wordle words i don't know if that's the official list that the game uses but i use them and i put them on on my code um i basically it's just a txt file that i'll leave the link to download on the description if you want to download it includes like 2 000 words which it's not enough it's not the whole dictionary but it's already enough for you to have fun playing the game so i'm just gonna put the the txt file inside of this project and i'll be back in a second okay so as you can see i put that the the word all bank inside of here it's just a txt file with a word on each line and you can see that um there's like a lot of words there's like 2 300 words all five letter words um and i'll close this right now because um we're gonna we're not gonna open it but um we need to use that word bank to detect um stuff inside of our project and there's many ways to do this but the way i found to be better is i actually came to the the words um like file over here and we're gonna create this function called generate um word set so the idea is we're actually inside of the game every time we play we're gonna read all the words inside of this txt file and create a set with each of those words now a lot of people are not familiar with sets in javascript but a set is like for example create i don't know i'll call this new set and i'll create a set and you basically create it like this it's like an array but um different because you can't repeat values um also there's no indexes so you can't like just grab one value at one position because they're sorted like randomly um and it's actually a data structure that is very good to be using now the reason why i use i decided to make a set out of this is because every time you guess a word i want to basically ask myself i want to ask the code to to check to see if the word you're you're typing over here exists inside of this set now if any of you guys ever worked with algorithms and data structures you would know that um if you have an array instead of a set and you and you use like the includes function that we've used in this video so for what it will actually do inside of the code is it will loop through the whole array which in this case includes 2 000 items and check one by one if the word you're you're trying to guess equals that word and that's not ideal um especially since um we're just doing 2000 words but imagine if we're doing like the whole dictionary with five letter words that would be not efficient at all and sets on its essence um the data structure it has all of one lookup time which to simplify that it means it doesn't have to do that it does that immediately when you when you ask a set if something exists inside of it it will tell you immediately without using any extra memory um if it exists or not so it makes more sense for us to use a set instead of an array and that's what i wanted to explain to you guys so inside of this function we're basically going to read the txt file and transform that into a set so i'll create the set by saying let word set that's how we're going to call it and um we're just gonna make this an asynchronous um function because to grab the the words in the txt file we need to use the fetch api from javascript so we'll say await fetch like this oh accidentally imported something weird so i'll just say await fetch and inside of here what we want to fetch is the the word bank and to to put the word bank um path over here we need to import um word bank from the path to the word bank so we'll say wordle bank dot txt like this and then we'll just pass this inside of the fetch and what we say is after we grab the the file then we'll have a response which will set to response.text we'll transform it into text and then we'll grab the final result which will be the following uh the results we can just console.log right now if you want to but it won't like the the result would just be the list like this whole txt file over here as a string which is not what we want we want it as um a set so how do we make it into a set well the the bad part is we need first to create to turn it into an array so i'll say word array equal to result dot split and split basically just um transforms the string into an array based on um some sort of character inside of the the string and in our case the character we're going to use this we're going to tell it to create an array and separate the the the words based on um if they are one line below each other right which is exactly what it is we'll just this will be a different element than this and the way we do this is by just adding the like the backward slash and the n and javascript will recognize that this is what you mean then we want to basically just create the set by saying word set is equal to new set and we can just pass an array inside of here and the set function will create a set based on this array so at the end we'll just return um the set so we'll say return word set like this and now we created our set of words which can we can use to detect if we correctly guess the words or not so we'll export this because we'll need to have access to it elsewhere and then we'll come to our app.js and import this from the words file we'll import the generate word set function the reason for that is because the app.js is the first component that renders and um it's where basically we want to generate the sets when the game starts right so we'll create a use effect over here that only runs once and this use effect will basically just generate the set directly over here so it will run once because we'll just put a an empty dependency list over here and then we'll just say generate word set and since it is an asynchronous function as you can see over here it is an asynchronous function it will return a promise so we'll say dot then and we just grab the words like this and inside of here when we grab the words for now let's just console log it so we can see it let's see if this is working i'll go to google chrome let's open our console log because it's a user effect so it should do it automatically and yeah it works a console logged a word set which is a set of 2000 entries and each of them is an individual word which means it is working perfectly now what do we do with this well i'm gonna i'm gonna create a state over here which is going to represent the set of words um just so that we have access to it everywhere in our project so we'll say um word set like this and set word set and set it equal to use state and initially it will just be a new empty set but then we'll just come to this over here and after you generate your words we'll set the word set state to be equal to the words that we get so we'll say words dot word set because as you can see we return an object so we have to say word star word set so now that we have this done we have access to the word set everywhere in our project but the most important place for us to have access to this is over here which is um where we press enter right and the reason for that is because when we press enter we want to check to see if we won or not so um right when we press enter we want to check to see if the new letter we added like if the word that we're forming on this attempt is equal to um the today's word and the reason why the enter is important is because it is over here where if we're trying to enter a word that isn't on the word bank we'll not allow that to happen but if it is in the word bank then we know we're trying they're trying to guess a word so we we will allow it and the way we're going to do this is we're going to come over here then we need to form a word with the letters of this attempt right because um each attempt just is just a bunch of letters together so we need to unite them and form a word so we're going to come to the enter over here we're going to set a variable called currentword and it's going to be empty then we're going to loop through five times throughout the letters and say i's less than five then i plus plus like this then we we just want to add to the current word all of the values in the board at the current attempt like this dot attempt and at the position i so we're just forming the word based on the letters of our current attempt then when we have the the word set we'll just say if the word set dot has which is a function in javascript for sets which basically says if um this word set includes um the current word um that we that we're guessing then uh it's fine then we'll just continue moving forward uh we'll move on and set the current attempt to be plus one but if it's not in the word bank then we will alert a message saying um word not found or something like this so we'll save this and let's check to see if this works we'll come over here and actually i just remembered um we need to we need to turn the current word over here to lowercase because as you can see on the wordle bank all of the words are in lowercase so we'll just say to lowercase right or else it won't work then let's try i'll try to guess something that isn't a word and as you can see it says word not found but if we try something like false which is a word a guesses right and it moves forward let's try again something that isn't a word it doesn't allow me and let's try the word write and as you can see it allows me to so that piece of logic is fundamental to the game because it allows users to only guess words that are like existing words or else the game would be too easy but at the same time we also have to check to see if when we press enter they actually found the word that is the correct word which right now is is the right because as you can see we can still continue guessing although we already guessed the correct word which is not how wordle works so the way we can do something like this is actually pretty simple with the code that we already have what we're going to do is after all of this we're going to say if the current word is equal to the correct word then um we'll just uh do something like learn a message say um game ended or you actually won and we'll come over here and let's check to see if this works if i try to guess right it will say game ended because we guessed the correct word now there's other stuff we're going to do based on this like we're going to show like a game over part of the website but um we'll do this later because um there's another aspect of the game which we haven't actually worked on which is the fact that when you on wordo when you try to guess a word for example i'll try to guess false we know that none of them are letters that exist in the word so word removes them as options from the keyboard so that's something we have to do right we have to make it so that it doesn't appear as an option so the way we do that is actually we're going to create a an array over here as a state called disabled letters and this state will basically be disabled letters it will basically be an array containing all of the words that are all the letters that has already been guessed but aren't in the word on the correct word so we'll just say use state and we'll set it as an empty array initially but then we'll come to the ladder component over here and um this is the reason why we're doing this here is because um this is where we know if if a letter is correct or not correct right so we'll just create a use effect inside of here like this and this use effect will be just a function that will be running every time we move on to a new attempt so we'll say cur attempt dot attempt so every time we have another attempt we'll run this use effect to to do the check again and the check is pretty simple if first of all the letter is not empty because we don't want to check for empty letters and the letter is not correct and it's also not almost because it's it's literally not it's not in the word at all then we'll grab the set disabled um did we pass this as onto the context i don't think i we did yeah we didn't so i'll just pass this right over here and i'll pass the disabled letters as well and then over here we'll just grab both of them like disabled letters and set disabled letters and then we'll just come to the um if statement and we'll say set disabled letters to be equal to um all the disabled letters before plus the current letter because this letter should is not in the word and why are we creating this array because now in our keys from our keyboard we can actually have a property that will like in our id that will make it gray uh when the letter is part of the disabled letters array so the way we do this is we're going to grab over here as props the we'll grab here as props um a boolean which tells us if this key should be disabled or not and if it should be disabled then we'll basically change this logic of the id over here we'll basically say okay we we're asking right now that if the the key is b key then we set the id to be big but now we have another id that we also want to want to add so we're going to do is like this we're going to say okay if it's a b key then set it to big else if it's disabled then set it to disabled like this and i already added on the css as i mentioned the correct thing to make it so that when it's disabled it will be great so now we just come to the keyboard and we now have to pass the the disabled prop to each one of these keys and the way we do this is we're just gonna directly come over here and say disabled is equal to we'll grab the disabled letters like this the disable letters array that we need to grab from the the context so we'll say disabled letters and we'll just say okay if the disabled letters array includes the key currently in this uh that we're currently checking then it should be disabled and we'll do this for all of the other keys as well which are the other two over here so let's check to see if this works um if i try to guess the word false it breaks it should this shouldn't be happening but let's check to see why it's breaking um it's saying set disabled letters is not a function it most definitely is a function so let's see why it's saying that um set disabled letters it is a function are we passing it here oh yes we are but i called it set disabled letter instead of letters i apologize so i'll just pass it again over here and it should be working out so let's refresh and guess the word false and as you can see um it removed the letter e because it's not part but it didn't remove the other ones which is weird let's try guessing the word um rift oh that's not in the thing okay oh yeah it's also not a word um let's guess um irate i don't know um it's not removing this letter so let's check why that's happening oh i just fixed the error basically the reason why it was given us errors it's because um it wasn't as updated as as possible the state we were just passing the the disabled letter states to create the new disabled letter array um and it wasn't just updating immediately so i just use the old way which is basically you just grab the current value of the state by making it into a function and i called it pref and then i just did just returned an array with the letter so that we are adding a new letter to the disabled letters list correctly and you can see that now it should work if i try false it removes all of the letters um if i try i irate you can see it removed a oh but both of them are already removed um let's try uh i don't know paint you can see it removed the p as well so that functionality is working now which means we're even closer to the end of the video so what we want to do now is we want to set some sort of state for when the game is over right we want to create a component called game over and this will be a component that renders a little message at the end when the game is actually over the message will be pretty simple over here we'll have this div i'll give a class name of game over like this and inside of here we'll have an h3 tag which will will render different information depending on not if we correctly guess the word in six attempts or if we failed so how do we determine that well we're going to come to our app.js file and i'll close all of this we'll come over here and we'll create a new state called gameover i'll just say const game over and set game over we'll set this equal to use state and then we'll put an object because there's two things i want to know wanna know first of all if the game is actually over and it will be false initially and then i also want to know if the person playing actually guess the correct word and it will also be false initially so we'll pass both of this to our thing over here so we'll pass this and then we'll pass the game over state as well like this and then what we can do is come to the game over component and just grab all of this information from the context we'll set it equal to use context and we'll pass the app context that we created that we also need to import then we'll grab the game over and the set game over then we'll just import the app context like this we'll say import app context set it equal to actually say from dot slash app and then um we'll just grab this and then we now have access to knowing if the game is over or not and also if the person gets the word or not so we can say something like this if the game over dot guess word so if the person actually gets the word then we'll make this h3 say um you correctly guessed or something like that but if it doesn't if the person didn't guess the word then we'll just say you failed or something like this you can you can make this look better but we'll just keep it like this for now um then we'll also create another an h1 tag over here which will say the correct word will list out the correct word and to have x is the correct word we'll just grab it over here like this and we'll just put it right over here and then um we'll ask okay if game over dots guess word then we want to say how many attempts it took for this person to guess the word so this will only be called if the person actually guessed the word if they failed you'll only see two of this but if they won then you'll see the three of them and what we want to show is just an h3 tag like this saying you guessed in and then we'll put um some attempts like this and we need to grab the cur the current attempt to have access to the amount of attempts they had so we'll say cur attempt over here and we'll just put cur attempt dot attempt and we'll save this now we have our game over component kinda done but we currently are not displaying it anywhere in our screen um the way we're going to display it is we'll come to our app.js over here and depending on not like what i want to show is i want to still show the board but i want to remove this keyboard and show the game over component down here so what i'll do is i'll just put a conditional for this keyboard like this and say okay if game over dot game over is true so the game actually ended then i want to show the game over component but if it's not true then the game is still running then i want to show the keyboard and let's check to see if this is working oh it actually won't work right because we haven't done it we haven't set game over to be done when you actually win the game and the way we're gonna actually do that is we actually need to detect to see if the person won or not we already have it over here that it will alert a message saying game ended but now we'll just say set game over to be equal to an object saying game over is equal to true because the game has ended and the guest word is also true because the person actually gets the word but right after and we'll just return we'll say like return because oh and i need to make this true we'll say return because then we don't want to continue moving forward because right after this we'll say if the current attempt that attempt is equal to five so if this is your last attempt and um you didn't pass the correct word check me the word you just guessed is not the correct one then you literally failed so i'll just say set game over equal to the game over it is true it ended but guess word is equal to false because you didn't guess the word in six attempts so now let's go over here and let's try um i'll just guess um false first i'll then i'll try wrong i know those words are wrong but then i'll try the correct one which is right and as you can see it says you correctly guessed um correct the word is is right and you guessed it in three attempts now let's try to fail i'll just guess wrong for all of them um like this and hopefully when we get to the end it should say uh you failed the correct word was right yeah it works perfectly um you can style it a little bit better if you want to but that's basically it for the the game over effect literally the last thing we're going to do inside of this project is making so that we don't have to um we don't have to set the the correct word um on our own right because if i want to play this i don't want to know the word beforehand right i want to actually give i wanted to give me a random word and the way we can do this is actually not as hard as you would imagine we can come over here to the words file that we created which includes the generate word set and inside of here we'll basically create a variable called today's word and we'll just um down here right before like it's before we define a set we'll say today's word is equal to um some elements in the word array which includes all the words and the bank but we'll just grab a random element in this array and make it the word the correct word that we need to guess the way we grab a random element in an array is by saying dot floor to to round it down and then say math dot random and multiplying it times the length of the array which will be word array dot length now this should just give us back um a random element in the array and that will be our word that we have to guess and at the end we can just return today's word so that when we go to our app.js and create a state called correct word like this now the the variable correct word is not a variable anymore now it's just an actual state we'll say correct word and set correct word and this will be equal initially to an empty string like this and like this and then when we ch when we generate the word set we now can say that the the today word so the set correct word is equal to words um no no word said words dots today's word and now that should work perfectly because um we're guessing the correct word so let's try this out um let's try uh it's not right anymore so let me try right so none of the letters are there let's try false none of the letters are there let's try dream none of the letters are there too let's try um wrong and none of the letters are there too um i i know what the issue is but i want you guys to realize what the problem is right now when we created the correct word before we automatically set it equal to um a variable where the value was all encapsulators and all of our project is done in caps letter but the txt file again it's in lower case so the only change we have to make is on our letters component over here when we check to see if it's correct or not we can basically just turn this to be uppercase so correct word to uppercase like this and then if we try again you can see that i'll refresh the page let's try right you can see now it's actually telling us so um it ends with t let's try best sketch now uh let's try false i know it doesn't end with t but just just to get okay let's try wrong okay um i have no let's try scout okay yeah okay but i will probably not guess this but you can see it's actually a random word and every time you refresh this it will give us a new word i'll try right again see it's not the same word because there's no t um actually i think is this right yeah i guess the word yeah so this is good so you you can see it's working um now there's many other functionalities you could add here uh you could add the fact that um every day it gives a random word just for that day and you can't play it anymore now i didn't want to do that because um i actually wanted to play the same thing a lot of times especially for testing and it's just an unnecessary feature in my opinion um to add in this video but if you guys are interested and you guys like the video i can definitely make a second part to it where i add a lot of the features that are left which aren't a lot but um for example this one the animations if you guys want to maybe like recording your scores all of that i can definitely do it in the next video if you guys want to but this is basically it for um the wordle tutorial i have a lot of fun building this um it is a complicated project uh trust me um so it's completely understandable if you guys have a little bit of difficulty understanding some parts of the code but what i would do is i would try to maybe just like slowly try to understand and read every part of the code to try to get what everything does try to understand what each of these states does so that um you actually understand what they do when you're looking at them because we just use the same states a lot of times right and then just try to add one of the features that i mentioned now on your own try to play around with the code and add some features and i think it should be a really good learning experience now if you guys enjoyed this video please leave a like down below and comment what you want to see next subscribe because i'm posting um once or twice a week depending on the week and i would massively appreciate it if you guys help support the channel um and yeah that's that's basically it again thank you skillshare for sponsoring this video you can check their link in the description it's a really good platform and and yeah that's basically it really hope you guys enjoyed it and i see you guys next time [Music] [Applause] [Music] [Applause] you

Channel: PedroTech

Views: 40,116

Keywords: crud, css, databases, javascript, learn reactjs, mysql, nodejs, programming, react tutorial, reactjs, reactjs beginner, reactjs tutorial, typescript, react js crash course, react js, node js, express js, pedrotech, traversy media, traversymedia, clever programmer, tech with tim, freecodecamp, deved, pedro tech, wordle, wordle clone react, wordle clone, react resume, react resume project, react project, react tutorial beginner, react beginner, react beginner tutorial, web development

Id: WDTNwmXUz2c

Length: 92min 32sec (5552 seconds)

Published: Tue Mar 15 2022