Hey brother I really like your teaching style. A single request to make a playlist of react so that it becomes easy to access react videos only. Pleazzzzzzzzzzzzzzzzzzzzz🙏
Great, bu there will be a bug in this game, that is once you double click on already selected box you can again do the same move. I mean, if you click once a box and you get cross, thenagain click on the same box, and then try clicking another block, you will get cross again but whereas you should get a circle.
🎯 Key points for quick navigation: 00:00 *🎮 Setting up Tic Tac Toe Game Board* - Setting up the initial game board with boxes that toggle between Cross and Circle icons. - Creating a reset button to clear the game board and start over. 01:48 *🛠️ Cleaning and Configuring React Project* - Removing default React project elements and renaming the project. - Configuring folder structure and basic setup for Tic Tac Toe component. 03:09 *🖼️ Adding Assets and Styling* - Importing and using game icons (Cross and Circle) from assets folder. - Setting up basic CSS for the game board, title, and reset button. 09:04 *⚙️ Implementing Game Logic: Toggle Functionality* - Implementing toggle functionality to switch between Cross (X) and Circle (O) icons on click. - Managing game state with a data array to track moves and check for a winner. 13:24 *🏆 Implementing Win Condition* - Creating a function to check for win conditions after each move. - Displaying a congratulations message and locking the board upon winning. 17:09 *🎉 Displaying Winner and Resetting the Game* - Updating the title with the winner's icon and message upon winning. - Adding functionality to reset the game board and title after a win or reset button click. Made with HARPA AI
Dam, some bad practices here (inerhtml, writing the blocks one by one, writing EVERYTHING in one file, box i is also box i-1...) But it was helpful as some way to start.
nice tutorials but please with the rows in the board i think it show be column instead. So maybe column1, column2, column3 because it almost confused me when i opened in the developer tools with chrome
Hey I am here after like years, And I just remembered from Whom I used to learn back in those days So I searched easy tutorials and yeah Why yall changed the name and are there multiple teachers now?
Hi Ayan, Thanks for coming back. I find GreatStack more relevant to the content we make. Yes, now we are working as a team. Btw, I really liked your Netlify portfolio site.
Sir thankyou for Your response Sometimes I feel very demotivated I think I am lost my family ,relations bcz lack of IT job 😅. Again thanks to you for your coding contribution on UA-cam sir❤
Good try, keep it up, I would suggest to study more about the logics before making video. You don't need multiple references for reset, you can do it in better way without multiple reference, the data that you stored could be a state, the conditions are really messed. The counter update is not the correct way either, lots if duplicacy.
You need to explain the conditions which you are using and why you are using You are just saying we will set ,we will create ., but need to explain why it is needed there
Line 11:23: 'useState' is not defined no-undef Line 12:22: 'useState' is not defined no-undef Line 20:13: 'e' is not defined no-undef Line 25:13: 'e' is not defined i am having the above issue help me
bugs alert! if you try to click again the box which is already clicked you will get an error and the count of value is increament as well. use bellow fixed toggle method to escape the issue! const toggle =(e,num)=> { if(lock){ return 0; } if (count%2 === 0){ e.target.innerHTML = ``; if(data[num] === "" ){ data[num] = "x"; setCount(++count); } } else{ e.target.innerHTML = ``; if(data[num] === "" ){ data[num] = "o"; setCount(++count); } } checkwin(); }
create variable like is draw let isDraw=false; then modify cheeckwin with include the draw condition else if (!data.includes("")) { . isDraw = true; setLock(true); titleRef.current.innerHTML = 'It\'s a Draw!'; }
const reset = ()=>{ setLock(false); // let data = ["","","","","","","","",""]; data.fill(""); titleRef.current.innerHTML = 'Tic Tack Toe Game In React' boxArray.map((e) =>{ e.current.innerHTML = ""; }) setCount(0); } this help to solve me the bug which is when i resets the game and make one move instanly it satys wins
FINALLY MY FIRST REACT PROJECT THAT WORKS!
works almost fine, but if you try it, you will see that you can put two elements on top of eachother, because it doesnt check if the box is empty
Thank you for this awesome tutorial ❤
great and straightforward way😍
Hey brother I really like your teaching style. A single request to make a playlist of react so that it becomes easy to access react videos only. Pleazzzzzzzzzzzzzzzzzzzzz🙏
This is awesome tutorial, i can now easily make tic tac toe game. Thanks for this ❤ best yourube channel to learn frontend development.
Great, bu there will be a bug in this game, that is once you double click on already selected box you can again do the same move. I mean, if you click once a box and you get cross, thenagain click on the same box, and then try clicking another block, you will get cross again but whereas you should get a circle.
if (count%2==0) {
if(data[num] === "" ){
e.target.innerHTML=``
data[num]="x"
setCount(count+1)
}
}
if (count%2!=0) {
if(data[num] === "" ){
e.target.innerHTML=``
data[num]="O"
setCount(count+1)
}
}
checkwin()
}
this will do
🎯 Key points for quick navigation:
00:00 *🎮 Setting up Tic Tac Toe Game Board*
- Setting up the initial game board with boxes that toggle between Cross and Circle icons.
- Creating a reset button to clear the game board and start over.
01:48 *🛠️ Cleaning and Configuring React Project*
- Removing default React project elements and renaming the project.
- Configuring folder structure and basic setup for Tic Tac Toe component.
03:09 *🖼️ Adding Assets and Styling*
- Importing and using game icons (Cross and Circle) from assets folder.
- Setting up basic CSS for the game board, title, and reset button.
09:04 *⚙️ Implementing Game Logic: Toggle Functionality*
- Implementing toggle functionality to switch between Cross (X) and Circle (O) icons on click.
- Managing game state with a data array to track moves and check for a winner.
13:24 *🏆 Implementing Win Condition*
- Creating a function to check for win conditions after each move.
- Displaying a congratulations message and locking the board upon winning.
17:09 *🎉 Displaying Winner and Resetting the Game*
- Updating the title with the winner's icon and message upon winning.
- Adding functionality to reset the game board and title after a win or reset button click.
Made with HARPA AI
How do you do that brother?
You videos are alright. A bit more explanation would be great. As a beginner I don't understand, why some steps are done in your tutorial.
Very Informative Sir 😘
Thank you for such valuable content.
Dam, some bad practices here (inerhtml, writing the blocks one by one, writing EVERYTHING in one file, box i is also box i-1...)
But it was helpful as some way to start.
nice tutorials but please with the rows in the board i think it show be column instead. So maybe column1, column2, column3 because it almost confused me when i opened in the developer tools with chrome
Thanks for this video, Need a Javascript video continuation....
Nice tutorial 😊
It is not working properly
Bhai tumne data array ko tictac ka function hai na usse bahar karo sayad kaam kar jaye ye
Hey I am here after like years, And I just remembered from Whom I used to learn back in those days
So I searched easy tutorials and yeah
Why yall changed the name and are there multiple teachers now?
Hi Ayan, Thanks for coming back. I find GreatStack more relevant to the content we make. Yes, now we are working as a team. Btw, I really liked your Netlify portfolio site.
@@GreatStackDevhow to create username and highest score in sec.
Thankyou sir
You're welcome. 😊 Keep coding.
Sir thankyou for Your response
Sometimes I feel very demotivated
I think I am lost my family ,relations bcz lack of IT job 😅.
Again thanks to you for your coding contribution on UA-cam sir❤
which website you not made pls tell whenever i search any react related query i always found your channel
Love and guidance ❤
Awesome keep it up .
.
It was very useful
Thank You
Nice project made it but if I click at same postion more than once the output is different
çok teşekkürler :)
i tried following your code but i have 'useState' is not defined no-undef error popping up.
Wonderful, friend.
Good try, keep it up, I would suggest to study more about the logics before making video.
You don't need multiple references for reset, you can do it in better way without multiple reference, the data that you stored could be a state, the conditions are really messed. The counter update is not the correct way either, lots if duplicacy.
hiiiii
cool game making bro
At timestamp 16:50,
In TicTackToe Component,
Why have you repeated the code from line 61 to 64?
Change data values.
Bro on the next Please make a video about full stake freelancer website
thank you
Do you need channel seo manager?
If the game results in a tie, then upon clicking on the reset button it gives error!
You need to explain the conditions which you are using and why you are using
You are just saying we will set ,we will create ., but need to explain why it is needed there
Line 11:23: 'useState' is not defined no-undef
Line 12:22: 'useState' is not defined no-undef
Line 20:13: 'e' is not defined no-undef
Line 25:13: 'e' is not defined
i am having the above issue help me
At 9:29 const toggle = (e,num) =>{ replace w with e
and for useState you need to import it " import { useState } from 'react'; "
Awesome
Nice
Thanks...
hi bro there is bug, where i finished game with toe. You haven't checked this situation.
why images are not showing when i import
Ap me image Ka path nhi dia ho ga ap ise public ke app SE import karva do
i m doing the same but titleRef is undefined showing what should i do
you must have written let titleRef= useRef(null); so above write import{useRef} from "react"; it would work
Please make some videos with Svelte or SvelteKit...
npm create-react-app . is taking hours to install. What should I do?
First you need to install node js on your system
npm create vite@latest
Sir my output is showing error that e is not defined and useRef is not defined why is that
useRef should be inside: const TicTacToe = () => { let titleRef = useRef(null);
}
and in
return ( Tic Tac toe Game In React )
Connecting and retrieving the data from mongo db for these pages
bugs alert!
if you try to click again the box which is already clicked you will get an error and the count of value is increament as well.
use bellow fixed toggle method to escape the issue!
const toggle =(e,num)=>
{
if(lock){
return 0;
}
if (count%2 === 0){
e.target.innerHTML = ``;
if(data[num] === "" ){
data[num] = "x";
setCount(++count);
}
}
else{
e.target.innerHTML = ``;
if(data[num] === "" ){
data[num] = "o";
setCount(++count);
}
}
checkwin();
}
great
Reset the counter on reset
how to add draw condition?
bro you are missing the condition that if the game draws .
how to create mulitple product details page in single html page using JavaScript please reply sir
How to add draw msg, if there is draw?
create variable like is draw
let isDraw=false;
then modify cheeckwin with include the draw condition
else if (!data.includes("")) {
.
isDraw = true;
setLock(true);
titleRef.current.innerHTML = 'It\'s a Draw!';
}
Why does my toggle function not working?
Listen tumne data array ko sayad tictac toe ka component ke upar declarr karo chal jayega
more react content
What if we do designing this from Tailwind CSS
Ans:
It will become FAST AND FURIOUS😅
guys i am getting error in @4:44
pls provide your Git hub link
What if the game gets a Draw?
Good question
then just reset lmao
Please provide git link
Bro can you send code please.
Lol, react documentation game
bad pronounciation, couldnt understand words 9:24
Oh, poor of you, 1 work stoped you.
Go an learn some English so 1 word doesn't stop you next time. No problem for me.
3:50 I'm not getting that automatically 😅 it's not importing...need help
const reset = ()=>{
setLock(false);
// let data = ["","","","","","","","",""];
data.fill("");
titleRef.current.innerHTML = 'Tic Tack Toe Game In React'
boxArray.map((e) =>{
e.current.innerHTML = "";
})
setCount(0);
} this help to solve me the bug which is when i resets the game and make one move instanly it satys wins