Skip to content

Commit b9d57b0

Browse files
thinkswellthinkswell
authored
Merge pull request #1190 from mayank-0103/GuessTheNumber-mayank0103
My Guess the number app
2 parents c37479c + 79fc0b5 commit b9d57b0

File tree

7 files changed

+593
-0
lines changed

7 files changed

+593
-0
lines changed

‎GuessTheNumber/mayank-0103/Guess.png

28.9 KB
Loading

‎GuessTheNumber/mayank-0103/LICENSE

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2025 Mayank Raj
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎GuessTheNumber/mayank-0103/README.md

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
# Number Guessing Game
2+
3+
## Overview
4+
The **Number Guessing Game** is a simple yet engaging interactive program that challenges users to identify a randomly generated number between **1 and 100** within **10 attempts**. The game provides instant feedback to help users refine their guesses. The game ends when the number is correctly guessed or when all attempts are used up, with an option to restart and play again.
5+
6+
![Game Screenshot](Guess.png)
7+
8+
## Features
9+
- 🎲 **Random Number Generation** - A new number is generated for every session.
10+
- 🔍 **Feedback System** - Displays whether the guess is too high, too low, or correct.
11+
- 📋 **Previous Guesses** - Keeps track of past attempts for better decision-making.
12+
- 🔄 **Game Reset Functionality** - Allows users to start a new game without refreshing the page.
13+
- 🎨 **User-Friendly Interface** - A visually appealing and responsive design for an enjoyable experience.
14+
- 📱 **Mobile Compatibility** - Adjusts layout and usability across different screen sizes.
15+
16+
## Files Included
17+
- 📄 `index.html` - The main HTML file that structures the game’s layout.
18+
- 🎨 `style.css` - The stylesheet that controls the visual design.
19+
- 📜 `script.js` - JavaScript code that handles game logic and user interaction.
20+
- 📜 `LICENSE` - Information on permissions and usage rights.
21+
- 📄 `icons8-close.svg` - A close button icon used in modal elements.
22+
23+
## How to Play
24+
1. 🖥️ Open `index.html` in a web browser.
25+
2. 🔢 Enter a guess (between 1 and 100) in the input field.
26+
3. 🎯 Click **SUBMIT GUESS** to check your input.
27+
4. 📊 The game will indicate if the guess is too high, too low, or correct.
28+
5. ⏳ Keep guessing until either:
29+
- You find the correct number 🎉
30+
- You reach the maximum of 10 attempts and see a **Game Over** message 😞
31+
6. 🔄 Click **Start New Game** to reset and play again.
32+
33+
## Technologies Used
34+
- 🌐 **HTML** - Defines the structure of the webpage.
35+
- 🎨 **CSS** - Styles the game interface and enhances user experience.
36+
- ⚡ **JavaScript** - Controls game logic, user interaction, and animations.
37+
38+
## Additional Enhancements
39+
- 🏃‍♂️ **Smooth Animations** - Enhances the look and feel of the game.
40+
- 🎭 **Interactive Elements** - Buttons and inputs respond dynamically to user actions.
41+
- 🔍 **Input Validation** - Ensures guesses are within the allowed range.
42+
- 📏 **Responsive Design** - Adapts to different screen sizes for an optimal experience.
43+
44+
## Future Enhancements
45+
- 🔊 **Sound Effects** - Add feedback sounds for winning, losing, and incorrect guesses.
46+
- 🎚️ **Difficulty Levels** - Allow players to choose different number ranges.
47+
- 🏆 **Leaderboard System** - Track and display top scores and attempts.
48+
- 🌍 **Multiplayer Mode** - Compete with friends in a turn-based challenge.
49+
50+
## Author
51+
Developed by **Mayank Raj**.
52+
For more projects, visit [GitHub Profile](https://github.com/mayank-0103).
53+
54+
## License
55+
This project follows the terms specified in the `LICENSE` file.

‎GuessTheNumber/mayank-0103/icons8-close.svg

Lines changed: 1 addition & 0 deletions
Loading

‎GuessTheNumber/mayank-0103/index.html

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
<!DOCTYPE html>
2+
<html lang="en-US">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
<title>Number guessing game</title>
8+
<link rel="stylesheet" href="style.css">
9+
<style>
10+
@media (max-width: 500px) {
11+
.moving-bar p {
12+
animation-duration: 20s;
13+
}
14+
}
15+
16+
@media (min-width: 501px) {
17+
.moving-bar p {
18+
animation-duration: 35s;
19+
}
20+
}
21+
</style>
22+
</head>
23+
24+
<body>
25+
<div class="headers">
26+
<p id="home">Home</p>
27+
<p id="game">About The game</p>
28+
<p id="author">Author Details</p>
29+
</div>
30+
31+
<!--Details for headers-->
32+
<div class="about-game">
33+
<p>The Number Guessing Game is an interactive computational exercise in probabilistic reasoning,
34+
designed to engage users in iterative hypothesis testing within a predefined numerical range. The objective is to
35+
accurately determine a randomly generated integer within the inclusive bounds of 1 to 100, constrained by a
36+
maximum
37+
of 10 attempts. The system provides immediate feedback on the relative positioning of each guess in relation to
38+
the
39+
target value, thereby enabling the player to refine subsequent predictions. The game concludes either upon
40+
successful identification of the number or upon exhaustion of the allotted attempts, at which point a reset
41+
mechanism facilitates replayability.
42+
</p>
43+
<div class="close">
44+
<img src="icons8-close.svg">
45+
</div>
46+
</div>
47+
<div class="author-details">
48+
<p>Developer : Mayank Raj</p>
49+
<a href="https://github.com/mayank-0103">My Github Profile</a>
50+
<div class="close">
51+
<img src="icons8-close.svg">
52+
</div>
53+
</div>
54+
55+
<div class="bucket">
56+
<h1>Number guessing game</h1>
57+
<p>We have selected a random number between 1 and 100. See if you can guess it in 10 turns or fewer. We'll tell you
58+
if
59+
your guess was too high or too low.</p>
60+
61+
<div class="form">
62+
<div>
63+
<label for="guessField">Enter a guess: </label>
64+
<input type="number" min="1" max="100" required id="guessField" class="guessField">
65+
</div>
66+
<input type="submit" value="SUBMIT GUESS" class="button" id="guessSubmit" style="position: relative;">
67+
</div>
68+
69+
<div class="resultParas">
70+
<p class="guesses"></p>
71+
<p class="lastResult"></p>
72+
<p class="lowOrHi"></p>
73+
</div>
74+
</div>
75+
76+
<div class="moving-bar">
77+
<div>
78+
<p>Copyright (c) 2025 Mayank Raj
79+
🔹 Software Disclaimer 🔹
80+
This game is for entertainment purposes only. There are no guarantees of accuracy, fairness, or specific
81+
outcomes. The developers are not responsible for any issues arising from its use. Play responsibly and have fun!
82+
</p>
83+
</div>
84+
</div>
85+
86+
<div class="black"></div>
87+
<script src="script.js" defer></script>
88+
</body>
89+
90+
</html>

‎GuessTheNumber/mayank-0103/script.js

Lines changed: 175 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,175 @@
1+
let target;
2+
function mousedown(event) {
3+
target = event.target;
4+
target.style.boxShadow = "none";
5+
}
6+
function mouseup() {
7+
target.style.boxShadow = "1px 1px 1px";
8+
}
9+
window.onload = function () {
10+
let buttons = document.querySelectorAll(".button");
11+
buttons.forEach(button => button.addEventListener("mousedown", mousedown));
12+
document.documentElement.addEventListener("mouseup", mouseup);
13+
};
14+
15+
function createGame(){
16+
function generateRandomNumber() {
17+
let number = Math.floor(Math.random() * 100) + 1;
18+
return () => number; // Closure: Only a function can access this value
19+
}
20+
21+
let getRandomNumber = generateRandomNumber(); // Store the function to access the number
22+
23+
const guesses = document.querySelector(".guesses");
24+
const lastResult = document.querySelector(".lastResult");
25+
const lowOrHi = document.querySelector(".lowOrHi");
26+
const guessSubmit = document.querySelector("#guessSubmit");
27+
const guessField = document.querySelector(".guessField");
28+
let guessCount = 1;
29+
let resetButton;
30+
31+
function checkGuess() {
32+
const userGuess = Number(guessField.value);
33+
const randomNumber = getRandomNumber(); // Access the stored random number safely
34+
35+
if (guessCount === 1) {
36+
guesses.textContent = "Previous guesses:";
37+
}
38+
guesses.textContent = `${guesses.textContent} ${userGuess}`;
39+
40+
if (userGuess === randomNumber) {
41+
lastResult.textContent = `Congratulations! You got it right in ${guessCount} attempts!`;
42+
lastResult.style.backgroundColor = "green";
43+
lowOrHi.textContent = "";
44+
setGameOver();
45+
}
46+
else if (guessCount === 10) {
47+
lastResult.textContent = "!!!GAME OVER!!!";
48+
lowOrHi.textContent = "";
49+
setGameOver();
50+
}
51+
else {
52+
lastResult.textContent = "Wrong!";
53+
lastResult.style.backgroundColor = "red";
54+
if (userGuess < randomNumber) {
55+
lowOrHi.textContent = "Last guess was too low!";
56+
} else if (userGuess > randomNumber) {
57+
lowOrHi.textContent = "Last guess was too high!";
58+
}
59+
}
60+
61+
guessCount++;
62+
guessField.value = "";
63+
guessField.focus();
64+
}
65+
66+
guessSubmit.addEventListener("click", checkGuess);
67+
68+
function setGameOver() {
69+
guessField.disabled = true;
70+
guessSubmit.disabled = true;
71+
resetButton = document.createElement("button");
72+
resetButton.textContent = "Start new game";
73+
resetButton.classList.add("button");
74+
resetButton.classList.add("new");
75+
lowOrHi.append(resetButton);
76+
77+
// Add event listeners for mousedown & mouseup on the new button
78+
resetButton.addEventListener("click", resetGame);
79+
resetButton.addEventListener("mousedown", mousedown);
80+
resetButton.addEventListener("mouseup", mouseup);
81+
}
82+
83+
function resetGame() {
84+
guessCount = 1;
85+
86+
const resetParas = document.querySelectorAll(".resultParas p");
87+
for (const resetPara of resetParas) {
88+
resetPara.textContent = "";
89+
}
90+
91+
resetButton.remove();
92+
93+
guessField.disabled = false;
94+
guessSubmit.disabled = false;
95+
guessField.value = "";
96+
97+
lastResult.style.removeProperty('background-color');
98+
99+
getRandomNumber = generateRandomNumber(); // Generate a new random number safely
100+
}
101+
}
102+
103+
createGame();
104+
105+
const movingBarDiv = document.querySelector('.moving-bar > div');
106+
const movingBarP = document.querySelector('.moving-bar > div > p');
107+
const movingBar = document.querySelector('.moving-bar');
108+
109+
function animateText() {
110+
const textWidth = movingBarP.clientWidth;
111+
const divWidth = movingBarDiv.clientWidth;
112+
const barWidth = movingBar.clientWidth;
113+
console.log(textWidth);
114+
console.log(divWidth);
115+
116+
movingBarP.style.animationName = `sliding-animation`;
117+
movingBarP.style.animationTimingFunction = 'linear';
118+
movingBarP.style.animationIterationCount = 'infinite';
119+
120+
const style = document.createElement('style');
121+
style.textContent = `@keyframes sliding-animation { from { transform: translateX(${divWidth}px); } to { transform: translateX(${-textWidth}px); } }`;
122+
document.head.appendChild(style);
123+
}
124+
125+
// Call the function to start the animation
126+
animateText();
127+
128+
// this is added when use resize window, animation follows it
129+
window.onresize = animateText;
130+
131+
// Capturing header elements
132+
const about_game = document.querySelector('.headers>#game');
133+
const author = document.querySelector('.headers>#author');
134+
const game_detail = document.querySelector('.about-game');
135+
const author_detail = document.querySelector('.author-details');
136+
137+
about_game.addEventListener("click", function() {
138+
game_detail.classList.add("show");
139+
document.body.querySelector('.black').classList.add("black-bg");
140+
});
141+
142+
author.addEventListener("click", function() {
143+
author_detail.classList.add("show");
144+
document.body.querySelector('.black').classList.add("black-bg");
145+
});
146+
147+
// Adding close Functionality
148+
let button_1 = document.querySelector('.about-game > .close');
149+
let button_2 = document.querySelector('.author-details > .close');
150+
151+
function closeWithAnimation(element) {
152+
element.classList.remove("show");
153+
element.classList.add("hide");
154+
setTimeout(() => {
155+
element.classList.remove("hide");
156+
document.body.querySelector('.black').classList.remove("black-bg");
157+
}, 500); // Matches the CSS animation duration
158+
}
159+
160+
button_1.addEventListener("click", function () {
161+
closeWithAnimation(game_detail);
162+
});
163+
164+
button_2.addEventListener("click", function () {
165+
closeWithAnimation(author_detail);
166+
});
167+
168+
// Adding Home Link
169+
const home = document.querySelector('.headers>#home');
170+
home.addEventListener("click", function () {
171+
let userResponse = confirm("You are being redirected to an external site\nhttps://mayank-0103.github.io/mayank-0103/\nDo you want to continue?");
172+
if (userResponse) {
173+
window.location.href = "https://mayank-0103.github.io/mayank-0103/";
174+
}
175+
})

0 commit comments

Comments
 (0)