Tic-Tac-Toe HTML, CSS & JAVASCRIPT PROJECT
Tic-Tac-Toe HTML, CSS & JAVASCRIPT PROJECT
HTML CODE:-
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″ />
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″ />
<title>Tic-Tac-Toe</title>
<link rel=”stylesheet” href=”style.css” />
</head>
<body>
<div class=”msg-container hide”>
<p id=”msg”>Winner</p>
<button id=”new-btn”>New-game</button>
</div>
<main>
<h1>Tic-Tac-Toe</h1>
<div class=”container”>
<div class=”game”>
<button class=”box”></button>
<button class=”box”></button>
<button class=”box”></button>
<button class=”box”></button>
<button class=”box”></button>
<button class=”box”></button>
<button class=”box”></button>
<button class=”box”></button>
<button class=”box”></button>
</div>
</div>
<button id=”reset-btn”>Reset-game</button>
</main>
<script src=”game.js”></script>
</body>
</html>
CSS CODE:-
* {
margin: 0;
padding: 0;
}
body {
background-color: #0e9b5e;
text-align: center;
}
.container {
height: 70vh;
display: flex;
justify-content: center;
align-items: center;
}
.game {
height: 60vmin;
width: 60vmin;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 1.5vmin;
}
.box {
height: 18vmin;
width: 18vmin;
border-radius: 1rem;
border: none;
box-shadow: 0 0 1rem rgba(0, 0, 0, 0.3);
font-size: 8vmin;
color: #b0413e;
background-color: #e2e260;
}
#reset-btn {
padding: 1rem;
font: 1.5rem;
background-color: #191913;
color: #ffff;
border-radius: 1rem;
border: none;
}
#new-btn {
padding: 1rem;
font: 1.5rem;
background-color: #191913;
color: #ffff;
border-radius: 1rem;
border: none;
}
#msg {
font-size: 5vmin;
}
.msg-container {
height: 100vmin;
display: flex;
justify-content: center;
align-items: center;
gap: 4rem;
}
.hide {
display: none;
}
JAVASCRIPT CODE:-
let boxes = document.querySelectorAll(“.box”);
let resetBtn = document.querySelector(“#reset-btn”);
let newGameBtn = document.querySelector(“#new-btn”);
let msgContainer = document.querySelector(“.msg-container”);
let msg = document.querySelector(“#msg”);
let turnO = true;
const winPatterns = [
[0, 1, 2],
[0, 3, 6],
[0, 4, 8],
[1, 4, 7],
[2, 5, 8],
[2, 4, 6],
[3, 4, 5],
[6, 7, 8],
];
const resetGame = () => {
turnO = true;
enableBoxes();
msgContainer.classList.add(“hide”);
};
boxes.forEach((box) => {
box.addEventListener(“click”, () => {
if (turnO) {
box.innerText = “O”;
turnO = false;
} else {
box.innerText = “X”;
turnO = true;
}
box.disabled = true;
checkWinner();
});
});
const disableBoxes = () => {
for (let box of boxes) {
box.disabled = true;
}
};
const enableBoxes = () => {
for (let box of boxes) {
box.disabled = false;
box.innerText=””;
}
};
const showWinner = (winner) => {
msg.innerText = `congratulation,Winner is ${winner}`;
msgContainer.classList.remove(“hide”);
disableBoxes();
};
const checkWinner = () => {
for (let pattern of winPatterns) {
let pos1val = boxes[pattern[0]].innerText;
let pos2val = boxes[pattern[1]].innerText;
let pos3val = boxes[pattern[2]].innerText;
if (pos1val != “” && pos2val != “” && pos3val != “”) {
if (pos1val === pos2val && pos2val === pos3val) {
console.log(“winner”, pos1val);
showWinner(pos1val);
}
}
}
};
newGameBtn.addEventListener(“click”,resetGame);
resetBtn.addEventListener(“click”,resetGame);
js tic tac toe tutorial,
how to code tic tac toe,
css tic tac toe tutorial,
tic tac toe in javascript,
tic tac toe game javascript,
javascript tic tac toe game,
tic tac toe game in javascript,
tic tac toe javascript tutorial,
javascript tic tac toe tutorial,
2 player tic tac toe javascript,
javascript advanced tic tac toe,
js tic tac toe,
pure javascript tic tac toe game,
js advanced tic tac toe tutorial,
css tic tac toe,
tic tac toe game,
coding tic tac toe