Create a Simple Tic Tac Toe Game with JavaScript, HTML & CSS for Beginners | 2022 Tutorial

[@siphiwocode]

Hey guys, do not forget that at the end of each video I leave a challenge to complete. Don't be shy to leave a link here for review of how you completed that challenge. You grow by doing 🧑‍💻👩‍💻

[@OsamaMohamedKhalil]

thank you for your effrot, you have some mistakes in code when X is won don't show via heading one also with o and solution is * in function box clicked() you can add that : if (currentPlayer == X_TEXT){ playerText.innerHTML = "X Player has won!"; }else{ playerText.innerHTML = "O Player has won!"; } *in function restart() you can also add that to return the header with normal status before playing: * playerText.innerHTML = "Tic Tie Toe"; and finally i enjoy with your videos

[@souped-space]

Im 11 and learning html css and JavaScript and I just wanted to say thank you this is a really good way to start

[@rae185]

Helpful vid. My project isnt exactly tic tac toe but i think (yikes) some logic of this game is gonna help me in the process. i hope to get my game working. pray for me! haha

[@Huzaifajunaid566]

Thank you so much! I just got into javascript and your tutorial was absolutely amazing! Best begginer tutorial i've seen! You are a legend!

[@theCuriousCivilEngineer]

Great video. I was looking for such a video for a few day now. The videos I found was very complicated and the were not beginner friendly. This video is very nice especially the javascript part, the logic is very straight forward and well explained. thanks for the great video I have learned a lot from it. Keep up the good work 💯

[@GetQuote]

Man am new on this channel, but I love this guy!

[@maresolaris]

In response to the assignment to stop being able to play after X or O has won, I declared a global variable (let aPlayerHasWon = false) and will do that also in the restart routine. In case of a winner, I set the value of aPlayerHasWon to true. In the beginning of the function boxClicked() I now put if(aPlayHasWon) return. This prevents the game to continue. When the restart button is pressed the game is "released" due to the value of aPlayerHasWon. I really enjoyed this tutorial, which is very helpful! A small issue: in the video you do not use the .innerHTML to set the playerText, however you do in the code provided (thanks!). I was a little hard to find at first ;-) (nice exercise though). You gained a fan.

[@siphiwocode]

Thanks for completing the assignment. I believe that we learn best by doing so that is huge 👍 on your side. Appreciate your sub!

[@michaelerossable]

Great video thanks! Spent a bunch of time with it today. Lots of videos about how to make tic-tac-toe and yours spoke to me. I added ".innerText" to playerText in the boxClicked() and restart() functions, and did the challenges at the end with a bunch of trial and error, some googling, and your extra video. Subscribed and looking forward to doing more of your vids. Great stuff! 😁

[@siphiwocode]

Really glad you enjoyed it

[@tamarasworld22]

thank you. i tried it and it came out exact

[@dwyt]

fantastic video great teacher. Thank you

[@donnevanbiljon6337]

I am studying IT and had to leave my home country (South Africa 😢) I need help with an assignment while being homesick. The i came across your video and with 5 seconds into the video i knew were you were from. Not only did your video make my day but will definitely help my studies 😊

[@siphiwocode]

Supa glad I could help both emotionally and with your studies.

[@hugostiglitz1254]

Excellent tutorial and it seems that you explain very well, I could not understand 100% because I still do not know English very well but it helped me a lot. Thanks.

[@siphiwocode]

I'm glad that you could at least following along with the video

[@peaklegacy146]

800th Subscriber!!🥳 Most well explained video I've ever seen!

[@siphiwocode]

Wow, thanks! Never thought I would reach 800 subs let alone have some be excited to be number 800 😁

[@zzzzzzzaxc]

I don't understand this point. let start = () => {boxes.forEach(box => {box.addEventListener('click',boxClicked) });} 14:16 where does the box come from and what is it?

[@siphiwocode]

On line 3 you will that I declare a variable that contains an array of boxes. This are the boxes from the html. That is why when I loop over the array, I name the single entry "box"

[@stopstalkingme2023]

A game with no draw feature. Nice

[@siphiwocode]

I encourage everyone to try and implement this functionality in this game on their own. This is part of developing your coding skills. If you just want the solution / draw functionality, here is the video kzbin.info/www/bejne/r2O8Y2iobpmEgtU

[@stephmukami3817]

great explanation and robust code,thanks

[@muhammadyusufsodiqov3580]

Wonderful bro. Thanks a lot

[@siphiwocode]

Always welcome

[@bartlight6810]

Very helpful video, thank you!

[@siphiwocode]

Glad it was helpful! All the best with your dev journey

[@openworld7585]

Thank you so much for great explanations

[@siphiwocode]

