How To Code Tic-Tac-Toe In Plain JavaScript - Functional JavaScript Tutorial

In this video we code a Tic Tac Toe game from scratch in plain HTML, CSS, and JavaScript in a functional way! Tic-Tac-Toe is a great tutorial as it goes over DOM manipulation and very basic game "A.I.".

Intro Music By: GhostxMachine

My Gear:

[maxblasdel]

I've watched a few of these videos and he has a really great way of explaining the logic of JS. Well done.

[TheMarcinzs]

I've never seen code so clean. It's  readability is awesome! Great work! Functional programming seems really interesting, I need to deep dive into it.

[RaviPrabhaSingh]

You have explained in excellent way and make easier in JavaScript.

[axeljacob]

Yay to functional programming! Nice work!

[jacobp]

Thanks for the clear video man. The only real trouble I had was linking my css file to the html, but I figured it out

[omkarpatange]

Must appreciate your work, well explained 👍🏻

[martin-xqte]

Great video. One of the best I've seen on Tic Tac Toa using Javascript. I'm just going over to look at your website. Well Done

[lghiggino]

Hey, thanks for the excellent tutorial. One of the best using functions and closure for data. One minor thing, though. It doesn't have an end condition for a tie game.

[АлександрБадалов-ут]

Thank you for your video. Really helpful!

[ousmanesylla]

Another Great video with pure explanation, thanks so much that why i signed for your channel the first time i watch your cal tutoring!

[jackiezheng]

Should have added a draw game function, and shouldn't be able to click on opponent's field. Great tutorial by the way.

[craigcardoni]

good tutorial, great job explaining everything.

[pingrash]

Great tutorial! I learned a lot. I've spent the last few days making additions and changes to the game (draw checks, score table, etc) but I'm having trouble figuring out how to make the ai a bit more advanced.

[Byte_Weaver]

There's one thing you missed. You shouldn't be able to click on fields that your opponent clicked. Despite that, very good tutorial 👌🏼

[PendemiGod]

your good im working on a hearthstone clone project for fun long story short in one tick tac tut solved 85% of my issues using the getelementsbyclass and parse int arrays for each over em helps all thats left is for me make them divs dynamically so i can target the css in div tag to correspond array data this helps well explained thanks

[andrematos]

Great tutorial! When I'm trying to test this out through my web browser, the console keeps giving me this error:
Uncaught TypeError: Cannot read properties of undefined (reading 'id')
at classQid (script.js:13:47)
at aiopponentsChoice (script.js:18:33)
at script.js:38:17

I'm confused as to where I messed up exactly. Even when I check line 13 of my code in Visual Studio Code to see if anything looks off, I can't tell why this is happening when comparing my code to your code from the tutorial. I'm still new to Javascript so any help as to what the problem might be and how to fix it would be greatly appreciated! Many thanks!

[praneshs]

hi will we get a clear documentation of the complete tic tac toe project which will be useful for others as reference

[Weimaraner]

at 14:00, are you saying when enableListeners is called, it adds a click event to each quad. Then when someone clicks on a quad, clickFn() is called and the 'click event' is passed in clickFn() as a parameter which will allow it to console.log which quad was clicked?

[Paciffic]

What is "_qEl" - is just a variable you came up with ? is it declared somewhere ? Thanks

[bblaster]

what extensions did you used in vs code to open these sir ?