rel="stylesheet" href="styles.css">

Tic Tac Toe

CSS:I put the title in the center of the page.I put the div whose id is board in the center of the page. I set the margin properties for this.I set the width and height properties of the div whose id is board.The board consists of 9 squares, I made the display property grid to create it. I created 9 frames with Grid template columns settings. I set the spacing between the grids with the grid-gap property.Get Canan Korkut’s stories in your inboxJoin Medium for free to get updates from this writer.Enter your emailSubscribeI set the width and height properties for each square. I added the border property to these squares. I added a background color to the squares. I set its position using the display property. I created the color change when hovering over the squares. I used the hover feature for this.I set the display properties and other styles to the one whose id is restartButton. Additionally, I used the hover feature.body { font-family: 'Poppins', sans-serif; color: #000000;}h1 { text-align: center;}#board { margin-left: auto; margin-right: auto; width: 375px; height: 375px; display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 5px;}.square { width: 120px; height: 120px; border: 1px solid #D3D3D3; background-color: #F5F5F5; font-size: 40px; display: flex; justify-content: center; align-items: center;}.square:hover { background-color: #FFFFE0;}#restartButton { display: block; margin-left: auto; margin-right: auto; height: 40px; width: 150px; background-color: #FFFFFF; border: 1px solid #000000; border-radius: 40px; font-size: 18px;}#restartButton:hover { background-color: #000000; color: #FFFFFF;}JavaScript:I used HTML DOM features to process the elements I use in HTML via JavaScript.To get to the div with the id of board and the div with the class square in the HTML file, I got them by assigning them to the variables with the corresponding DOM tags.I created a series called “players” for the game. The elements of the array are X and O.Since X was the first to start the game, I assigned players[0] to the currentPlayer variable.const board = document.getElementById('board')const squares = document.getElementsByClassName('square')const players = ['X', 'O']let currentPlayer = players[0]To see the end of the game, a message must be printed on the screen when the necessary conditions are met. For this reason, I assigned the h2 tag to the endMessage variable so that it can be seen in the HTML document. It will print the message as a result of the operations performed on the div whose id is board using the after function. We can print text to the variable with the help of textContent. ‘X’s turn!’ I printed it. I added styles to the tag I created.const endMessage = document.createElement('h2')endMessage.textContent = `X's turn!`endMessage.style.marginTop = '30px'endMessage.style.textAlign='center'board.after(endMessage)I have defined the win states of the game in an array.const winning_combinations = [ [0, 1, 2], [3, 4, 5], [6, 7, 8], [0, 3, 6], [1, 4, 7], [2, 5, 8], [0, 4, 8], [2, 4, 6]]I’ve created functions to provide the necessary controls. I created a function called checkWin to check the win status of the game. When one of the states in the array is satisfied, the relevant player will win the game.function checkWin(currentPlayer) { for(let i = 0; i < winning_combinations.length; i++){ const [a, b, c] = winning_combinations[i] if(squares[a].textContent === currentPlayer && squares[b].textContent === currentPlayer && squares[c].textContent === currentPlayer){ return true } } return false}I created a function called checkTie to check the draw status. I controlled the texts in all the created frames through the for loop. This way, the function returns true when all are full and no winning status is met.function checkTie(){ for(let i = 0; i < squares.length; i++) { if(squares[i].textContent === '') { return false; } } return true}I created a function called “restartButton” to reset the actions when the game is restarted. We assign the values in the square to “”. Then I assigned the message that the game will show at the beginning to endMessage.textContent. I have assigned the default player to X again.function restartButton() { for(let i = 0; i < squares.length; i++) { squares[i].textContent = "" } endMessage.textContent=`X's turn!` currentPlayer = players[0]}I used it in the for loop to check the generated functions in the game. In this loop, when each frame is clicked, the game state will be printed on the screen with the endMessage variable, provided that certain conditions are met. I did this using the addEventListener method.for(let i = 0; i < squares.length; i++){ squares[i].addEventListener('click', () => { if(squares[i].textContent !== ''){ return } squares[i].textContent = currentPlayer if(checkWin(currentPlayer)) { endMessage.textContent=`Game over! ${currentPlayer} wins!` return } if(checkTie()) { endMessage.textContent= `Game is tied!` return } currentPlayer = (currentPlayer === players[0]) ? players[1] : players[0] if(currentPlayer == players[0]) { endMessage.textContent= `X's turn!` } else { endMessage.textContent= `O's turn!` } }) }All the codes I wrote in JavaScript are as follows:const board = document.getElementById('board')const squares = document.getElementsByClassName('square')const players = ['X', 'O']let currentPlayer = players[0]const endMessage = document.createElement('h2')endMessage.textContent = `X's turn!`endMessage.style.marginTop = '30px'endMessage.style.textAlign='center'board.after(endMessage)const winning_combinations = [ [0, 1, 2], [3, 4, 5], [6, 7, 8], [0, 3, 6], [1, 4, 7], [2, 5, 8], [0, 4, 8], [2, 4, 6]]for(let i = 0; i < squares.length; i++){ squares[i].addEventListener('click', () => { if(squares[i].textContent !== ''){ return } squares[i].textContent = currentPlayer if(checkWin(currentPlayer)) { endMessage.textContent=`Game over! ${currentPlayer} wins!` return } if(checkTie()) { endMessage.textContent= `Game is tied!` return } currentPlayer = (currentPlayer === players[0]) ? players[1] : players[0] if(currentPlayer == players[0]) { endMessage.textContent= `X's turn!` } else { endMessage.textContent= `O's turn!` } }) }function checkWin(currentPlayer) { for(let i = 0; i < winning_combinations.length; i++){ const [a, b, c] = winning_combinations[i] if(squares[a].textContent === currentPlayer && squares[b].textContent === currentPlayer && squares[c].textContent === currentPlayer){ return true } } return false}function checkTie(){ for(let i = 0; i < squares.length; i++) { if(squares[i].textContent === '') { return false; } } return true}function restartButton() { for(let i = 0; i < squares.length; i++) { squares[i].textContent = "" } endMessage.textContent=`X's turn!` currentPlayer = players[0]}Here is the GitHub link to access the source codesI tried to explain tic-tac-toe step by step using HTML, CSS, and JavaScript. I hope it was useful. Thank you for reading.JavaScriptHTMLCSS header>h1>input{background-color:rgba(0,0,0,0);font-family:Rubik,sans-serif;border:0;border-bottom:1px solid #fff;width:250px;font-size:1em;text-align:center;color:#fff;text-transform:uppercase }