🎯 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
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.
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
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 TH-cam sir❤
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.
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(); }
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
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 ❤
🎯 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?
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🙏
Very Informative Sir 😘
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
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.
This is awesome tutorial, i can now easily make tic tac toe game. Thanks for this ❤ best yourube channel to learn frontend development.
Thanks for this video, Need a Javascript video continuation....
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.
Thank you for such valuable content.
At timestamp 16:50,
In TicTackToe Component,
Why have you repeated the code from line 61 to 64?
Change data values.
It is not working properly
Bhai tumne data array ko tictac ka function hai na usse bahar karo sayad kaam kar jaye ye
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
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 TH-cam sir❤
which website you not made pls tell whenever i search any react related query i always found your channel
Love and guidance ❤
Nice tutorial 😊
3:50 I'm not getting that automatically 😅 it's not importing...need help
Nice project made it but if I click at same postion more than once the output is different
i tried following your code but i have 'useState' is not defined no-undef error popping up.
cool game making bro
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.
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'; "
Do you need channel seo manager?
Thank You
Awesome keep it up .
.
Bro on the next Please make a video about full stake freelancer website
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
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
Wonderful, friend.
It was very useful
Please make some videos with Svelte or SvelteKit...
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
thank you
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
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
Connecting and retrieving the data from mongo db for these pages
guys i am getting error in @4:44
çok teşekkürler :)
how to create mulitple product details page in single html page using JavaScript please reply sir
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
Thanks...
hi bro there is bug, where i finished game with toe. You haven't checked this situation.
Reset the counter on reset
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 )
more react content
Nice
how to add draw condition?
Why does my toggle function not working?
Listen tumne data array ko sayad tictac toe ka component ke upar declarr karo chal jayega
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!';
}
pls provide your Git hub link
What if we do designing this from Tailwind CSS
Ans:
It will become FAST AND FURIOUS😅
bro you are missing the condition that if the game draws .
Please provide git link
Awesome
Bro can you send code please.
What if the game gets a Draw?
Good question
then just reset lmao
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.
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