Tic-Tac-Toe JavaScript Tutorial with best coding practices and advanced CSS explained!
❤ Subscribe: http://bit.ly/SubscribeDPT
In this tutorial I will show you how to create a simple Tic-Tac-Toe game that runs in a browser using HTML, CSS, and Javascript. It may not be as easy as you think! In this video, you will learn how to build the markup, how to use flex boxes and grids to display the tic-toe-board, creating outlined X’s and O’s in pure CSS by styling psuedo-elements, how to organize JavaScript code using JavaScript objects (hash maps), how to program and debug JavaScript code for playing Tic-Tac-Toe and detecting when the game is over, and much more!
The editor I will be using is Visual Studio Code with the Live Server Extension and Emmet Abbreviations.
📺 In this video:
0:00 - Intro
0:14 - Creating the HTML markup
1:28 - Creating the CSS stylesheet
4:05 - Styling the Tic-Tac-Toe board
6:34 - Styling the button
11:31 - Beginning the JavaScript code
14:05 - Adding Event Listeners
15:13 - Play function (when a square is clicked)
17:09 - Function for resetting the game (newGame)
19:51 - Drawing the X and O symbols with CSS
28:16 - Check if you win
32:59 - Check if there is a draw
34:28 - Change the turn to the next player
38:07 - Set the indicator to show the active player and winner
40:36 - Game over variable
40:59 - Resetting the board on newGame
41:53 - Adding event listener to the New Game button
43:46 - End of game function
44:56 - Removing square highlights when the game is over
46:42 - Removing square highlights from squares that are taken
47:37 - Setting the turn indicator on newGame
49:03 - Everything is working
🖥 More Web Development tutorials
▶ https://www.youtube.com/playlist?list=PL9YUC9AZJGFFAErr_ZdK2FV7sklMm2K0J
💻 More tutorials
► https://www.youtube.com/playlist?list=PL9YUC9AZJGFHTUP3vzq4UfQ76ScBnOi-9
🎁 GET FREE STUFF WHILE SUPPORTING MY TUTORIALS
► https://bit.ly/jlawrencepromos
