Tic Tac Game

by MItul Patel

HTML

<body>
	<div id="container">
		<header>
			<h1>Tic Tac Toe</h1>
		</header>
		<ul id="board">
			<li id="spot1"></li>
			<li id="spot2"></li>
			<li id="spot3"></li>
			<li id="spot4"></li>
			<li id="spot5"></li>
			<li id="spot6"></li>
			<li id="spot7"></li>
			<li id="spot8"></li>
			<li id="spot9"></li>
		</ul>
		<div class="clearfix"></div>
		<footer id="reset">Reset</footer>
	</div>
</body>

CSS

body {
	color: #666;
	font-family: "Open Sans", sans-serif;
}
h1 {
	text-align: center;
	color: #444;
}
.clearfix {
	clear: both;
}
#container {
	width: 350px;
	overflow: auto;
	margin: 40px auto;
	background: lightgray;
	padding-bottom: 40px;
	border-radius: 10px;
}
#board li {
	float: left;
	margin: 10px;
	height: 70px;
	width: 65px;
	font-size: 55px;
	border: 2px solid gray;
	background: white;
	color: #ccc;
	list-style: none;
	text-align: center;
	border-radius: 5px;
}

#board li:hover, #reset:hover {
	cursor: pointer;
	background: #6D6A6A; 
}
#board li:hover {
	background: lightgray;
}

#reset {
	border: 0;
	background: #444;
	color: white;
	width: 65%;
	padding: 15px;
	border-radius: 5px;
	text-align: center;
	margin: 10px auto;
}
.o {
	color: green !important;
}
.x {
	color: red !important;
}

JavaScript

Tic$(document).ready(function() {
	var x = "x";
	var o = "o";
	var turns = 0;

// spots stored in variables 
	var spot1 = $("#spot1");
	var spot2 = $("#spot2");
	var spot3 = $("#spot3");
	var spot4 = $("#spot4");
	var spot5 = $("#spot5");
	var spot6 = $("#spot6");
	var spot7 = $("#spot7");
	var spot8 = $("#spot8");
	var spot9 = $("#spot9");

// function for resetting the board
	function remove() {
			$("#board li").text("");
			$("#board li").removeClass("disable");
			$("#board li").removeClass("o");
			$("#board li").removeClass("x");
			turns = 0;
	}

// Board click 
	$("#board li").on("click", function() {
		console.log(turns);
		
		//if(turns % 2 === 0) {
			$(this).text(x);
			$(this).addClass('disable x');
		//} 
		xWins();
		
		//if(turns % 2 !== 0) {
			compCheck();
		//} 
		oWins();
		turns ++;
		draw();
	});


	//Checking for Wins

	function xWins() {
		if(spot1.hasClass(x) && spot2.hasClass(x) && spot3.hasClass(x) || 
			spot1.hasClass(x) && spot4.hasClass(x) && spot7.hasClass(x) ||
			spot1.hasClass(x) && spot5.hasClass(x) && spot9.hasClass(x) ||
			spot2.hasClass(x) && spot5.hasClass(x) && spot8.hasClass(x) ||
			spot3.hasClass(x) && spot5.hasClass(x) && spot7.hasClass(x) ||
			spot3.hasClass(x) && spot6.hasClass(x) && spot9.hasClass(x) ||
			spot4.hasClass(x) && spot5.hasClass(x) && spot6.hasClass(x) ||
			spot7.hasClass(x) && spot8.hasClass(x) && spot9.hasClass(x)
			)	{
				alert("Winner is X");
				remove();			
				}
	}

		function oWins() {
		if(spot1.hasClass(o) && spot2.hasClass(o) && spot3.hasClass(o) || 
			spot1.hasClass(o) && spot4.hasClass(o) && spot7.hasClass(o) ||
			spot1.hasClass(o) && spot5.hasClass(o) && spot9.hasClass(o) ||
			spot2.hasClass(o) && spot5.hasClass(o) && spot8.hasClass(o) ||
			spot3.hasClass(o) && spot5.hasClass(o) && spot7.hasClass(o) ||
			spot3.hasClass(o) && spot6.hasClass(o) && spot9.hasClass(o) ||
			spot4.hasClass(o) && spot5.hasClass(o) && spot6.hasClass(o) ||
			spot7.hasClass(o) && spot8.hasClass(o) &&...