Skip to content

Commit b9a8560

Browse files
talha-yousaf-cowlartalha-yousaf-cowlar
committed
Add Wordle Game to the collection with level selection, gameplay mechanics, and responsive design
1 parent d88cab3 commit b9a8560

4 files changed

Lines changed: 1183 additions & 0 deletions

File tree

‎34-Wordle-Game/index.html‎

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
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 - Wordle 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=DM+Sans:wght@400;600;700&display=swap" rel="stylesheet" />
19+
</head>
20+
<body>
21+
<div class="wrapper">
22+
<!-- Level selection -->
23+
<div id="levelScreen" class="level-screen">
24+
<div class="level-title-row">
25+
<h1>Wordle</h1>
26+
<button type="button" id="howToPlayBtnLevel" class="how-to-play-btn" title="How to play" aria-label="How to play">
27+
<span aria-hidden="true">?</span>
28+
</button>
29+
</div>
30+
<p>Choose a level</p>
31+
<div class="level-buttons">
32+
<button type="button" data-level="easy" class="level-btn">
33+
<span class="level-name">Easy</span>
34+
<span class="level-desc">4 letters · 6 guesses</span>
35+
</button>
36+
<button type="button" data-level="medium" class="level-btn">
37+
<span class="level-name">Medium</span>
38+
<span class="level-desc">5 letters · 6 guesses</span>
39+
</button>
40+
<button type="button" data-level="hard" class="level-btn">
41+
<span class="level-name">Hard</span>
42+
<span class="level-desc">6 letters · 5 guesses</span>
43+
</button>
44+
<button type="button" data-level="expert" class="level-btn">
45+
<span class="level-name">Expert</span>
46+
<span class="level-desc">7 letters · 5 guesses</span>
47+
</button>
48+
</div>
49+
</div>
50+
51+
<!-- Game screen -->
52+
<div id="gameScreen" class="game-screen hidden">
53+
<header class="header">
54+
<h1>Wordle</h1>
55+
<span class="level-badge" id="levelBadge">Easy</span>
56+
<div class="header-actions">
57+
<button type="button" id="howToPlayBtnGame" class="how-to-play-btn" title="How to play" aria-label="How to play">
58+
<span aria-hidden="true">?</span>
59+
</button>
60+
<label class="hint-toggle">
61+
<input type="checkbox" id="showHintsToggle" />
62+
<span class="hint-toggle-label">Show hints</span>
63+
</label>
64+
<button type="button" id="changeLevelBtn" class="btn btn-ghost">Change Level</button>
65+
<button type="button" id="newGameBtn" class="btn">New Game</button>
66+
</div>
67+
</header>
68+
69+
<main class="game-container">
70+
<p id="hintArea" class="hint-area hidden" aria-live="polite"></p>
71+
<div id="board" class="board"></div>
72+
<div id="keyboard" class="keyboard"></div>
73+
</main>
74+
75+
<!-- Result overlay -->
76+
<div id="resultOverlay" class="result-overlay hidden">
77+
<div class="result-box">
78+
<h2 id="resultTitle"></h2>
79+
<p class="result-word" id="resultWord"></p>
80+
<div class="result-actions">
81+
<button type="button" id="playAgainBtn" class="btn btn-large">Play Again</button>
82+
<button type="button" id="changeLevelFromResultBtn" class="btn btn-ghost">Change Level</button>
83+
</div>
84+
</div>
85+
</div>
86+
</div>
87+
</div>
88+
89+
<!-- How to play modal -->
90+
<div id="howToPlayOverlay" class="how-to-play-overlay hidden" aria-hidden="true">
91+
<div class="how-to-play-modal" role="dialog" aria-labelledby="howToPlayTitle" aria-modal="true">
92+
<div class="how-to-play-header">
93+
<h2 id="howToPlayTitle">How to play</h2>
94+
<button type="button" id="howToPlayClose" class="how-to-play-close" aria-label="Close">&times;</button>
95+
</div>
96+
<div class="how-to-play-body">
97+
<p>Guess the <strong>hidden word</strong> in a limited number of tries.</p>
98+
<p>Each guess must be a valid word. Type with the keyboard or tap the on-screen keys, then press <strong>Enter</strong>.</p>
99+
<p>After each guess, the tiles show:</p>
100+
<ul>
101+
<li><span class="tile-demo tile-demo-correct">W</span> <strong>Green</strong> — letter is in the word and in the correct spot.</li>
102+
<li><span class="tile-demo tile-demo-present">E</span> <strong>Yellow</strong> — letter is in the word but in the wrong spot.</li>
103+
<li><span class="tile-demo tile-demo-absent">A</span> <strong>Gray</strong> — letter is not in the word.</li>
104+
</ul>
105+
<p>Choose a <strong>level</strong>: Easy (4 letters), Medium (5), Hard (6), or Expert (7). Turn on <strong>Show hints</strong> for a small clue about the word.</p>
106+
</div>
107+
</div>
108+
</div>
109+
110+
<script src="script.js"></script>
111+
</body>
112+
</html>

0 commit comments

Comments
 (0)