Thank you everyone for all your wishes❤ I am feeling better. The voice in few parts of this lecture might feel slightly different as my throat is still infected. But will recover completely soon. Hope you enjoy the lecture❤
I don't know what's the magic in this tutor. Even though programming was a nightmare for me a few years back, now it's as easy as pie. Salute to this great teacher. A lot of respect from Pakistan.
00:01 Building a Tic Tac Toe game using JavaScript 01:55 Tic Tac Toe game basics in JavaScript 06:35 Creating interactive game boxes using buttons 09:08 Styling the game container and elements 13:42 Styling the tic-tac-toe game buttons 15:53 Setting up the game layout and styling 20:46 Creating and accessing 2D arrays 22:58 Working with 2D arrays in JavaScript 26:59 Setting the value to false for future turns 29:26 Implementing a function to check for the winner 32:56 How to check patterns of zero, one, and two in the Tic Tac Toe game 34:49 Accessing and storing values from Tic Tac Toe game boxes using JavaScript. 39:04 Implementing a new game button functionality 41:17 Using JavaScript to manipulate DOM elements and display messages based on game results 45:55 Creating functions for new game, enable boxes, reset values, and trigger events. 48:09 Creating a Tic Tac Toe game in JavaScript with styling and functionality 52:27 Tic Tac Toe game as a data structure algorithm problem in web development
Wese tu mai ne JavaScript ki bhot videos dekhi lkin actual mai JavaScript clear hona tab shura hua jabse apki ye JS series dekh raha hu or ye project that's super super amazing Thank you so so so much ❤❤❤ ❤ From Karachi
If we change the color of the "X" and "0" then we have to use box.style.color = "green" (you can use user favourite color,);It is used after the using ( box.innerText = "O") and ( box.innerText = "X")...
for add more color in your "X" or "Y" boxes.forEach((box)=>{ box.addEventListener("click",()=>{ console.log("box was clicked"); if (turnO){ box.innerText="O" ; box.style.color="red"; turnO =false; } else { box.innerText="X"; box.style.color="blue"; turnO=true; } box.disabled=true; chackWinner(); }); });
I did the draw condition as well! and I learnt a LOOOOOTTTTTT of things while solving it. I didn't copy all the code I tried solving it my way ofcrs refering to your lecture and my code is a bit lengthy and haphazard but I am sure I will be able to make it compact over time. Thank you so much didi! JS feels super interesting now!!! Also this one was my first js project and I am enthused to do more in the future!
Hi Shradha, Thank you for all the lectures you are providing. However in this particular tic tac toe chapter, I have a below query. The code we developed is always starting the game with player0 first. What if we want playerX to start the game? I mean what changes we can do to actually see which player is starting the game. It can be any player.
[0,1,2],simple counting [3,4,5],simple counting [6,7,8],simple counting [0,3,6],vertical count(0 to 6 first line up to down ) [1,4,7],vertical count( 1 to 7 first line up to down ) [2,5,8],vertical count( 2 to 8 first line up to down ) [0,4,8],cross count(0 to 8 first cross line count) [2,4,6],cross count( 2 to 6 Second cross line count) This is very easy way to learn the tic tac game counter .
not able to use eventListener Getting this error . Do help me out. Uncaught (in promise) Error: A listener index1.html:1 indicated an asynchronous response by returning true, but the message channel closed before a response was received
I add a very fantastic text glitter effects on " congratulation winner is o or X".....I completed this game using your code....thank you very much for your lovely teaching styles... keep it up...live you dear sister...and God bless you...❤❤❤❤❤
console.log(boxes[pattern[0]].innerText,boxes[pattern[1]].innerText,boxes[pattern[2]].innerText); this line of code is not working in vs code somebody please give me a solution
solution for draw condition: step 1: initialize a variable let click_count=0; in top after turn0. step 2: use else if condtion in checkwinner () function like this: if(pos1==pos2 && pos2==pos3){ // console.log(`Winner is ${pos1}`) Showwin(pos1); disable(); } else if(click==9){ msg.innerHTML="Match is draw"; msg.classList.remove("hide"); } step 3: set click_count=0; again in reset function. this will set the value 0 whenever game is restart
@@pawanshinde7585 yes, you are right but it will work if we initialize win=false in starting and make it true in winning condition then draw function will execute only when count===9 && win===false and also don't forget to make win=false again in reset function.
@@muskanquraishi2624 i have another idea which will work put break; condition in loop like after calling winner condition example if(true){ showWinner(); break; }else if(count==9){ draw(); }
I watched all the tutorials and solved practice questions as well but when I watched today's project I was able to do only html and css parts on my own and almost half of JS went sir k upr se it makes me depressed, i haven't learned a word since morning i would be glad if you could possibly reply or have any suggestionns😰😰
forEach function is applicable on arrays elements..nd u used it on elements that's not inside an array and it worked on ur system but when I am doing the same it's giving an js error of forEach is not a function
I didn't understand how the left upper box is taken as 1 then to its right is taken as 2, how did this numbering et fixed/mapped to each box, please reply didi
Let counter = 0; Let draw = () => { Counter++; If (counter === 9) { document.getElementbyId(Idname).innerText = "This Game Was Draw"; You can still see this statement when you click on reset game In reset game function you have to add document.getElementbyId(variable name).innerText = " " And call function after checkwinner That's it
00:01 Building Tic Tac Toe game in JavaScript 01:55 Tic Tac Toe Game Rules and Winning Patterns 06:35 Creating buttons for the tic-tac-toe game 09:08 Styling background color and container in JavaScript 13:42 Styling the tic tac toe game buttons 15:53 Styling the Tic Tac Toe game box and reset button 20:46 Creating and accessing 2D arrays in JavaScript 22:58 Creating win patterns for Tic Tac Toe game 26:59 Implementation logic for the tic-tac-toe game in JavaScript. 29:26 Implementing a function to track the winner in Tic Tac Toe game 32:56 Checking patterns of zero, one, and two at specific indices 34:49 Accessing and storing values for Tic Tac Toe game 39:04 Implementing a new game button and styling the message container 41:17 Using CSS to hide and show elements 45:55 Creating functions to disable and enable game boxes and reset the game. 48:09 Creating a Tic Tac Toe game and styling it with CSS 52:27 Tic Tac Toe game problem is related to data structures and algorithms in web development. me back hehehe
didi maine phle hi ek tictakto game bna lia hai using html,css and simple and basic JS and thats working well even i dont have laptop i need that and im searching for 2ndhand budget under 20k plz if you have then plz help
Facing a problem; when showWinner function is called from checkWinner and passed "pos1val" into it but in showWinner(winner) function the "winner" perameter is not reading the value from pos1val. so, it not printing who actually won X or O. why I'm facing the problem ??
msgContainer = (winner) =>{ WinMsg.innerText = `congratulations winner is ${winner}`; ........... etc........... }; Where you called this function pass this argument ... msgContainer(pos1val);
The buttons move down when clicked. I have tried adding "position: fixed" and "position: absolute" attributes in the .box class, but nothing seems to be working. Can anyone help, please?
Thank you everyone for all your wishes❤ I am feeling better.
The voice in few parts of this lecture might feel slightly different as my throat is still infected. But will recover completely soon. Hope you enjoy the lecture❤
How are you didi ? Thank you so much 👍😊😊
Didi top 5 comment krne walo ko reply diya kro please...
Welcome back ❤tbyt kesy apki ab
I am waiting for didi. hope you well🎉
Mam take care of your health frist 😊❤we are always enjoy your lectures😇
VOTE FOR REACT JS
Yessssssss🎉
any one in july 2024
Me!!
me
Me
Yes
Me
Mam, Please make a playlist on React js❤
Although this course is awesome 👍
me also waiting for this series
yes, please
i m also waiting for react series
Yes react js full course plz...now everyone asking for it
Yes mam
May 2024 wale jara attendance bnao ❤
Bro...Konsa Year?
Aagyi aagyi didi aagyi 🎉❤
😅
😂
Cringe af 💀
@@talibbb13 yes your username
😂😂😂@@talibbb13
I don't know what's the magic in this tutor. Even though programming was a nightmare for me a few years back, now it's as easy as pie. Salute to this great teacher. A lot of respect from Pakistan.
00:01 Building a Tic Tac Toe game using JavaScript
01:55 Tic Tac Toe game basics in JavaScript
06:35 Creating interactive game boxes using buttons
09:08 Styling the game container and elements
13:42 Styling the tic-tac-toe game buttons
15:53 Setting up the game layout and styling
20:46 Creating and accessing 2D arrays
22:58 Working with 2D arrays in JavaScript
26:59 Setting the value to false for future turns
29:26 Implementing a function to check for the winner
32:56 How to check patterns of zero, one, and two in the Tic Tac Toe game
34:49 Accessing and storing values from Tic Tac Toe game boxes using JavaScript.
39:04 Implementing a new game button functionality
41:17 Using JavaScript to manipulate DOM elements and display messages based on game results
45:55 Creating functions for new game, enable boxes, reset values, and trigger events.
48:09 Creating a Tic Tac Toe game in JavaScript with styling and functionality
52:27 Tic Tac Toe game as a data structure algorithm problem in web development
pocha kisine🤔
@@HamzaLiaqat5122 😅🤣😂🤣😅
thenk you so much brother💕💕
@@HamzaLiaqat5122 ME
winning pattern wali logic sahin se samaj nhi aai
kindly make a content on node js and mongo Db you are best coding teacher l have seen in youtube you explain complex topic
with easy example
arey bhai sabar karle! wo itna kuch free mein de rahe hai iska matlab ye nahi tum log kuch na kuch request karte hi jao
Mam, please take care of yourself. Your voice is so weak i felt .........🥺
Wese tu mai ne JavaScript ki bhot videos dekhi lkin actual mai JavaScript clear hona tab shura hua jabse apki ye JS series dekh raha hu or ye project that's super super amazing
Thank you so so so much ❤❤❤
❤ From Karachi
you know is vidio ma winning pattern kasa bana
We want More Javascript Projects for Practice 🤩😍 ..
Is it you executed it not right
you know is vidio ma winning pattern kasa bana
If we change the color of the "X" and "0" then we have to use box.style.color = "green" (you can use user favourite color,);It is used after the using ( box.innerText = "O") and ( box.innerText = "X")...
Thanks bro👍
thank youuuuuu
Love You Bro
Thank you bhai
If i type box.style right after box.innerTEXT.....it came box.computedStyle....i am able to do this
Tell me why?
can anyone help me?
I am facing typeerror:
with showWinner ,checkWinner function ,...?
Same
Can you show me that code?
Can anyone please help me find out why my external js is not linking to html ,
this is my tag
that shoud be in same file
I am unable to find the solution to change the text color of O and X.
plz help
const checkDraw = () => {
let filledBoxes = 0;
for (let box of boxes) {
if (box.innerText !== '') {
filledBoxes++;
}
}
if (filledBoxes === 9) {
msg.innerText = "It's a draw!";
msgContainer.classList.remove("hide");
disable();
}
};
Thanks for this code
vote for React js by shradha didi
Yes!!!
First java script project done by you thanks for your valuable content Keep Smiling Dii💗❣
Is your javascript code run ? Because I also do the same but it is not working for me . Could you tell me what the reason is ?
Review your code once well and then try
@@NidhiKumari-oy4oe review your code once and then try again if the issue is not resolved then tell me
#homework
boxes.forEach((box) => {
box.addEventListener("click", () => {
console.log = ("box was clicked")
if(turnO){
box.innerText = "O";
box.style.color = "green"
turnO = false;
} else {
box.innerText = "X";
box.style.color = "blue"
turnO = true;
}
appreciated dude .
Thanks ''GOD'' at the end Your health is recover Mam.[ From Gilgit Baltistan]
for add more color in your "X" or "Y"
boxes.forEach((box)=>{
box.addEventListener("click",()=>{
console.log("box was clicked");
if (turnO){
box.innerText="O" ;
box.style.color="red";
turnO =false;
}
else {
box.innerText="X";
box.style.color="blue";
turnO=true;
}
box.disabled=true;
chackWinner();
});
});
Thank you bro
I did the draw condition as well! and I learnt a LOOOOOTTTTTT of things while solving it. I didn't copy all the code I tried solving it my way ofcrs refering to your lecture and my code is a bit lengthy and haphazard but I am sure I will be able to make it compact over time. Thank you so much didi! JS feels super interesting now!!! Also this one was my first js project and I am enthused to do more in the future!
Ma'am Hope You are Well Now 😊... Ma'am please Upload a Video on Backend Development.
My reset button is not working, please help me someone...
Hi ! I would like to help you , tell me till where you have written the code . From there I will explain to you .
Share your code please
let boxes = document.querySelectorAll('.box');
let resetBtn = document.querySelector('#reset-btn');
let newGameBtn = document.querySelector('#new-game-btn');
let msgContainer = document.querySelector('.msg-container');
let msg = document.querySelector('#msg');
let turnO = true; //PlayerO, PlayerX
const winPatterns = [
[0, 1, 2],
[0, 3, 6],
[0, 4, 8],
[1, 4, 7],
[2, 5, 8],
[2, 4, 6],
[3, 4, 5],
[6, 7, 8]
];
const resetGame = () => {
turnO = true;
enableBoxes();
msgContainer.classList.add('hide');
}
boxes.forEach((box) => {
box.addEventListener('click', () => {
if (turnO) { //PlayerO
box.innerText = 'O';
turnO = false;
}
else { //PlayerX
box.innerText = 'X';
turnO = true;
}
box.disabled = true;
checkWinner();
})
})
const enableBoxes = () => {
for (let box of boxes) {
box.disabled = false;
console.log(box);
}
box.innerText = '';
}
const disableBoxes = () => {
for (let box of boxes) {
box.disabled = true;
}
}
const showWinner = (winner) => {
msg.innerText = `Congratulation, winner is ${winner}`;
msgContainer.classList.remove('hide');
disableBoxes();
}
const checkWinner = () => {
for (let pattern of winPatterns) {
let pos1Val = boxes[pattern[0]].innerText;
let pos2Val = boxes[pattern[1]].innerText;
let pos3Val = boxes[pattern[2]].innerText;
if (pos1Val != '' && pos2Val != '' && pos3Val != '') {
if (pos1Val === pos2Val && pos2Val === pos3Val) {
showWinner(pos1Val);
}
}
}
}
newGameBtn.addEventListener('click', resetGame);
resetBtn.addEventListener('click', resetGame);
Sir please solve my code.
My reset button and new game button is not working.
What wrong in my code? 😞
Or thoda Easy koy project nehi hei Didi .
Finally di you recovered! ❤️❤️❤️❤️❤️
Was Waiting for such project!
mujhse draw nahi ho raha
Mam gta vice city banao
Vote For React JS
Didi is forEach only use for arrays
Ha bhaii in maximum condition..
Hi Shradha, Thank you for all the lectures you are providing. However in this particular tic tac toe chapter, I have a below query. The code we developed is always starting the game with player0 first. What if we want playerX to start the game? I mean what changes we can do to actually see which player is starting the game. It can be any player.
To change the color of X use box.style.color = "green" and for 0 use box.style.color = "#b0413e"
how did you do bro?
Do one project Chess Game
My box.innerText property is not working.... Can any one help me in this
Send code
O and X not working...
[0,1,2],simple counting
[3,4,5],simple counting
[6,7,8],simple counting
[0,3,6],vertical count(0 to 6 first line up to down )
[1,4,7],vertical count( 1 to 7 first line up to down )
[2,5,8],vertical count( 2 to 8 first line up to down )
[0,4,8],cross count(0 to 8 first cross line count)
[2,4,6],cross count( 2 to 6 Second cross line count)
This is very easy way to learn the tic tac game counter .
not able to use eventListener
Getting this error . Do help me out.
Uncaught (in promise) Error: A listener
index1.html:1 indicated an asynchronous response by returning true, but the message channel closed before a response was received
I add a very fantastic text glitter effects on " congratulation winner is o or X".....I completed this game using your code....thank you very much for your lovely teaching styles... keep it up...live you dear sister...and God bless you...❤❤❤❤❤
Phir se khud se banaya kya?
you know is vidio ma winning pattern kasa bana
Uncaught TypeError TypeError: boxes.forEach is not a function
at (c:\Users\Asus\OneDrive\Desktop\tic toe game\App.js:16:7)
pls help to fix this error
Same problem bro,aapka solve hua?
I'm facing the same problem, solve hua kya aapka??
Check for curly braces in if and else and check the correct addEventListener syntaxes as it's case sensitive
bro use let boxes = document.querySelectorAll(".box"); instead of boxes = document.querySelector(".box"); Your prolem will be solved.
Please upload videos in English 🥹🥹🥹🥹
VOTE FOR REACT JS AND NEXT JS 👇
console.log(boxes[pattern[0]].innerText,boxes[pattern[1]].innerText,boxes[pattern[2]].innerText);
this line of code is not working in vs code somebody please give me a solution
You have to show your full code then I can try to solve your problem.
solution for draw condition:
step 1: initialize a variable let click_count=0; in top after turn0.
step 2: use else if condtion in checkwinner () function like this:
if(pos1==pos2 && pos2==pos3){
// console.log(`Winner is ${pos1}`)
Showwin(pos1);
disable();
}
else if(click==9){
msg.innerHTML="Match is draw";
msg.classList.remove("hide");
}
step 3: set click_count=0; again in reset function. this will set the value 0 whenever game is restart
not working bro, there will be still a winning possibility at the 9th click
@@pawanshinde7585 yes, you are right but it will work if we initialize win=false in starting and make it true in winning condition then draw function will execute only when count===9 && win===false and also don't forget to make win=false again in reset function.
@@muskanquraishi2624 i have another idea which will work put break; condition in loop like after calling winner condition example if(true){
showWinner();
break;
}else if(count==9){
draw();
}
di there is a problem. Uncaught TypeError: boxes.forEach is not a function while generating error in console.
Stuck in same. Got solution yet??
Bro querySelectorAll nhi hoga is liye function nhi bata raha
@@priyanshu7624 toh kya use kru?
Uncaught TypeError: boxes.forEach is not a function
at App.js:23:9
plzz help to fix this error
I am also stuck here
If you find any solution please help 🙏
Yes, I solved it
@@harshchhillar3897 did you solved it?
Same problem..😢
@@radhikagupta5137i got the solution. Check in your aap.js file, querySelectorAll is needed in place of querySelector
Eror aa raha hai 2 din ho gaye slow nhi kar paya 😮
I watched all the tutorials and solved practice questions as well but when I watched today's project I was able to do only html and css parts on my own and almost half of JS went sir k upr se it makes me depressed, i haven't learned a word since morning i would be glad if you could possibly reply or have any suggestionns😰😰
Mam ClassList.remove function is not working
I guess remove ki jaga hide likhna he
forEach function is applicable on arrays elements..nd u used it on elements that's not inside an array and it worked on ur system but when I am doing the same it's giving an js error of forEach is not a function
let boxes=document.querySelectorAll(".box") instead of let boxes=document.querySelectorAll(".box")
Button is not working, is there someone facing same problem
Have you tried putting the script tag at the end of the body?
@@nonbeliever5027 there was small mistake, I improved it, it works
O and x is not working
X and O, could be done through for loop as we well for( let i = 0; i
kiu nahi ho rahi pdai..🙂
Hehehehe..
I didn't understand how the left upper box is taken as 1 then to its right is taken as 2, how did this numbering et fixed/mapped to each box, please reply didi
Display: flex; se terna band nhi ho rha hai
Let counter = 0;
Let draw = () => {
Counter++;
If (counter === 9) {
document.getElementbyId(Idname).innerText = "This Game Was Draw";
You can still see this statement when you click on reset game
In reset game function you have to add
document.getElementbyId(variable name).innerText = " "
And call function after checkwinner
That's it
can u send the whole js code ?
boxes.forEach is not a function at app.js error show kar rha h, please give me solution
Same problem faced have you done it then help me❤
Same problem
If anyone needs solution the contact me❤
tell@@immithleshyadav
I have solved it
00:01 Building Tic Tac Toe game in JavaScript
01:55 Tic Tac Toe Game Rules and Winning Patterns
06:35 Creating buttons for the tic-tac-toe game
09:08 Styling background color and container in JavaScript
13:42 Styling the tic tac toe game buttons
15:53 Styling the Tic Tac Toe game box and reset button
20:46 Creating and accessing 2D arrays in JavaScript
22:58 Creating win patterns for Tic Tac Toe game
26:59 Implementation logic for the tic-tac-toe game in JavaScript.
29:26 Implementing a function to track the winner in Tic Tac Toe game
32:56 Checking patterns of zero, one, and two at specific indices
34:49 Accessing and storing values for Tic Tac Toe game
39:04 Implementing a new game button and styling the message container
41:17 Using CSS to hide and show elements
45:55 Creating functions to disable and enable game boxes and reset the game.
48:09 Creating a Tic Tac Toe game and styling it with CSS
52:27 Tic Tac Toe game problem is related to data structures and algorithms in web development.
me back hehehe
Are you using some kind of AI to summarise this video??
The winner is triggered 8 times. With the code you mention,
didi maine phle hi ek tictakto game bna lia hai using html,css and simple and basic JS and thats working well even i dont have laptop i need that and im searching for 2ndhand budget under 20k plz if you have then plz help
Showwinner is not working in my vs code.
And enableboxes and disableboxes are also not working...can anyone help me with this
Awesome!! The teaching method was very simple and beautiful. ☺
Facing a problem; when showWinner function is called from checkWinner and passed "pos1val" into it but in showWinner(winner) function the "winner" perameter is not reading the value from pos1val. so, it not printing who actually won X or O.
why I'm facing the problem ??
can you show your code ??
msgContainer = (winner) =>{
WinMsg.innerText = `congratulations winner is ${winner}`;
........... etc...........
};
Where you called this function pass this argument ... msgContainer(pos1val);
If your code is not working so you have to recheck it.
Same here 😢
Good afternoon mam. I am 3rd year CSE student.How I prepared for the off campus placements. Please guide me.
26:12 button is not working
Plz Next react js......
Let's take the moment to appreciate how much effort she puts into the content for us.😅
its a crime to inpersonate anybody on social media
😮
maam maza tu buhat a rha hai next lecture pr jate howe lekan mujhy ab understand karne main problem a rhi hai
mujhy tu khud pr shaq hone laga hai kia main coding k liye bana b ho k nhi😇😭
@@GoogleGeo-q6ybhai kya yr
plz do some more projects so that we get strong in basics
I want to change the text color of last box clicked. Can someone define the logic please?
React js 😞😞
I don't know why I am not able to disable the boxes
Can anyone some possible mistakes
Practice questions me color kaise change karna h help please 🙏
tic tac toe ko zero kata bhi bolte hn was personal 🤣
Const show winner problem 😢
in my code also
I can proudly say that mene Draw condition wala code khudse likha, Thank you Didi for such a great video :)
dal de bhai yha mujhr nahi aa rha h
There is a problem in logic if nobody wins the game , it shows the player x won the game
Is anyone getting error while adding eventListners to reset btn ..
Can anyone explain boxes[pattern[0]].innertext;
Meaning
Hi, how can be make a setup/exe file to install for another device to play the game
Didi i made this project and added a extra feature that is to play with ai.
Mere to upar se nikal gya sab... Ap kaise smjh le rhe hai... Kya mujhe guide kr doge pls.
Bhai mko ek doubt h btaega ky
@@rishabyadav181 kya
@@SunnySunny-mh5do insta ?
@@rishabyadav181 what is your doubt
any logic to declare "DRAW GAME" ?
reset button are not working?? can anyone tell why?
Thanku didi ❤❤ finally you return have a good health ❤
Ma'am aap ek video top bca colleges in north india ke Bana sakte ho kya with low fees please ❤❤
Can anyone tell which link should I use to ask others try my game?
1st comment 🎉
We want More simple Javascript Projects for Practice
was it simple for you P_P?
Mam mere box click hone ke bad console mai box is clicked nahi aa rha hai
Please Make Tutorial on React Js
Make videos on react js too . thanks
Like If You solve This On your Own.
Madam please cover the javascript testing
(Jest).
Mam agr match draw hui tab kya hoga
to rcb jeet jayegi
Itni kome smaye me etana view 😮😮😮😮😮😮
The buttons move down when clicked. I have tried adding "position: fixed" and "position: absolute" attributes in the .box class, but nothing seems to be working. Can anyone help, please?
same problem
Thanq sister abhe apki health thik hogi I hope apke health ka khyala rakhryaga sister
What is MT ?😅
box height and width not changing please help!!!