Skip to content

Commit b2acf84

Browse files
kishanrajput23kishanrajput23
authored
Merge pull request #429 from gulatikeshav/main
Guessing Number -> html css javascript
2 parents 539d166 + 561f678 commit b2acf84

File tree

3 files changed

+217
-0
lines changed

3 files changed

+217
-0
lines changed

‎index.html

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7+
<title>Number Guessing Game</title>
8+
<link rel="stylesheet" href="style.css">
9+
</head>
10+
<body style="background-color:#212121; color:#fff;">
11+
12+
13+
<div id="wrapper">
14+
<h1>Number guessing game</h1>
15+
<p>Try and guess a random number between 1 and 100.</p>
16+
<p>You have 10 attempts to guess the right number.</p>
17+
</br>
18+
<form class="form">
19+
<label2 for="guessField" id="guess">Guess a number</label>
20+
<input type="text" id="guessField" class="guessField">
21+
<input type="submit" id="subt" value="Submit guess" class="guessSubmit">
22+
</form>
23+
24+
<div class="resultParas">
25+
<p >Previous Guesses: <span class="guesses"></span></p>
26+
<p >Guesses Remaining: <span class="lastResult">10</span></p>
27+
<p class="lowOrHi"></p>
28+
</div>
29+
</div>
30+
<script src="script.js"></script>
31+
</body>
32+
</html>

‎script.js

+93
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
2+
let randomNumber = parseInt(Math.random() * 100 + 1);
3+
4+
const submit = document.querySelector('#subt');
5+
const userInput = document.querySelector('#guessField');
6+
const guessSlot = document.querySelector('.guesses');
7+
const remaining = document.querySelector('.lastResult');
8+
const lowOrHi = document.querySelector('.lowOrHi');
9+
const startOver = document.querySelector('.resultParas');
10+
11+
const p = document.createElement('p');
12+
13+
let prevGuess = [];
14+
let numGuess = 1;
15+
16+
let playGame = true;
17+
18+
if (playGame) {
19+
submit.addEventListener('click', function (e) {
20+
e.preventDefault();
21+
const guess = parseInt(userInput.value);
22+
console.log(guess);
23+
validateGuess(guess);
24+
});
25+
}
26+
27+
function validateGuess(guess) {
28+
if (isNaN(guess)) {
29+
alert('PLease enter a valid number');
30+
} else if (guess < 1) {
31+
alert('PLease enter a number more than 1');
32+
} else if (guess > 100) {
33+
alert('PLease enter a number less than 100');
34+
} else {
35+
prevGuess.push(guess);
36+
if (numGuess === 11) {
37+
displayGuess(guess);
38+
displayMessage(`Game Over. Random number was ${randomNumber}`);
39+
endGame();
40+
} else {
41+
displayGuess(guess);
42+
checkGuess(guess);
43+
}
44+
}
45+
}
46+
47+
function checkGuess(guess) {
48+
if (guess === randomNumber) {
49+
displayMessage(`You guessed it right`);
50+
endGame();
51+
} else if (guess < randomNumber) {
52+
displayMessage(`Number is TOOO low`);
53+
} else if (guess > randomNumber) {
54+
displayMessage(`Number is TOOO High`);
55+
}
56+
}
57+
58+
function displayGuess(guess) {
59+
userInput.value = '';
60+
guessSlot.innerHTML += `${guess}, `;
61+
numGuess++;
62+
remaining.innerHTML = `${11 - numGuess} `;
63+
}
64+
65+
function displayMessage(message) {
66+
lowOrHi.innerHTML = `<h2>${message}</h2>`;
67+
}
68+
69+
function endGame() {
70+
userInput.value = '';
71+
userInput.setAttribute('disabled', '');
72+
p.classList.add('button');
73+
p.innerHTML = `<h2 id="newGame">Start new Game</h2>`;
74+
startOver.appendChild(p);
75+
playGame = false;
76+
newGame();
77+
}
78+
79+
function newGame() {
80+
const newGameButton = document.querySelector('#newGame');
81+
newGameButton.addEventListener('click', function (e) {
82+
randomNumber = parseInt(Math.random() * 100 + 1);
83+
prevGuess = [];
84+
numGuess = 1;
85+
guessSlot.innerHTML = '';
86+
remaining.innerHTML = `${11 - numGuess} `;
87+
userInput.removeAttribute('disabled');
88+
startOver.removeChild(p);
89+
90+
playGame = true;
91+
});
92+
}
93+

‎style.css

+92
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
html {
2+
font-family: sans-serif;
3+
}
4+
5+
body {
6+
width: 300px;
7+
max-width: 750px;
8+
min-width: 480px;
9+
margin: 0 auto;
10+
background-color: #212121;
11+
}
12+
13+
.lastResult {
14+
color: white;
15+
padding: 7px;
16+
}
17+
18+
.guesses {
19+
color: white;
20+
padding: 7px;
21+
}
22+
23+
button {
24+
background-color: #141414;
25+
color: #fff;
26+
width: 250px;
27+
height: 50px;
28+
border-radius: 25px;
29+
font-size: 30px;
30+
border-style: none;
31+
margin-top: 30px;
32+
/* margin-left: 50px; */
33+
}
34+
35+
#subt {
36+
background-color: #161616;
37+
color: #ffffff;
38+
width: 200px;
39+
height: 50px;
40+
border-radius: 10px;
41+
font-size: 20px;
42+
border-style: none;
43+
margin-top: 50px;
44+
/* margin-left: 75px; */
45+
}
46+
47+
#guessField {
48+
color: #000;
49+
width: 250px;
50+
height: 50px;
51+
font-size: 30px;
52+
border-style: none;
53+
margin-top: 25px;
54+
55+
/* margin-left: 50px; */
56+
border: 5px solid #6c6d6d;
57+
text-align: center;
58+
}
59+
60+
#guess {
61+
font-size: 55px;
62+
/* margin-left: 90px; */
63+
margin-top: 120px;
64+
color: #fff;
65+
}
66+
67+
.guesses {
68+
background-color: #7a7a7a;
69+
}
70+
71+
#wrapper {
72+
box-sizing: border-box;
73+
text-align: center;
74+
width: 450px;
75+
height: 584px;
76+
background-color: #474747;
77+
color: #fff;
78+
font-size: 25px;
79+
}
80+
81+
h1 {
82+
background-color: #161616;
83+
84+
color: #fff;
85+
text-align: center;
86+
}
87+
88+
p {
89+
font-size: 16px;
90+
text-align: center;
91+
}
92+

0 commit comments

Comments
 (0)