I'm really glad you enjoyed it ☺. It there a link where I can see your solution to the challenge?

[@blueberry5992]

keep up the great work ❤

[@siphiwocode]

Thank you! Will do!

[@blueberry5992]

@@siphiwocode but ur codesource does not work why?

[@fayozbekotajonov5270]

good job

[@siphiwocode]

Glad you like the video 👌

[@jeffa2006]

3:48 its not working for me the styling

[@siphiwocode]

Make sure your style.css file is in the same directory as your index.html file. This could be the reason why your css file is not picking up. Hope this helps.

[@farintinobialor7023]

Thank you man.👍

[@siphiwocode]

You bet

[@ellzz2431]

Hi there I’ve completed it but the player won trigger is not coming up after they have won and also when the players have draws it doesn’t come up either but the colour for when they win and draw works. It’s the innerHTML part that doesn’t work for some reason. So it works without the innerHTML but with it the player won and the draw part doesn’t change

[@siphiwocode]

Glad you tried to do the challenge and complete the game. For your issue, I suggest watching the solution here: kzbin.info/www/bejne/r2O8Y2iobpmEgtU

[@krantiwaghmare2710]

thank you

[@siphiwocode]

You're welcome

[@MrBrady95]

Liked and subscribed! Thanks

[@siphiwocode]

Awesome, thank you!

[@ojichan982]

hi there , what modifications can be done so instead of maping the winning blocks i want a line to be drawn ?

[@siphiwocode]

Currently the blocks highlight function uses the css to highlight the winning combo. The issue or challenge with using lines is that the winning combo wont always be in a straight line. You will need to check the position of the second block from the first one in order to draw the line vertical, horizontal or diagonal. Drop me a link once you get this right 😉

[@bibekdas6277]

can you tell me what theme is that..?

[@siphiwocode]

Hey man, this theme is called Night Owl.

[@galekwansango5321]

Can you include a link for files in the description? It would be great if we can view and access the code...

[@siphiwocode]

Hey Galekwan, I have added a github repo link in the description of the video. Thanks for the watch, like, comment and sub 👌

[@ixnbtw6274]

I copied the code from github but the x/o dont get placed then I click on the field. Do you know how to fix that

[@siphiwocode]

In the vide you will notice that I use VSCode and run the Live Server extension. This allows me to run the file with no issue. So I take it you have downloaded the file, and double clicked on the index.html file. You need to set the script path by changing it from to . The DOT makes the difference 👌

[@ixnbtw6274]

@@siphiwocode thank you very much it works now!

[@gearsdan]

hi siphiwo! watched your video because i just started learning Javascript. would you be able to convert the arro function to a regular function for me? i havent learned arror function yet and lines 10 and 11 are different for me. same for line 21 as well

[@siphiwocode]

Hi Dan. You can covert any arrow function changing a couple of things. 1. Instead of: const updateUI = () => {} a normal function would be: function updateUI() {}. You an apply this to all arrow functions. Hope this helps

[@ixnbtw6274]

@@siphiwocode hey siphiwo, I have issues with converting the arrow function boxes.forEach(box => { box.innerText = '' box.style.backgroundColor = '' }) or function startGame() { boxes.forEach(box => box.addEventListener('click', boxClicked)) } to a normal function, could you help me out?

[@RushikaPanchal]

I having the problem with css my box lines are in vertical formate how can I fix it?

[@siphiwocode]

Hi Rushika, unfortunately it is a bit difficult to assist you with your issue as it is unclear to me. You can make sure that you follow both the creation and solution to the Tic Tac Toe game videos. Hope you come right and good luck on your coding journey

[@RushikaPanchal]

@@siphiwocode OK thanks for replying

[@blackzeke4428]

Please can you make a video about playing with human vs computer how do you make it possible to play with vs the computer

[@siphiwocode]

This is really interesting. I will add it to my list of videos. Thanks for the idea 👍

[@Qzey-x8s]

How did you open the part in minutes 3.44?

[@siphiwocode]

I assume you are referring to the code-editor sidebar right. I used Ctrl+B to toggle that. Hide and show the files.

[@adsye0015]

hey i can't play multiplayer that only one x show why can help me

[@siphiwocode]

This can be caused by a number of things, my suggestion would be first check the variables where you set the X and O if they set correct. From there just follow both videos to make sure you not skipping a step. Happy coding 👍

[@anjalimishra2428]

how to get the google font

[@siphiwocode]

You can go to fonts.google.com. Hope this helps

[@esmeraldagonzalez9336]

Hey so I loved the video for me this is my very first project that im working on and it was really easy to follow through and understand what is going on however I am confused when you use document in your js files because it says document is undefined. Is there something that I may be missing?

[@siphiwocode]

