/
index.html
65 lines (55 loc) · 2.78 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8" />
<title>Naughts & Classes</title>
<link rel="stylesheet" type="text/css" href="tic-tac-toe.css">
<meta name="viewport" content="width=device-width">
</head>
<body id="o-first">
<form id="board">
<input type="checkbox" class="x x1 y1" id="x11"><div>X</div>
<input type="checkbox" class="x x2 y1" id="x21"><div>X</div>
<input type="checkbox" class="x x3 y1" id="x31"><div>X</div>
<input type="checkbox" class="x x1 y2" id="x12"><div>X</div>
<input type="checkbox" class="x x2 y2" id="x22"><div>X</div>
<input type="checkbox" class="x x3 y2" id="x32"><div>X</div>
<input type="checkbox" class="x x1 y3" id="x13"><div>X</div>
<input type="checkbox" class="x x2 y3" id="x23"><div>X</div>
<input type="checkbox" class="x x3 y3" id="x33"><div>X</div>
<input type="checkbox" class="o x1 y1" id="o11"><div>O</div>
<input type="checkbox" class="o x2 y1" id="o21"><div>O</div>
<input type="checkbox" class="o x3 y1" id="o31"><div>O</div>
<input type="checkbox" class="o x1 y2" id="o12"><div>O</div>
<input type="checkbox" class="o x2 y2" id="o22"><div>O</div>
<input type="checkbox" class="o x3 y2" id="o32"><div>O</div>
<input type="checkbox" class="o x1 y3" id="o13"><div>O</div>
<input type="checkbox" class="o x2 y3" id="o23"><div>O</div>
<input type="checkbox" class="o x3 y3" id="o33"><div>O</div>
<label class="x x1 y1" for="x11" onclick=""></label>
<label class="x x2 y1" for="x21" onclick=""></label>
<label class="x x3 y1" for="x31" onclick=""></label>
<label class="x x1 y2" for="x12" onclick=""></label>
<label class="x x2 y2" for="x22" onclick=""></label>
<label class="x x3 y2" for="x32" onclick=""></label>
<label class="x x1 y3" for="x13" onclick=""></label>
<label class="x x2 y3" for="x23" onclick=""></label>
<label class="x x3 y3" for="x33" onclick=""></label>
<label class="o x1 y1" for="o11" onclick=""></label>
<label class="o x2 y1" for="o21" onclick=""></label>
<label class="o x3 y1" for="o31" onclick=""></label>
<label class="o x1 y2" for="o12" onclick=""></label>
<label class="o x2 y2" for="o22" onclick=""></label>
<label class="o x3 y2" for="o32" onclick=""></label>
<label class="o x1 y3" for="o13" onclick=""></label>
<label class="o x2 y3" for="o23" onclick=""></label>
<label class="o x3 y3" for="o33" onclick=""></label>
<h2 class="winner if-board-is-full">It's a draw.</h2>
<h2 class="winner if-o-wins">O Wins!</h2>
<h2 class="winner if-x-wins">X Wins!</h2>
<a href="??" class="play-again button if-x-wins if-o-wins if-board-is-full if-o-goes-first">X's turn</a>
<a href="?#o-first" class="play-again button if-x-wins if-o-wins if-board-is-full">O's turn</a>
<a href="https://github.com/pmcelhaney/naughts-and-classes" class="fork-me-on-github button if-x-wins if-o-wins if-board-is-full">Fork me on Github</a>
</form>
</body>
</html>