You are currently viewing Create Tic Tac Toe Using HTML,CSS & JavaScript Code

Create Tic Tac Toe Using HTML,CSS & JavaScript Code

Create Tic Tac Toe Using HTML,CSS & JavaScript Code

Welcome to The CodeWithRandom blog. This blog teaches us how to create a Tic Tac Toe Game Using JavaScript. We use HTML For Creating the basic Structure of Tic Tac Toe and after use Css for styling tic tac toe play ground and give functionality javascript for Tic Tac Toe Game.

I hope you enjoy our blog so let’s start with a basic HTML structure for the Tic Tac Toe.

HTML Code For Tic Tac Toe

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tic Tac Toe</title>
  <link rel="stylesheet" href="style1.css">
</head>

<body>

  <body>
    <div class="header">
      <h1>Tic Tac Toe</h1>
    </div>

    <div class="box">
      <div class="row">
        <input class="btn" type="text" readonly>
        <input class="btn" type="text" readonly>
        <input class="btn" type="text" readonly>
      </div>
      <div class="row">
        <input class="btn" type="text" readonly>
        <input class="btn" type="text" readonly>
        <input class="btn" type="text" readonly>
      </div>
      <div class="row">
        <input class="btn" type="text" readonly>
        <input class="btn" type="text" readonly>
        <input class="btn" type="text" readonly>
      </div>

    </div>

    <p class="result">Player X Turn</p>

    <div class="reset">
      <button id="reset">Reset</button>
    </div>
    <script src="app.js"></script>
  </body>

</html>

There is all the Html code for the Tic Tac Toe. Now, you can see output without Css and JavaScript. then we write Css and JavaScript for the Tic Tac Toe Game Code.

50+ Html ,Css & Javascript Projects With Source Code

Only Html Code Output

Tic Tac Toe Using HTML,CSS & JavaScript Code
Tic Tac Toe Using HTML,CSS & JavaScript Code

CSS Code For Tic Tac Toe

@import url("https://fonts.googleapis.com/css2?family=Radio+Canada:wght@400;500;600;700&display=swap");

* {
  padding: 0;
  margin: 0;
  font-family: "Radio Canada", sans-serif;
}

body {
  background-color: white;
}

.header {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 15px;
}

.header h1 {
  text-align: center;
}

.box {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  margin: 35px;
}

.row {
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn {
  border: 1px solid black;
  border-radius: 5px;
  height: 75px;
  margin: 2px;
  width: 75px;
  text-align: center;
  font-size: 50px;
  font-weight: 500;
}

.btn:hover {
  cursor: pointer;
  background-color: rgb(240, 240, 240);
}

.btn:disabled {
  color: black;
  cursor: no-drop;
}

.result {
  text-align: center;
}

.reset {
  text-align: center;
}

#reset {
  border: 1px solid black;
  cursor: pointer;
  color: black;
  background-color: white;
  border-radius: 5px;
  padding: 5px 20px;
  font-size: 17px;
  margin: 35px;
  transition: all 0.1s ease-in-out;
}

#reset:hover {
  color: white;
  background-color: black;
}

Here is all code of tic tac toe styling using Css Code. Now Time For Use JavaScript For the main functionality in the tic tac toe game.

100+ JavaScript Projects With Source Code ( Beginners to Advanced)

Html + Css Code Output Of Tic Tac Toe Game

Tic Tac Toe Using HTML,CSS & JavaScript Code
Tic Tac Toe Using HTML,CSS & JavaScript Code

JavaScript Code For Tic Tac Toe

let cells = ['', '', '', '', '', '', '', '', ''];
let currentPlayer = 'X';
let result = document.querySelector('.result');
let btns = document.querySelectorAll('.btn');
let conditions = [
    [0, 1, 2],
    [3, 4, 5],
    [6, 7, 8],
    [0, 3, 6],
    [1, 4, 7],
    [2, 5, 8],
    [0, 4, 8],
    [2, 4, 6]
];

const ticTacToe = (element, index) => {
    element.value = currentPlayer;
    element.disabled = true;
    cells[index] = currentPlayer;
    currentPlayer = currentPlayer == 'X' ? 'O' : 'X';
    result.innerHTML = `Player ${currentPlayer} Turn`;

    for (let i = 0; i < conditions.length; i++) {
        let condition = conditions[i];
        let a = cells[condition[0]];
        let b = cells[condition[1]];
        let c = cells[condition[2]];

        if (a == '' || b == '' || c == '') {
            continue;
        }

        if ((a == b) && (b == c)) {
            result.innerHTML = `Player ${a} Won 🎉`;
            btns.forEach((btn) => btn.disabled = true);
        }
    }
};

function reset() {
    cells = ['', '', '', '', '', '', '', '', ''];
    btns.forEach((btn) => {
        btn.value = '';
    });
    currentPlayer = 'X';
    result.innerHTML = `Player X Turn`;
    btns.forEach((btn) => btn.disabled = false);
};

document.querySelector('#reset').addEventListener('click', reset);

btns.forEach((btn, i) => {
    btn.addEventListener('click', () => ticTacToe(btn, i));
});

Weather App Using Html,Css And JavaScript 

Final Output Of Tic Tac Toe Game Using HTML,CSS & JavaScript

Tic Tac Toe Using HTML,CSS & JavaScript Code
Tic Tac Toe Using HTML,CSS & JavaScript Code

Live Preview Of Tic Tac Toe Using JavaScript

Now that we have completed our Tic Tac Toe Game.Our updated output with Html,Css And JavaScript. I hope you like the Tic Tac Toe Game you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development.

Thank you!

This post teaches us how to create a Create Tic Tac Toe Using HTML,CSS & JavaScript Code. If we made a mistake or any confusion, please drop a comment to reply or help you learn easily.

Written by – Code With Random/Anki

Code By – Surojit Ghosh

Leave a Reply