Skip to content

Commit 307e66a

Browse files
he-is-talhahe-is-talha
authored
Merge pull request #8 of Feat: Add Sudoku Game #8
Feat: Add Sudoku Game
2 parents 50fd1d7 + 724fa20 commit 307e66a

4 files changed

Lines changed: 784 additions & 0 deletions

File tree

‎32-Sudoku-Game/index.html‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
<!DOCTYPE html>
2+
<html lang="en" dir="ltr">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Talha - Sudoku Game</title>
7+
8+
<!-- 👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻-->
9+
<!-- Also uploaded the demo of this code in a gif : https://c.tenor.com/x8v1oNUOmg4AAAAd/tenor.gif-->
10+
<!-- 👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻-->
11+
12+
<!-- 👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻-->
13+
<!-- More html-css-js Games Calculators Games Cards Elements Projects on https://www.github.com/he-is-talha -->
14+
<!-- 👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻-->
15+
16+
<link rel="icon" href="https://i.ibb.co/M6KTWnf/pic.jpg" />
17+
<link rel="stylesheet" href="style.css" />
18+
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;600;700&display=swap" rel="stylesheet" />
19+
</head>
20+
<body>
21+
<div class="wrapper">
22+
<!-- Level selection screen -->
23+
<div id="levelScreen" class="level-screen">
24+
<h1>Sudoku</h1>
25+
<p>Choose difficulty</p>
26+
<div class="level-buttons">
27+
<button type="button" data-level="easy" class="level-btn">Easy</button>
28+
<button type="button" data-level="medium" class="level-btn">Medium</button>
29+
<button type="button" data-level="hard" class="level-btn">Hard</button>
30+
</div>
31+
</div>
32+
33+
<!-- Game screen -->
34+
<div id="gameScreen" class="game-screen hidden">
35+
<header class="header">
36+
<h1>Sudoku</h1>
37+
<div class="toolbar">
38+
<span class="timer" id="timer">0:00</span>
39+
<span class="level-badge" id="levelBadge">Easy</span>
40+
<button type="button" id="newGameBtn" class="btn">New Game</button>
41+
<button type="button" id="changeLevelBtn" class="btn btn-ghost">Change Level</button>
42+
</div>
43+
</header>
44+
45+
<main class="game-container">
46+
<div class="board-wrapper">
47+
<div id="board" class="board"></div>
48+
</div>
49+
<div class="number-pad" id="numberPad">
50+
<button type="button" class="num-btn" data-num="1">1</button>
51+
<button type="button" class="num-btn" data-num="2">2</button>
52+
<button type="button" class="num-btn" data-num="3">3</button>
53+
<button type="button" class="num-btn" data-num="4">4</button>
54+
<button type="button" class="num-btn" data-num="5">5</button>
55+
<button type="button" class="num-btn" data-num="6">6</button>
56+
<button type="button" class="num-btn" data-num="7">7</button>
57+
<button type="button" class="num-btn" data-num="8">8</button>
58+
<button type="button" class="num-btn" data-num="9">9</button>
59+
<button type="button" class="num-btn num-btn-clear" data-num="0">Clear</button>
60+
</div>
61+
</main>
62+
63+
<div id="winOverlay" class="win-overlay hidden">
64+
<div class="win-box">
65+
<h2>You solved it!</h2>
66+
<p class="win-time" id="winTime">Time: 0:00</p>
67+
<button type="button" id="playAgainBtn" class="btn btn-large">Play Again</button>
68+
</div>
69+
</div>
70+
</div>
71+
</div>
72+
73+
<script src="script.js"></script>
74+
</body>
75+
</html>

0 commit comments

Comments
 (0)