Skip to content

Commit 00c1cfe

Browse files
PBJIPBJI
authored
Merge pull request #805 from LakshmanRam/LakshmanRam
Added Number Guessing Game Updated-One
2 parents 2277b03 + 2e20c93 commit 00c1cfe

File tree

3 files changed

+219
-0
lines changed

3 files changed

+219
-0
lines changed

‎NumberGuessingGame/LakshmanRam/index.html‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
5+
<title>Number Guessing Game</title>
6+
<!-- Google Font -->
7+
<link
8+
href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap"
9+
rel="stylesheet"
10+
/>
11+
<!-- Stylesheet -->
12+
<link rel="stylesheet" href="style.css" />
13+
</head>
14+
<body>
15+
<div class="container">
16+
17+
<div id="game">
18+
<h1>Number Guessing Game</h1>
19+
<h3>
20+
I am thinking of a number between 1-100.<br />
21+
Can you guess it?
22+
</h3>
23+
<h4>What I'm Thinking?</h4>
24+
<div class="input-wrapper">
25+
<input type="number" placeholder="00" id="guess" />
26+
<button id="check-btn">Guess</button>
27+
</div>
28+
<p id="no-of-guesses">No.Of Guesses: 0</p>
29+
<p id="guessed-nums">Guessed Numbers are: None</p>
30+
</div>
31+
<!--Result-Pop-Up-->
32+
<div class="result">
33+
<div id="hint"></div>
34+
<button id="restart">Restart</button>
35+
36+
</div>
37+
</div>
38+
<!-- Script -->
39+
<script src="script.js"></script>
40+
</body>
41+
</html>

‎NumberGuessingGame/LakshmanRam/script.js‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
const hint = document.getElementById("hint");
2+
const noOfGuessesRef = document.getElementById("no-of-guesses");
3+
const guessedNumsRef = document.getElementById("guessed-nums");
4+
const restartButton = document.getElementById("restart");
5+
const game = document.getElementById("game");
6+
const guessInput = document.getElementById("guess");
7+
const checkButton = document.getElementById("check-btn");
8+
9+
let answer, noOfGuesses, guessedNumsArr;
10+
11+
const play = () => {
12+
const userGuess = guessInput.value;
13+
if (userGuess < 1 || userGuess > 100 || isNaN(userGuess)) {
14+
alert("Please enter a valid number between 1 and 100.");
15+
return;
16+
}
17+
guessedNumsArr.push(userGuess);
18+
noOfGuesses += 1;
19+
if (userGuess != answer) {
20+
if (userGuess < answer) {
21+
hint.innerHTML = "Too low. Try Again!";
22+
} else {
23+
hint.innerHTML = "Too high. Try Again!";
24+
}
25+
noOfGuessesRef.innerHTML = `<span>No. Of Guesses:</span> ${noOfGuesses}`;
26+
guessedNumsRef.innerHTML = `<span>Guessed Numbers are: </span>${guessedNumsArr.join(
27+
","
28+
)}`;
29+
hint.classList.remove("error");
30+
setTimeout(() => {
31+
hint.classList.add("error");
32+
}, 10);
33+
} else {
34+
hint.innerHTML = `Congratulations!<br>The number was <span>${answer}</span>.<br>You guessed the number in <span>${noOfGuesses} </span>tries.`;
35+
hint.classList.add("success");
36+
game.style.display = "none";
37+
restartButton.style.display = "block";
38+
}
39+
};
40+
41+
const init = () => {
42+
console.log("Game Started");
43+
answer = Math.floor(Math.random() * 100) + 1;
44+
console.log(answer);
45+
noOfGuesses = 0;
46+
guessedNumsArr = [];
47+
noOfGuessesRef.innerHTML = "No. Of Guesses: 0";
48+
guessedNumsRef.innerHTML = "Guessed Numbers are: None";
49+
guessInput.value = "";
50+
hint.classList.remove("success", "error");
51+
};
52+
53+
guessInput.addEventListener("keydown", (event) => {
54+
if (event.keyCode === 13) {
55+
event.preventDefault();
56+
play();
57+
}
58+
});
59+
60+
restartButton.addEventListener("click", () => {
61+
game.style.display = "grid";
62+
restartButton.style.display = "none";
63+
hint.innerHTML = "";
64+
hint.classList.remove("success");
65+
init();
66+
});
67+
68+
checkButton.addEventListener("click", play);
69+
window.addEventListener("load", init);

‎NumberGuessingGame/LakshmanRam/style.css‎

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
* {
2+
padding: 0;
3+
margin: 0;
4+
box-sizing: border-box;
5+
font-family: "Poppins", sans-serif;
6+
}
7+
body {
8+
background-color: #7296fa;
9+
}
10+
.container {
11+
width: min(90%, 40.25em);
12+
position: absolute;
13+
transform: translate(-50%, -50%);
14+
top: 50%;
15+
left: 50%;
16+
background-color: #fffcfce4;
17+
padding: 5em 2em;
18+
border-radius: 0.5em;
19+
box-shadow: 1.5em 1.5em #26233e;
20+
text-align: center;
21+
}
22+
23+
24+
#check-btn {
25+
font-size: 1.2em;
26+
font-weight: 800;
27+
}
28+
h3 {
29+
font-size: 1.5em;
30+
font-weight: 900;
31+
line-height: 2em;
32+
color: #303030;
33+
}
34+
.input-wrapper {
35+
width: 70%;
36+
display: grid;
37+
grid-template-columns: 2fr 3fr;
38+
gap: 1em;
39+
margin: 3em auto 1.5em auto;
40+
}
41+
input[type="number"] {
42+
width: 100%;
43+
padding: 1em;
44+
font-size: 1.2em;
45+
text-align: center;
46+
border: 2px solid #adaeae;
47+
border-radius: 0.3em;
48+
outline: none;
49+
appearance: text-field;
50+
-moz-appearance: textfield;
51+
}
52+
input[type="number"]::-webkit-outer-spin-button,
53+
input[type="number"]::-webkit-inner-spin-button {
54+
-webkit-appearance: none;
55+
margin: 0;
56+
}
57+
input[type="number"]:focus {
58+
border-color: #3c6fff;
59+
}
60+
button {
61+
font-size: 1em;
62+
background-color: #3c6fff;
63+
color: #ffffff;
64+
border: none;
65+
outline: none;
66+
border-radius: 0.5em;
67+
font-weight: 500;
68+
cursor: pointer;
69+
}
70+
#restart {
71+
margin: 0 auto 0 auto;
72+
padding: 0.9em 4.5em;
73+
font-size: large;
74+
font-weight: 800;
75+
position: relative;
76+
}
77+
.result {
78+
margin-top: 1em;
79+
}
80+
p {
81+
font-size: 1em;
82+
font-weight: 400;
83+
color: #565b70;
84+
word-break: break-all;
85+
}
86+
.error,
87+
.success {
88+
padding: 0.5em 0;
89+
border-radius: 0.3em;
90+
margin-bottom: 1em;
91+
animation: pop 0.5s forwards;
92+
transform: scale(0);
93+
}
94+
.error {
95+
background-color: #ffcbcb;
96+
color: #ff3e3e;
97+
}
98+
.success {
99+
background-color: #b9ffd5;
100+
color: #05c451;
101+
}
102+
@keyframes pop {
103+
0% {
104+
transform: scale(0);
105+
}
106+
100% {
107+
transform: scale(1);
108+
}
109+
}

0 commit comments

Comments
 (0)