Skip to content

Commit 5f55ef1

Browse files
venisha-kalolavenisha-kalola
authored
Merge pull request #168 from SuvanshTembe/feature-enhanced-tic-tac-toe
enhanced tic-tac-toe Fixes #154
2 parents 45cf6cd + 2577361 commit 5f55ef1

File tree

3 files changed

+676
-163
lines changed

3 files changed

+676
-163
lines changed

‎projects/tic-tac-toe/index.html‎

Lines changed: 85 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,92 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8">
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<title>Tic-Tac-Toe</title>
7-
<link rel="stylesheet" href="styles.css">
8-
</head>
9-
<body>
10-
<main>
11-
<h1>Tic-Tac-Toe</h1>
12-
<div id="board" class="board"></div>
13-
14-
<div class="controls">
15-
<button id="restartBtn">Restart</button>
16-
<select id="modeSelect">
17-
<option value="2P">2 Players</option>
18-
<option value="AI">Play vs AI</option>
19-
</select>
20-
<select id="themeSelect">
21-
<option value="dark">Dark</option>
22-
<option value="light">Light</option>
23-
</select>
24-
</div>
25-
26-
<div class="scoreboard">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Tic-Tac-Toe</title>
7+
<link
8+
href="https://fonts.googleapis.com/icon?family=Material+Icons"
9+
rel="stylesheet"
10+
/>
11+
<link rel="stylesheet" href="styles.css" />
12+
</head>
13+
<body>
14+
<button id="themeToggle" class="theme-toggle" aria-label="Toggle theme">
15+
<svg
16+
class="sun-icon"
17+
width="20"
18+
height="20"
19+
viewBox="0 0 24 24"
20+
fill="none"
21+
stroke="currentColor"
22+
stroke-width="2"
23+
>
24+
<circle cx="12" cy="12" r="5" />
25+
<line x1="12" y1="1" x2="12" y2="3" />
26+
<line x1="12" y1="21" x2="12" y2="23" />
27+
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
28+
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
29+
<line x1="1" y1="12" x2="3" y2="12" />
30+
<line x1="21" y1="12" x2="23" y2="12" />
31+
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
32+
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
33+
</svg>
34+
<svg
35+
class="moon-icon"
36+
width="20"
37+
height="20"
38+
viewBox="0 0 24 24"
39+
fill="none"
40+
stroke="currentColor"
41+
stroke-width="2"
42+
>
43+
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
44+
</svg>
45+
</button>
46+
<main>
47+
<div class="scoreboard">
2748
<p>X Wins: <span id="xScore">0</span></p>
2849
<p>O Wins: <span id="oScore">0</span></p>
2950
<p>Draws: <span id="drawScore">0</span></p>
30-
</div>
31-
</main>
51+
<p>Mode: <span id="Currentmode">player</span></p>
52+
</div>
53+
<div class="HeadingContainer">
54+
<h1>Tic-Tac-Toe</h1>
55+
</div>
56+
<div id="board" class="board"></div>
57+
<div class="players">
58+
<div class="player one">Player 1</div>
59+
<span
60+
class="material-icons md-36 orange-marker"
61+
style="visibility: hidden"
62+
>
63+
chevron_left
64+
</span>
65+
<span
66+
class="material-icons md-36 pink-marker marker-an"
67+
style="visibility: hidden"
68+
>
69+
chevron_right
70+
</span>
71+
<div class="player two">Player 2</div>
72+
</div>
73+
<div class="controls">
74+
<button id="restartBtn">Restart</button>
75+
<span class="material-icons md-24 exit"> settings </span>
76+
</div>
77+
<div class="start-modal">
78+
<div class="start-screen">
79+
<div class="selection">
80+
<h3>Play against:</h3>
81+
</div>
82+
<div class="choices">
83+
<h3 class="select-player" value="2P">Player</h3>
84+
<h3 class="select-computer" value="AI">Computer</h3>
85+
</div>
86+
</div>
87+
</div>
88+
</main>
3289

33-
<script src="main.js"></script>
34-
</body>
90+
<script src="main.js"></script>
91+
</body>
3592
</html>

0 commit comments

Comments
 (0)