Glad it was helpful! Can you point me the minute you are referring to. This will help me to better assist you

[@hazem342]

is it python?

[@sarozz860]

why sign is not clicking on these project . i had downloaded it form github

[@siphiwocode]

Hi, did you follow the video tutorial in order to complete the project? Check-out the follow-up video where I explain how to add more features to the application. Hope that helps

[@shashank7533]

A silly question from a beginner whats the difference between writing the script in head and body as i wrote the script in head it didnt work and why is it that stylesheet works in the head but not the js file .... can someone explain plzzz???

[@siphiwocode]

So code gets read from top to bottom right. No imagine in your script you are looking for a div-tag that has not rendered yet, that script will be null or undefined which will cause your code not work correctly. Stylesheet on the other hand are not manipulators meaning they don't change the the DOM but rather adds to it. if that makes sense.

[@SHERSHAAH555]

what about the draw condition

[@siphiwocode]

Hey, I highly recommend trying to figure it out on your own first as this will help with your learning process. But you can find the solution here: kzbin.info/www/bejne/r2O8Y2iobpmEgtU

[@SHERSHAAH555]

@@siphiwocode yeah after watching this i think for a while and i got the solution thanks for sharing your knowledge on the base program

[@kamalancs9746]

At the end you forgot to display the player won msg in h1 tag.

[@siphiwocode]

Oh snap, thanks for watching till the end man. I trust you added it in your project right

[@isabelrobles8019]

I'm confused a bit because idk how Google fonts was used in this

[@siphiwocode]

Hey Isabel , I pasted the google font which I got from fonts.google.com/ Once you have selected the font, you got the option to download it or include it using the link tag shown here at 03:40

[@heavyrain5388]

Hi, can you do a version where it's player vs computer? A very stupid computer that just randomly places its symbol on available cells without analyzing the player's choices. 🙏

[@siphiwocode]

That sound like a great idea but it will need to know the blocks already selected so that the pc choose available blocks. Will definitely add this to my todo list. Thanks 😉

[@heavyrain5388]

@@siphiwocode hi it's just a suggestion tho, please don't feel like I'm pressuring you ya. 😅😅

[@jinksofficial476]

I copied everything and it doesn't work. Help please!!

[@siphiwocode]

You can download the file from my github account and compare the code. Most of the time is just a simple naming conversion that is not the same which could break the entire code base. Hope this helps

[@redewanmahmud2917]

What if no one wins? Can't there be a drawn match? 😅

[@siphiwocode]

There can be yes. Share the code once you have expanded on this one. That is the progress of learning...

[@thesportsbubble6705]

Did anyone else figure out how to add a draw function to the game?

[@siphiwocode]

Hey man, took while but here is the solution to the end of this video. Hope you enjoy. kzbin.info/www/bejne/r2O8Y2iobpmEgtU

[@thesportsbubble6705]

@@siphiwocode thank you!

[@buddhalama4041]

I didn't understand the winning conditions 😢

[@siphiwocode]

Hey Creep 😂 (that sounded funny in my head). I will be added a short video soon explaining the winning logic for you. Watch out for that soon 👍

[@buddhalama4041]

@@siphiwocode okay will be waiting thanks😂

[@arupde6320]

be regular

[@siphiwocode]

Hey Arup, not really sure what you mean with "be regular" 🤔

[@arupde6320]

@@siphiwocode upload on daily basis

[@siphiwocode]

@Arup missed your response there sorry, thank man. I will try to keep uploading weekly. Daily is abit out of the question for me at this point :)

[@fayozbekotajonov5270]

:)

[@siphiwocode]

I can always count on you to watch the videos. Thanks for the support man 👍

[@phlemuelnx]

Where is the source code?

[@siphiwocode]

Hey Lemuel, I have added a link to the github repo on the video description. Thanks for the watch, like, comment and sub 👌

[@phlemuelnx]

@@siphiwocode Thank you so much!

[@trainmonharrison7454]

wanted to say great video but I am getting stuck on the part where you put const id = e.traget. id the issue I get is my event listener it is saying uncaught type error cannot read properties of the undefined id

[@Abubakr-md6kz]

This code defines an arrow function called start that adds a click event listener to each element in a collection of boxes. The forEach() method iterates over each element in the boxes collection and attaches a click event listener to each element. The event listener is a function called boxClicked, which is not defined in the code you provided. When a box is clicked, the boxClicked function will be called. The purpose of this function depends on its implementation, which is not shown in the code you provided.

[@trainmonharrison7454]

@@Abubakr-md6kz thx so much

[@siphiwocode]

Thanks Abudakr for jumping in and helping :)

[@trainmonharrison7454]

np thx for getting back to me I appreciate the help@@siphiwocode