Skip to content

Commit e1571cc

Browse files
devmalik7devmalik7
authored
Merge pull request #81 from princesatapathy/main
I
2 parents bab4a38 + d0a76df commit e1571cc

3 files changed

Lines changed: 215 additions & 0 deletions

File tree

‎Javascript/GuessingNumber/index.html‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
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="styles.css">
9+
</head>
10+
<body style="background-color:#212121; color:#fff;">
11+
<nav>
12+
<a href="/" aria-current="page">Home</a>
13+
<a target="_blank" href="https://www.youtube.com/@chaiaurcode"
14+
>Youtube channel</a
15+
>
16+
</nav>
17+
18+
<div id="wrapper">
19+
<h1>Number guessing game</h1>
20+
<p>Try and guess a random number between 1 and 100.</p>
21+
<p>You have 10 attempts to guess the right number.</p>
22+
</br>
23+
<form class="form">
24+
<label2 for="guessField" id="guess">Guess a number</label>
25+
<input type="text" id="guessField" class="guessField">
26+
<input type="submit" id="subt" value="Submit guess" class="guessSubmit">
27+
</form>
28+
29+
<div class="resultParas">
30+
<p >Previous Guesses: <span class="guesses"></span></p>
31+
<p >Guesses Remaining: <span class="lastResult">10</span></p>
32+
<p class="lowOrHi"></p>
33+
</div>
34+
</div>
35+
<script src="script.js"></script>
36+
</body>
37+
</html>

‎Javascript/GuessingNumber/script.js‎

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

‎Javascript/GuessingNumber/styles.css‎

Lines changed: 92 additions & 0 deletions
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: 550px;
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)