Skip to content

Commit 9551620

Browse files
Rachit-PalRachit-Pal
committed
first commit
0 parents  commit 9551620

File tree

5 files changed

+419
-0
lines changed

5 files changed

+419
-0
lines changed

‎app.js‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
const inputs = document.querySelector(".inputs"),
2+
hintTag = document.querySelector(".hint span"),
3+
guessLeft = document.querySelector(".guess-left span"),
4+
wrongLetter = document.querySelector(".wrong-letter span"),
5+
resetBtn = document.querySelector(".reset-btn"),
6+
typingInput = document.querySelector(".typing-input");
7+
8+
let word,
9+
maxGuesses,
10+
incorrectLetters = [],
11+
correctLetters = [];
12+
13+
function randomWord() {
14+
let ranItem = wordList[Math.floor(Math.random() * wordList.length)];
15+
word = ranItem.word;
16+
maxGuesses = word.length >= 5 ? 8 : 6;
17+
correctLetters = [];
18+
incorrectLetters = [];
19+
hintTag.innerText = ranItem.hint;
20+
guessLeft.innerText = maxGuesses;
21+
wrongLetter.innerText = incorrectLetters;
22+
23+
let html = "";
24+
for (let i = 0; i < word.length; i++) {
25+
html += `<input type="text" disabled>`;
26+
inputs.innerHTML = html;
27+
}
28+
}
29+
randomWord();
30+
31+
function initGame(e) {
32+
let key = e.target.value.toLowerCase();
33+
if (
34+
key.match(/^[A-Za-z]+$/) &&
35+
!incorrectLetters.includes(` ${key}`) &&
36+
!correctLetters.includes(key)
37+
) {
38+
if (word.includes(key)) {
39+
for (let i = 0; i < word.length; i++) {
40+
if (word[i] == key) {
41+
correctLetters += key;
42+
inputs.querySelectorAll("input")[i].value = key;
43+
}
44+
}
45+
} else {
46+
maxGuesses--;
47+
incorrectLetters.push(` ${key}`);
48+
}
49+
guessLeft.innerText = maxGuesses;
50+
wrongLetter.innerText = incorrectLetters;
51+
}
52+
typingInput.value = "";
53+
54+
setTimeout(() => {
55+
if (correctLetters.length === word.length) {
56+
alert(`Congrats! You found the word ${word.toUpperCase()}`);
57+
return randomWord();
58+
} else if (maxGuesses < 1) {
59+
alert("Game over! You don't have remaining guesses");
60+
for (let i = 0; i < word.length; i++) {
61+
inputs.querySelectorAll("input")[i].value = word[i];
62+
}
63+
}
64+
}, 100);
65+
}
66+
67+
resetBtn.addEventListener("click", randomWord);
68+
typingInput.addEventListener("input", initGame);
69+
inputs.addEventListener("click", () => typingInput.focus());
70+
document.addEventListener("keydown", () => typingInput.focus());

‎index.html‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<!DOCTYPE html>
2+
<html lang="en" dir="ltr">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Word Guessing Game | Rachit Pal</title>
6+
<link rel="stylesheet" href="style.css" />
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
8+
</head>
9+
<body>
10+
<div class="wrapper">
11+
<h1>Guess the Word</h1>
12+
<div class="content">
13+
<input type="text" class="typing-input" maxlength="1" />
14+
<div class="inputs"></div>
15+
<div class="details">
16+
<p class="hint">Hint: <span></span></p>
17+
<p class="guess-left">Remaining guesses: <span></span></p>
18+
<p class="wrong-letter">Wrong letters: <span></span></p>
19+
</div>
20+
<button class="reset-btn">Reset Game</button>
21+
</div>
22+
</div>
23+
24+
<script src="words.js"></script>
25+
<script src="app.js"></script>
26+
</body>
27+
</html>

‎resources/Background.jpg‎

84.6 KB
Loading

‎style.css‎

Lines changed: 124 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,124 @@
1+
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap");
2+
3+
* {
4+
margin: 0;
5+
padding: 0;
6+
box-sizing: border-box;
7+
font-family: "Poppins", sans-serif;
8+
}
9+
10+
body {
11+
display: flex;
12+
padding: 0 10px;
13+
min-height: 100vh;
14+
align-items: center;
15+
justify-content: center;
16+
background-image: url(./resources/Background.jpg);
17+
}
18+
19+
.wrapper {
20+
width: 430px;
21+
background: #fff;
22+
border-radius: 10px;
23+
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
24+
}
25+
26+
.wrapper h1 {
27+
font-size: 25px;
28+
font-weight: 500;
29+
padding: 20px 25px;
30+
border-bottom: 1px solid #ccc;
31+
}
32+
33+
.wrapper .content {
34+
margin: 25px 25px 35px;
35+
}
36+
37+
.content .inputs {
38+
display: flex;
39+
flex-wrap: wrap;
40+
justify-content: center;
41+
}
42+
43+
.inputs input {
44+
height: 57px;
45+
width: 56px;
46+
margin: 4px;
47+
font-size: 24px;
48+
font-weight: 500;
49+
color: #e2dcc8;
50+
text-align: center;
51+
border-radius: 5px;
52+
background: none;
53+
pointer-events: none;
54+
text-transform: uppercase;
55+
border: 1px solid #b5b5b5;
56+
}
57+
58+
.typing-input {
59+
opacity: 0;
60+
z-index: -999;
61+
position: absolute;
62+
pointer-events: none;
63+
}
64+
65+
.inputs input:first-child {
66+
margin-left: 0px;
67+
}
68+
69+
.content .details {
70+
margin: 20px 0 25px;
71+
}
72+
73+
.details p {
74+
font-size: 19px;
75+
margin-bottom: 10px;
76+
}
77+
78+
.content .reset-btn {
79+
width: 100%;
80+
border: none;
81+
cursor: pointer;
82+
color: #fff;
83+
outline: none;
84+
padding: 15px 0;
85+
font-size: 17px;
86+
border-radius: 5px;
87+
background: #18AEFF;
88+
transition: all 0.3s ease;
89+
}
90+
91+
.content .reset-btn:hover {
92+
background: #e2dcc8;
93+
}
94+
95+
@media screen and (max-width: 460px) {
96+
.wrapper {
97+
width: 100%;
98+
}
99+
100+
.wrapper h1 {
101+
font-size: 22px;
102+
padding: 16px 20px;
103+
}
104+
105+
.wrapper .content {
106+
margin: 25px 20px 35px;
107+
}
108+
109+
.inputs input {
110+
height: 51px;
111+
width: 50px;
112+
margin: 3px;
113+
font-size: 22px;
114+
}
115+
116+
.details p {
117+
font-size: 17px;
118+
}
119+
120+
.content .reset-btn {
121+
padding: 14px 0;
122+
font-size: 16px;
123+
}
124+
}

0 commit comments

Comments
 (0)