Amazing video. Started learning React 2 weeks ago slowly using Codecademy to get the basics down. I then decided to build my own Wordle to implement what I learnt in Codecademy, but soon learnt I didn't have a good-enough grasp about components interacting (in particular, the use of AppContext). Searched and found your video and boom this is perfect. Slowly chipped away at this video maybe 20 minutes a day and it has been amazing to grow my understanding. I will now look to implement other features on top of this (such as a nav bar, perhaps some animation and I would love to capture play statistics). Thank you so, so much!
Hey @PedroTech great video 🙌. At 1:30:31 you guessed the word but it didn't render the GameOver component. And I poked around in the code and realized that currWord is in uppercase. And it's solved by adding .toLowerCase() in for loop in onEnter function.
Seriously, the implementation of the logic behind this project is mind-blowing. I really enjoyed the thinking and implementation. Logic has been my most intimidating skill in programming. I find it difficult to think and implement with code, and it is my biggest roadblock. Any tip?
I appreciate it :) I agree with you, coming up with logic is really daunting, and till this day I still struggle sometimes. The way I practice is by challenging myself with new projects that I know will require me to think logically. I also make sure I get as little help as I can from existing projects. Like, for this wordle, I had a basic idea in my head of what I wanted to do, but as I built the project I would be constantly finding bugs and tweaking my initial idea. So at the end, there is a working project!
What a legend. I will use the concepts learned here to incorporate this in my next project that will allow individuals to play three different games as part of an entire larger web application.
Dude, amazing stuff thanks for everything! It would be cool to see like a twitter clone or linked in clone using React, redux toolkit and firebase v9. Most out are outdated
An excellent video. Thank you Pedro. Just done slightly too fast for me, but that is a minor issue. Yes please to the next video that 'finishes off' Wordle.
at 1:30:39, your first guess was RIGHT which has the letter T(which is also a part of WRITE but not in the correct position) but it doesnt get highlighted in yellow. Is it because you are supposed to put the uppercase part for the almost part too?. Great video btw, learnt a lot.
Hello 😊 I am trying to learn react and and I started with a long tutorial. I wanted to have some projects where can I apply the concepts learned, and seems the games can be good start, besides folowing the tutorial You explained it very well, nice tutorial, but for me seems that app function i's too big. I think you could have this in a separate file where you could have the provider there added, as a separate component. And then you can have wrap the 2 components, Board and Keyboard inside of it. But anyway, congrats and thank you!
I completed this and am getting 'word not found' for everything, I tried cloning your repo and still got the same thing. Any chance you know what im doing wrong? thanks in advance!
Hi Pedro, great tutorial! I'm just wondering if we could use class instead of IDs for the bigKey and colors? I think IDs should be unique in HTML. Thanks!
Hi Pedro Can you make a video on google map that's a bit urgent as I am working on a project but after watching a lot of tutorials and google search I couldn't find the one which worked for me I understand your way of building concept which is very clear in each video please make one for me and also teach how to implement some functionalities on map , Love from pakistan
Hi PedroTech, thanks for all the support for react /javascript developers, my request is please do a react video how to use* All the FORM components like radio btn, select box,Checkbox,input, ,calendar etc,and group of those elements* and practically what we use in industry to build apps **without any third part library please only use pure react with hooks***,bcz it will give the clear idea before moving in to formik or any other libruary,i would appreciate if u can use Mongodb for this.I know u will help on this.
Hey Pedro, Thanks for the video I tried out the code but I am getting the alert 'Word not found' after the first attempt no matter what I type and the game does not progress to row two. I tried using your code fromyour repo but same problem.
I am stuck on the has function, what to do? its not searching through the word bank. I console logged and saw it was taking the correct input for searching only still it can't find the word.
I had the same issue. I added the .toLowerCase() to the end of the current Word since the words from the wordbank set are in lowercase. if(wordSet.has(currentWord.toLowerCase())){
I think the logic for checking if the word will fail if the word has an alphabet which appears more than once, eg: Shoot what about this ? If user enters scout or scoot wouldn't this fail ?
yes, when the word was "RIGHT" and he entered "RIGTT", the first "T" became yellow (1:00:40). According to the rules of Wordle, though, it should have turned gray since there is only one "T" in the word and it has already been found as correct.
@@ua2894 yeah I think this algo will fail where users enters words with multiple alphabets or if the wordle itself has multiple alphabets. To solve this I suppose you have to run two loops seperately for perfect match and almost match.
Good video BUT i have BIG problems seeing anything with that dark background och dark font-color, is it a div? a nav? bracket? conditionals... so hard to see...
I am unable to type letter after first word is typed what's the issue can't understand? After lot of Time after debugging I copied your code but the same issue Plz help sir
We can add a reset button if we want to, so the user can keep playing: // Reset the game function (Add right above first useEffect statement) const resetGame = () => { // Reload the page to reset the game window.location.reload(true); }; // Add under return Reset Game in app.js under h1Wordle
I am getting the alert message for the correct words as well, can anyone tell where is the issue? i rechecked the code but I couldn't find the problem, can anyone suggest where it must have went wrong?
I'm having problem with deployment, its working fine on my local but when I make it live of host it on netlify its breaking saying "Word is not found in bank" not able to figure out. If someone have done this please share. Thank you!
The use effect function is not working in the app.js file. This is the error I`m getting "Uncaught TypeError: (0 , react__WEBPACK_IMPORTED_MODULE_1__.useEffect) is not a function" Do you know why?
the error you didnt resolved is that if a person is gusseing a word that doesnt exist at the last attempt it is increasing the attempt count and thus having a gameover is triggered and resulting in failed.
Can you paste your code? My guess is that u defined word with capital W but used lowercase w. Also, maybe you forgot to import the word variable from the context
I had this issue as well and have not yet solved it. The words.wordSet is loading correctly, but after setWordSet(words.wordSet), the wordSet isn't actually being populated for some reason. setWordSet(words.wordSet); setCorrectWord(words.todaysWord); console.log("words.wordSet has " + words.wordSet.size + " words, but wordSet has " + wordSet.size + " words"); Console: words.wordSet has 2315 words, but wordSet has 0 words
how to add reset function without reloading the page, but adding all states to default? why this function not working? const resetGame = () => { setBoard(startingBoard); setCurrAttempt({ attempt: 0, letterPos: 0 }); setGameOver({ gameOver: false, guessedWord: false }); setDisabledLetters([]); // generateWord().then((randomWord) => setCorrectWord(randomWord)); };
yo guys found the solution! setBoard(defaultBoard) isn't working because, the value of defaultBoard which should have been empty is changed to the typed letters, dunno why.. so manually put > setBoard(//manually put empty matrix of 6*5//) here. and it will work. cheers mate!
My code wasn't working just debugged it, all thanks to you ...I just replaced " " with your one.I wonder how come he is getting no error and how come it solved my problem ..Any idea ?
Anyone else have an issue at to where the GameOver component is not rendering after implementing the random word functionality? I have everything working, even when the user does not get the correct word, but it does not change when I do the correct word. I think it has something to do with this part: let currWord = '' for (let i = 0; i < 5; i++) { currWord += board[currAttempt.attempt][i] }
I figured it out. change: if (currWord() === correctWord) { setGameOver({gameOver: true, guessedWord: true}) } to if (currWord.toLocaleLowerCase() === correctWord) { setGameOver({gameOver: true, guessedWord: true}) } Otherwise the current guess will be uppercased and the correct answer is lowercased hence the app will not recognize it as correct
@@rafaelrios5250 i solved the problem with the .trim function because there were some weird spaces in of the consts if (currWord.trim().toLowerCase() === correctWord.trim().toLowerCase()) { setGameOver({gameOver: true, guessedWord: true}) }
The first 1,000 people to use this link will get a 1 month free trial of Skillshare: skl.sh/pedrotech03221
1 month free trial for 24 bucks
Amazing video. Started learning React 2 weeks ago slowly using Codecademy to get the basics down. I then decided to build my own Wordle to implement what I learnt in Codecademy, but soon learnt I didn't have a good-enough grasp about components interacting (in particular, the use of AppContext). Searched and found your video and boom this is perfect. Slowly chipped away at this video maybe 20 minutes a day and it has been amazing to grow my understanding.
I will now look to implement other features on top of this (such as a nav bar, perhaps some animation and I would love to capture play statistics).
Thank you so, so much!
Hey @PedroTech great video 🙌. At 1:30:31 you guessed the word but it didn't render the GameOver component. And I poked around in the code and realized that currWord is in uppercase. And it's solved by adding .toLowerCase() in for loop in onEnter function.
Can you explain where should I add that?
@@sourajitachanda291 currWord += board[currAttempt.attempt][i].toLowerCase(); inside the App.js->onEnter->for loop
totally helped with that one, thanks
Seriously, the implementation of the logic behind this project is mind-blowing. I really enjoyed the thinking and implementation. Logic has been my most intimidating skill in programming. I find it difficult to think and implement with code, and it is my biggest roadblock. Any tip?
I appreciate it :) I agree with you, coming up with logic is really daunting, and till this day I still struggle sometimes. The way I practice is by challenging myself with new projects that I know will require me to think logically. I also make sure I get as little help as I can from existing projects. Like, for this wordle, I had a basic idea in my head of what I wanted to do, but as I built the project I would be constantly finding bugs and tweaking my initial idea. So at the end, there is a working project!
@@PedroTechnologies this is encouraging
I have seen many wordle clone, but i think your's is the most efficient one, well structured
Pedro, thank your for this amazing project! I really appreciate you using Context API here. Can't wait to watch the second part 👏
this video is very underrated
explanation of your code in every step is perfect even for people that just started working with react
thanks man
Bro pls start a series using redux with frontend and rest api with backend.
Maybe next video or the video after :)
Yes plz make the second part.. Plz plz... Lots of things we learn from you. Thanks Pedro
What a legend. I will use the concepts learned here to incorporate this in my next project that will allow individuals to play three different games as part of an entire larger web application.
My mind is blown. 🤯
You are a champ bro. 🙇🏻♂️❤️
Superb explanation!
Muchas gracias Pedro!
great video pedrotech. was super fun hoping for more fun projects like this
You explained everything very nicely. Thankyou!!
I was finding some course/video to clone quordle and then came across this video, helped me a lot.
Thank you.
And waiting for second part.
Many thanks, you really helped me to understand a lot of concepts in react js.
Dude, amazing stuff thanks for everything! It would be cool to see like a twitter clone or linked in clone using React, redux toolkit and firebase v9. Most out are outdated
🔥Pedro, thanks! Very good tutorial and excellent learning material. super! 👍
Glad you liked it!
GOAT! I always learn a lot from your videos!!
Glad to hear it! Giuliao
Great project.... Thanks bro 🔥🔥
Glad you like it!
An excellent video. Thank you Pedro. Just done slightly too fast for me, but that is a minor issue. Yes please to the next video that 'finishes off' Wordle.
Omg, great video Pedro as usual! This was amazing!
at 1:30:39, your first guess was RIGHT which has the letter T(which is also a part of WRITE but not in the correct position) but it doesnt get highlighted in yellow. Is it because you are supposed to put the uppercase part for the almost part too?. Great video btw, learnt a lot.
did you get the answer?
It’s really helpful for training react-hooks! Thank you 🙏
Hello 😊
I am trying to learn react and and I started with a long tutorial.
I wanted to have some projects where can I apply the concepts learned, and seems the games can be good start, besides folowing the tutorial
You explained it very well, nice tutorial, but for me seems that app function i's too big. I think you could have this in a separate file where you could have the provider there added, as a separate component.
And then you can have wrap the 2 components, Board and Keyboard inside of it.
But anyway, congrats and thank you!
Can you do a video on Jest and testing in general ? Like what should we test and an actual real world examples
thanx a lot, PEDRO!
I completed this and am getting 'word not found' for everything, I tried cloning your repo and still got the same thing. Any chance you know what im doing wrong? thanks in advance!
I'm stuck in the same issue.
same
Try const wordArr = result.split("
") in generateWordSet . solved from @Alexandra Baturina thanks
@@bureact Legend this worked thank you so much
The OP project
Thank you for this tutorial 😊 Can we use this project in our portfolios and do we need to attribute you?
Thanks bro, it's well explained 👏
thanks from india keep going sir
Hi Pedro, great tutorial! I'm just wondering if we could use class instead of IDs for the bigKey and colors? I think IDs should be unique in HTML. Thanks!
Hi Pedro Can you make a video on google map that's a bit urgent as I am working on a project but after watching a lot of tutorials and google search I couldn't find the one which worked for me I understand your way of building concept which is very clear in each video please make one for me and also teach how to implement some functionalities on map , Love from pakistan
great tutorial mate !
Hi PedroTech,
thanks for all the support for react /javascript developers,
my request is please do a react video how to use* All the FORM components like radio btn, select box,Checkbox,input, ,calendar etc,and group of those elements* and practically what we use in industry to build apps **without any third part library please only use pure react with hooks***,bcz it will give the clear idea before moving in to formik or any other libruary,i would appreciate if u can use Mongodb for this.I know u will help on this.
Muito bom, mano!!!!
Parabéns!
God bless you!
Please make more video's on react and react projects
I will :)
when clicking letters on the keyboard, the letters appear vertically on the board, not horizontally. Anyone has a similar issue?
its work my localhost but doesn't work on github pages. i have an error Word not found. Anyone help me ?
I have the same error on Vercel. Can someone explain why only works on local servers?
I'm also having same error can anyone please check this out?
Hey Pedro,
Thanks for the video I tried out the code but I am getting the alert 'Word not found' after the first attempt no matter what I type and the game does not progress to row two.
I tried using your code fromyour repo but same problem.
I am stuck on the has function, what to do? its not searching through the word bank. I console logged and saw it was taking the correct input for searching only still it can't find the word.
I had the same issue. I added the .toLowerCase() to the end of the current Word since the words from the wordbank set are in lowercase. if(wordSet.has(currentWord.toLowerCase())){
could you please make a serie about data structure and algorithms
Hey Pedro I am big fan, please start full course using redux with frontend and rest api with backend and please use MySQL database to store data
I think the logic for checking if the word will fail if the word has an alphabet which appears more than once, eg: Shoot what about this ? If user enters scout or scoot wouldn't this fail ?
yes, when the word was "RIGHT" and he entered "RIGTT", the first "T" became yellow (1:00:40). According to the rules of Wordle, though, it should have turned gray since there is only one "T" in the word and it has already been found as correct.
@@ua2894 yeah I think this algo will fail where users enters words with multiple alphabets or if the wordle itself has multiple alphabets. To solve this I suppose you have to run two loops seperately for perfect match and almost match.
@@mob_abominator1868 does someone knows how to fix this?
Good video BUT i have BIG problems seeing anything with that dark background och dark font-color, is it a div? a nav? bracket? conditionals... so hard to see...
Which theme, bro??
I am unable to type letter after first word is typed what's the issue can't understand?
After lot of Time after debugging I copied your code but the same issue
Plz help sir
me too
We can add a reset button if we want to, so the user can keep playing:
// Reset the game function (Add right above first useEffect statement)
const resetGame = () => {
// Reload the page to reset the game
window.location.reload(true);
};
// Add under return
Reset Game in app.js under h1Wordle
how to do it without reloading the page? as in SPA.
Hey, thanks for the video!
Please fix code link in the description, it leads to the tik-tak-toe, not wordle
Thank you! My bad, didn't see the link. Just changed it :)
Great work.
Pedro, Hello) In the very end of the video (1 hour 30 min) function 'almost' doesnot work acctially.
hi, to solve the problem that i mentioned you can write in App: setCorrectWord(words.todaysWord.toUpperCase())
@@ИннаБогданова-к4щ i love you
thank you so much
how can i contact you?
do you use telegram?
I am getting the alert message for the correct words as well, can anyone tell where is the issue? i rechecked the code but I couldn't find the problem, can anyone suggest where it must have went wrong?
I'm having problem with deployment, its working fine on my local but when I make it live of host it on netlify its breaking saying "Word is not found in bank" not able to figure out. If someone have done this please share. Thank you!
Having the same problem, please comment if you fixed it
i tried using this in Words.js , let wordArr = result.split(/
?
/).map(word => word.trim().toLowerCase()); this helped me fix the issue in deployment
The use effect function is not working in the app.js file. This is the error I`m getting "Uncaught TypeError: (0 , react__WEBPACK_IMPORTED_MODULE_1__.useEffect) is not a function" Do you know why?
01:30:33
t was in the word but it wasn’t highlighted as a yellow potential word
and the correct word was write
the yellow hint feature isn’t working
I added “toUpperCase()” to the “almost” constant in Letter.js and it resolved this issue
@@carlostbanks fixed it long ago… thank you very much still
Can you please make a video with email verification or OTP for login framework
Why in the last code example, the I and T didn't become yellow?
In the Letter.js file, the correctWord needs to include a lowercase version of the letter.
@@Mattch9 for const almost, change coorectWord to lowercase.
which theme do you use?
the error you didnt resolved is that if a person is gusseing a word that doesnt exist at the last attempt it is increasing the attempt count and thus having a gameover is triggered and resulting in failed.
there is a problem in this we are able to submit the same word more than once which we dont want
but almost wright(yello part) thing is not working....
@Pedro
i'm getting an error which says Word Not Found! Anyone got it? I've been trying to troubleshoot it for a long time
Can you paste your code? My guess is that u defined word with capital W but used lowercase w. Also, maybe you forgot to import the word variable from the context
@Unassailable Optimist I had the same issue. Try const wordArr = result.split("
") in generateWordSet - it will remove all spaces.
I had this issue as well and have not yet solved it. The words.wordSet is loading correctly, but after setWordSet(words.wordSet), the wordSet isn't actually being populated for some reason.
setWordSet(words.wordSet);
setCorrectWord(words.todaysWord);
console.log("words.wordSet has " + words.wordSet.size + " words, but wordSet has " + wordSet.size + " words");
Console:
words.wordSet has 2315 words, but wordSet has 0 words
@@alexandra_b This solved the issue for me. Thank you!
how to add reset function without reloading the page, but adding all states to default? why this function not working?
const resetGame = () => {
setBoard(startingBoard);
setCurrAttempt({ attempt: 0, letterPos: 0 });
setGameOver({ gameOver: false, guessedWord: false });
setDisabledLetters([]);
// generateWord().then((randomWord) => setCorrectWord(randomWord));
};
yo guys found the solution! setBoard(defaultBoard) isn't working because, the value of defaultBoard which should have been empty is changed to the typed letters, dunno why.. so manually put > setBoard(//manually put empty matrix of 6*5//) here. and it will work. cheers mate!
Please build a card game(drinking game) in react/react native. Thanks in advance🙏
You're smart
🔥🔥🔥
logic isn't good what about t that turned yelow when you geuused already', but relly nice tutorial
18.35
If anyone finding difficult to split the word just try this :-
const WordArr = result.split(/
?
/);
Keep Coding 🙂🙂
My code wasn't working just debugged it, all thanks to you ...I just replaced "
" with your one.I wonder how come he is getting no error and how come it solved my problem ..Any idea ?
Anyone else have an issue at to where the GameOver component is not rendering after implementing the random word functionality? I have everything working, even when the user does not get the correct word, but it does not change when I do the correct word. I think it has something to do with this part:
let currWord = ''
for (let i = 0; i < 5; i++) {
currWord += board[currAttempt.attempt][i]
}
I figured it out.
change: if (currWord() === correctWord) {
setGameOver({gameOver: true, guessedWord: true})
}
to
if (currWord.toLocaleLowerCase() === correctWord) {
setGameOver({gameOver: true, guessedWord: true})
}
Otherwise the current guess will be uppercased and the correct answer is lowercased hence the app will not recognize it as correct
@@rafaelrios5250 i solved the problem with the .trim function because there were some weird spaces in of the consts
if (currWord.trim().toLowerCase() === correctWord.trim().toLowerCase()) {
setGameOver({gameOver: true, guessedWord: true})
}
thank you king
@@OskarsBestt