Simple Tic, Tac, Toe game code

For this simple game. You have to create an HTML file, a CSS file, and a JAVASCRIPT file. Follow the below line for full code.

HTML

 


<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Tic Tac Toe</title>
<script src="http://code.jquery.com/jquery-3.4.1.js" charset="utf-8"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="my.css">
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1>Welcome to Tic Tac Toe</h1>
<p>Get ready to play!</p>
<div class="text-center">
<button id="b" type="button" class="btn btn-success btn-lg" name="button">Restart!</button>
</div>
</div>

<table align= 'center'>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table></pre>
<h3 align="center">After finish the game enter your name and See the Magic!</h3>

<center><input type="text" name="" placeholder ="Enter Your Name">
<input type="submit" name="" value="Slide Up!"></center>
<hr>
<br>
<pre></div>

<script src="my.js" charset="utf-8"></script>
</body>
</html>

CSS


td{
height: 150px;
width: 150px;
text-align: center;
border: 5px solid black;
font-size: 100px;
}

 

JAVASCRIPT


var restart = document.querySelector("#b");

var squares = document.querySelectorAll('td');

function clearBoard() {
for (var i = 0; i < squares.length; i++) {
squares[i].textContent = '';
}
}

restart.addEventListener('click',clearBoard);

function changeMarker() {
if (this.textContent === '') {
this.textContent = 'X';
}else if (this.textContent === 'X') {
this.textContent = 'O';
}else {
this.textContent = '';
}
}

for (var i = 0; i < squares.length; i++) {
squares[i].addEventListener('click',changeMarker)
}

$('input').eq(1).on('click',function () {
  $('.container').slideUp(3000)
})

 

Put these file in one folder and see the magic. For execute the example, you could see this tic tac toe link