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

✅ Boost your development confidence by building this simple tic tac toe game with JavaScript, HTML and CSS.

📂Files on GitHub

This is great follow along javascript tutorial if you want to create fun projects while learning concepts like destructering, using css varaibles in js and styling cool looking UI.

👀 LOOK ME UP ON SOCIAL

[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 🧑‍💻👩‍💻

[Huzaifajunaid]

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 💯

[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! 😁

[GetQuote]

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

[rae]

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

[stephmukami]

great explanation and robust code, thanks

[dwyt]

fantastic video great teacher. Thank you

[hugostiglitz]

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.

[openworld]

Thank you so much for great explanations

[donnevanbiljon]

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 😊

[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.

[esmeraldagonzalez]

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?

[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

[peaklegacy]

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

[ellzz]

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

[ojichan]

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

[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?

[blackzeke]

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

[kamalancs]

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