CSS
<style>
.start-button-div {
text-align: center;
margin-bottom: 30px;
}
.start-button {
color: white;
background-color: black;
padding: 10px;
cursor: pointer;
border: solid white 2px;
width: max-content;
height: auto;
}
.game-container {
margin: 3px;
display: grid;
align-items: center;
justify-items: center;
}
button {
width: 100px;
height: 100px;
margin: 5px;
background-color: white;
border: 10px;
}
.top-row,
.middle-row,
.bottom-row {
display: grid;
grid-template-columns: auto auto auto;
gap: 5px;
}
.value {
color: black;
font-size: 50px;
}
.value {
margin: 0;
padding: 0;
width: 100%;
text-align: center;
justify-content: center;
justify-items: center;
display: grid;
}
</style>
HTML
<div class=”start-button-div”>
<button class=”start-button” onclick=”location.reload();”>New Game</button>
</div>
<div class=”result-div”></div>
<div class=”game-container”>
<div class=”top-row”>
<button class=”top-one”></button><button class=”top-two”></button><button class=”top-three”></button>
</div>
<div class=”middle-row”>
<button class=”middle-one”></button><button class=”middle-two”></button><button class=”middle-three”></button>
</div>
<div class=”bottom-row”>
<button class=”bottom-one”></button><button class=”bottom-two”></button><button class=”bottom-three”></button>
</div>
</div>
JavaScript
<script>
let topOne = document.querySelector(“.top-one”);
let topTwo = document.querySelector(“.top-two”);
let topThree = document.querySelector(“.top-three”);
let middleOne = document.querySelector(“.middle-one”);
let middleTwo = document.querySelector(“.middle-two”);
let middleThree = document.querySelector(“.middle-three”);
let bottomOne = document.querySelector(“.bottom-one”);
let bottomTwo = document.querySelector(“.bottom-two”);
let bottomThree = document.querySelector(“.bottom-three”);
let resultTitle = document.querySelector(“.result-div”);
let move = “X”;
let gameActive = true;
let result = “”;
function play() {
if (move === “X”) {
move = “O”;
} else {
move = “X”;
}
}
function gameStatus() {
if (
topOne.textContent === topTwo.textContent &&
topTwo.textContent === topThree.textContent &&
topOne.textContent !== “”
) {
topOne.style.background = “#ee7998”;
topTwo.style.background = “#ee7998”;
topThree.style.background = “#ee7998”;
gameActive = false;
result = move + ” Wins”;
} else if (
middleOne.textContent === middleTwo.textContent &&
middleTwo.textContent === middleThree.textContent &&
middleOne.textContent !== “”
) {
middleOne.style.background = “#ee7998”;
middleTwo.style.background = “#ee7998”;
middleThree.style.background = “#ee7998”;
gameActive = false;
result = move + ” Wins”;
} else if (
bottomOne.textContent === bottomTwo.textContent &&
bottomTwo.textContent === bottomThree.textContent &&
bottomOne.textContent !== “”
) {
bottomOne.style.background = “#ee7998”;
bottomTwo.style.background = “#ee7998”;
bottomThree.style.background = “#ee7998”;
gameActive = false;
result = move + ” Wins”;
} else if (
topOne.textContent === middleOne.textContent &&
middleOne.textContent === bottomOne.textContent &&
topOne.textContent !== “”
) {
topOne.style.background = “#ee7998”;
middleOne.style.background = “#ee7998”;
bottomOne.style.background = “#ee7998”;
gameActive = false;
result = move + ” Wins”;
} else if (
topTwo.textContent === middleTwo.textContent &&
middleTwo.textContent === bottomTwo.textContent &&
topTwo.textContent !== “”
) {
topTwo.style.background = “#ee7998”;
middleTwo.style.background = “#ee7998”;
bottomTwo.style.background = “#ee7998”;
gameActive = false;
result = move + ” Wins”;
} else if (
topThree.textContent === middleThree.textContent &&
middleThree.textContent === bottomThree.textContent &&
topThree.textContent !== “”
) {
topThree.style.background = “#ee7998”;
middleThree.style.background = “#ee7998”;
bottomThree.style.background = “#ee7998”;
gameActive = false;
result = move + ” Wins”;
} else if (
topOne.textContent === middleTwo.textContent &&
middleTwo.textContent === bottomThree.textContent &&
topOne.textContent !== “”
) {
topOne.style.background = “#ee7998”;
middleTwo.style.background = “#ee7998”;
bottomThree.style.background = “#ee7998”;
gameActive = false;
result = move + ” Wins”;
} else if (
topThree.textContent === middleTwo.textContent &&
middleTwo.textContent === bottomOne.textContent &&
topThree.textContent !== “”
) {
topThree.style.background = “#ee7998”;
middleTwo.style.background = “#ee7998”;
bottomOne.style.background = “#ee7998”;
gameActive = false;
result = move + ” Wins”;
} else if (
topOne.textContent !== “” &&
topTwo.textContent !== “” &&
topThree.textContent !== “” &&
middleOne.textContent !== “” &&
middleTwo.textContent !== “” &&
middleThree.textContent !== “” &&
bottomOne.textContent !== “” &&
bottomTwo.textContent !== “” &&
bottomThree.textContent !== “”
) {
gameActive = false;
result = “Tie!!!”;
}
if (!gameActive) {
gameResult();
}
}
function gameResult() {
resultTitle.innerHTML = “<h2>” + result + “</h2>”;
}
topOne.addEventListener(“click”, function () {
if (gameActive && topOne.textContent === “”) {
topOne.innerHTML = “<p class=’value’>” + move + “</p>”;
gameStatus();
play();
}
});
topTwo.addEventListener(“click”, function () {
if (gameActive && topTwo.textContent === “”) {
topTwo.innerHTML = “<p class=’value’>” + move + “</p>”;
gameStatus();
play();
}
});
topThree.addEventListener(“click”, function () {
if (gameActive && topThree.textContent === “”) {
topThree.innerHTML = “<p class=’value’>” + move + “</p>”;
gameStatus();
play();
}
});
middleOne.addEventListener(“click”, function () {
if (gameActive && middleOne.textContent === “”) {
middleOne.innerHTML = “<p class=’value’>” + move + “</p>”;
gameStatus();
play();
}
});
middleTwo.addEventListener(“click”, function () {
if (gameActive && middleTwo.textContent === “”) {
middleTwo.innerHTML = “<p class=’value’>” + move + “</p>”;
gameStatus();
play();
}
});
middleThree.addEventListener(“click”, function () {
if (gameActive && middleThree.textContent === “”) {
middleThree.innerHTML = “<p class=’value’>” + move + “</p>”;
gameStatus();
play();
}
});
bottomOne.addEventListener(“click”, function () {
if (gameActive && bottomOne.textContent === “”) {
bottomOne.innerHTML = “<p class=’value’>” + move + “</p>”;
gameStatus();
play();
}
});
bottomTwo.addEventListener(“click”, function () {
if (gameActive && bottomTwo.textContent === “”) {
bottomTwo.innerHTML = “<p class=’value’>” + move + “</p>”;
gameStatus();
play();
}
});
bottomThree.addEventListener(“click”, function () {
if (gameActive && bottomThree.textContent === “”) {
bottomThree.innerHTML = “<p class=’value’>” + move + “</p>”;
gameStatus();
play();
}
});
</script>
