How to code Tic-Tac-Toe in JavaScript - Tutorial

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. 👨‍💻 My code with comments added ► https://github.com/DenverCoder1/Tic-Tac-Toe 📺 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 ▶ /playlist/PL9YUC9AZJGFFAErr_ZdK2FV7sklMm2K0J 💻 More tutorials ► /playlist/PL9YUC9AZJGFHTUP3vzq4UfQ76ScBnOi-9 🙋‍♂️ Find me on other channels Discord 🗨️ https://bit.ly/dpt-discord Twitter ✍ https://twitter.com/DenverCoder1 Github 👨‍💻 https://github.com/DenverCoder1 Sponsor 💞 https://github.com/sponsors/DenverCoder1 One-time donation ☕ https://ko-fi.com/jlawrence 💖 SPONSORS 💖 Get your username or a link to your channel here by sponsoring on Github ▶ https://github.com/sponsors/DenverCoder1 🎁 GET FREE STUFF WHILE SUPPORTING MY TUTORIALS ► https://bit.ly/jlawrencepromos

الفئة