Skip to content

Commit ca39b16

Browse files
PBJIPBJI
authored
Merge pull request #725 from 0kt1/NumberGuessingGame-0kt1
Added Number Guessing Game
2 parents e86bfde + 8c2d8fa commit ca39b16

File tree

9 files changed

+213
-0
lines changed

9 files changed

+213
-0
lines changed

‎NumberGuessingGame/0kt1/README.md‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
# Number Guessing Game
2+
3+
Welcome to the Number Guessing Game project! This simple web-based game allows players to guess a number between 1 and 100 and receive feedback on their guesses. It features an attractive user interface and is built using HTML, CSS, and JavaScript with the help of Bootstrap for styling.
4+
5+
## Screenshots
6+
7+
![Screenshot 1](images/screenshot1.png)
8+
![Screenshot 2](images/screenshot2.png)
9+
![Screenshot 3](images/screenshot3.png)
10+
![Screenshot 4](images/screenshot4.png)
11+
12+
## Features
13+
14+
- **Number Input:** Players can enter their guesses using a number input field.
15+
16+
- **Feedback:** The game provides feedback on each guess, letting players know if their guess was too high, too low, or correct.
17+
18+
- **Attempts Card:** A card displays the number of guesses made and the guessed numbers to help players keep track of their attempts.
19+
20+
21+

‎NumberGuessingGame/0kt1/images/Screenshot1.png‎

225 KB
Loading

‎NumberGuessingGame/0kt1/images/Screenshot2.png‎

261 KB
Loading

‎NumberGuessingGame/0kt1/images/Screenshot3.png‎

238 KB
Loading

‎NumberGuessingGame/0kt1/images/Screenshot4.png‎

243 KB
Loading

‎NumberGuessingGame/0kt1/images/image1.png‎

190 KB
Loading

‎NumberGuessingGame/0kt1/index.html‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Number Guessing Game</title>
5+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
6+
<link rel="stylesheet" href="style.css">
7+
<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
8+
</head>
9+
<body>
10+
<div class="container-fluid">
11+
<div class="row">
12+
<div class="col-md-12 text-center">
13+
<h1 class="mt-5">Number Guessing Game (1-100)</h1>
14+
</div>
15+
</div>
16+
<div class="row">
17+
<div class="col-md-12 text-center">
18+
<div class="container-bg mx-auto my-5">
19+
<p class="lead">Guess a number between 1 and 100:</p>
20+
<div class="form-group">
21+
<input type="number" id="guessInput" class="form-control" min="1" max="20">
22+
</div>
23+
<button id="submitGuess" class="btn btn-primary">Submit Guess</button>
24+
</div>
25+
</div>
26+
</div>
27+
</div>
28+
<div class="feedback-container">
29+
<p id="feedback"></p>
30+
<p id="hint"></p>
31+
</div>
32+
<div class="top-left">
33+
<p class="mt-4">Attempts: <span id="guessCount">0</span></p>
34+
<p>Guessed Numbers: <span id="guessedNumbers"></span></p>
35+
</div>
36+
37+
<div class="image-container">
38+
<img src="images/image1.png" alt="Image Description">
39+
</div>
40+
41+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
42+
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
43+
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
44+
<script src="script.js"></script>
45+
</body>
46+
</html>

‎NumberGuessingGame/0kt1/script.js‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
$(document).ready(function () {
2+
3+
let guessCount = 0;
4+
const guessedNumbers = [];
5+
6+
7+
function updateGuessDisplay() {
8+
$('#guessCount').text(guessCount);
9+
$('#guessedNumbers').text(guessedNumbers.join(', '));
10+
}
11+
12+
13+
$('#submitGuess').click(function () {
14+
15+
const guess = parseInt($('#guessInput').val());
16+
17+
if (guess === randomNumber) {
18+
$('#feedback').text('Congratulations! You guessed the correct number.');
19+
$('#feedback').addClass('green-feedback');
20+
$('#guessInput').prop('disabled', true);
21+
$('#submitGuess').prop('disabled', true);
22+
} else if (guess < randomNumber) {
23+
document.getElementById("feedback").innerHTML = "Too low. Try again.";
24+
document.getElementById("feedback").style.color = "red";
25+
} else {
26+
document.getElementById("feedback").innerHTML = "Too high. Try again.";
27+
document.getElementById("feedback").style.color = "red";
28+
}
29+
30+
guessedNumbers.push(guess);
31+
32+
guessCount++;
33+
updateGuessDisplay();
34+
35+
36+
});
37+
38+
39+
const randomNumber = Math.floor(Math.random() * 100) + 1;
40+
41+
42+
});

‎NumberGuessingGame/0kt1/style.css‎

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
body {
2+
background-color: #000000;
3+
font-family: Arial, sans-serif;
4+
text-align: center;
5+
display: flex;
6+
justify-content: center;
7+
align-items: center;
8+
height: 100vh;
9+
margin: 0;
10+
}
11+
12+
h1 {
13+
color: #f2e3e3;
14+
text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
15+
}
16+
17+
18+
.h1-padding {
19+
padding: 20px;
20+
}
21+
22+
#feedback {
23+
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
24+
}
25+
26+
p{
27+
28+
color: #f2e3e3;
29+
text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
30+
31+
}
32+
33+
#feedback {
34+
font-weight: bold;
35+
}
36+
37+
button{
38+
background-color: white;
39+
color: #000;
40+
}
41+
42+
.container-bg {
43+
background-color: #09211d;
44+
background-image: linear-gradient(to top left, rgb(0, 0, 0), rgb(30, 41, 163));
45+
padding: 20px;
46+
border-radius: 10px;
47+
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
48+
max-width: 400px;
49+
width: 100%;
50+
}
51+
52+
53+
body, h1, h2, h3, h4, h5, h6 {
54+
font-family: 'Poppins', sans-serif;
55+
}
56+
57+
58+
.top-left {
59+
position: absolute;
60+
top: 10px;
61+
left: 10px;
62+
background-color: rgb(0, 247, 255);
63+
background-image: linear-gradient(to top left, rgb(12, 75, 220), rgb(0, 215, 239));
64+
padding: 10px;
65+
border-radius: 5px;
66+
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
67+
68+
}
69+
70+
.top-left p {
71+
color: #eee8e8;
72+
font-weight: 500;
73+
}
74+
75+
76+
.green-feedback {
77+
color: green !important;
78+
}
79+
80+
81+
.feedback-container {
82+
margin-bottom: 90px;
83+
position: absolute;
84+
bottom: 10px;
85+
left: 50%;
86+
transform: translateX(-50%);
87+
background-color: rgba(255, 255, 255, 0.8);
88+
padding: 25px;
89+
border-radius: 5px;
90+
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
91+
}
92+
93+
94+
.image-container {
95+
position: absolute;
96+
top: 10px;
97+
right: 10px;
98+
99+
}
100+
101+
.image-container img {
102+
width: 150px;
103+
height: auto;
104+
}

0 commit comments

Comments
 (0)