diff --git a/GuessTheNumber/mayank-0103/Guess.png b/GuessTheNumber/mayank-0103/Guess.png new file mode 100644 index 000000000..b9a9312ef Binary files /dev/null and b/GuessTheNumber/mayank-0103/Guess.png differ diff --git a/GuessTheNumber/mayank-0103/LICENSE b/GuessTheNumber/mayank-0103/LICENSE new file mode 100644 index 000000000..379d6d3d4 --- /dev/null +++ b/GuessTheNumber/mayank-0103/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2025 Mayank Raj + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/GuessTheNumber/mayank-0103/README.md b/GuessTheNumber/mayank-0103/README.md new file mode 100644 index 000000000..dabbcf480 --- /dev/null +++ b/GuessTheNumber/mayank-0103/README.md @@ -0,0 +1,55 @@ +# Number Guessing Game + +## Overview +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. + +![Game Screenshot](Guess.png) + +## Features +- 🎲 **Random Number Generation** - A new number is generated for every session. +- πŸ” **Feedback System** - Displays whether the guess is too high, too low, or correct. +- πŸ“‹ **Previous Guesses** - Keeps track of past attempts for better decision-making. +- πŸ”„ **Game Reset Functionality** - Allows users to start a new game without refreshing the page. +- 🎨 **User-Friendly Interface** - A visually appealing and responsive design for an enjoyable experience. +- πŸ“± **Mobile Compatibility** - Adjusts layout and usability across different screen sizes. + +## Files Included +- πŸ“„ `index.html` - The main HTML file that structures the game’s layout. +- 🎨 `style.css` - The stylesheet that controls the visual design. +- πŸ“œ `script.js` - JavaScript code that handles game logic and user interaction. +- πŸ“œ `LICENSE` - Information on permissions and usage rights. +- πŸ“„ `icons8-close.svg` - A close button icon used in modal elements. + +## How to Play +1. πŸ–₯️ Open `index.html` in a web browser. +2. πŸ”’ Enter a guess (between 1 and 100) in the input field. +3. 🎯 Click **SUBMIT GUESS** to check your input. +4. πŸ“Š The game will indicate if the guess is too high, too low, or correct. +5. ⏳ Keep guessing until either: + - You find the correct number πŸŽ‰ + - You reach the maximum of 10 attempts and see a **Game Over** message 😞 +6. πŸ”„ Click **Start New Game** to reset and play again. + +## Technologies Used +- 🌐 **HTML** - Defines the structure of the webpage. +- 🎨 **CSS** - Styles the game interface and enhances user experience. +- ⚑ **JavaScript** - Controls game logic, user interaction, and animations. + +## Additional Enhancements +- πŸƒβ€β™‚οΈ **Smooth Animations** - Enhances the look and feel of the game. +- 🎭 **Interactive Elements** - Buttons and inputs respond dynamically to user actions. +- πŸ” **Input Validation** - Ensures guesses are within the allowed range. +- πŸ“ **Responsive Design** - Adapts to different screen sizes for an optimal experience. + +## Future Enhancements +- πŸ”Š **Sound Effects** - Add feedback sounds for winning, losing, and incorrect guesses. +- 🎚️ **Difficulty Levels** - Allow players to choose different number ranges. +- πŸ† **Leaderboard System** - Track and display top scores and attempts. +- 🌍 **Multiplayer Mode** - Compete with friends in a turn-based challenge. + +## Author +Developed by **Mayank Raj**. +For more projects, visit [GitHub Profile](https://github.com/mayank-0103). + +## License +This project follows the terms specified in the `LICENSE` file. \ No newline at end of file diff --git a/GuessTheNumber/mayank-0103/icons8-close.svg b/GuessTheNumber/mayank-0103/icons8-close.svg new file mode 100644 index 000000000..a52ea5013 --- /dev/null +++ b/GuessTheNumber/mayank-0103/icons8-close.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/GuessTheNumber/mayank-0103/index.html b/GuessTheNumber/mayank-0103/index.html new file mode 100644 index 000000000..3ee49b0ac --- /dev/null +++ b/GuessTheNumber/mayank-0103/index.html @@ -0,0 +1,90 @@ + + + + + + + Number guessing game + + + + + +
+

Home

+

About The game

+

Author Details

+
+ + +
+

The Number Guessing Game is an interactive computational exercise in probabilistic reasoning, + designed to engage users in iterative hypothesis testing within a predefined numerical range. The objective is to + accurately determine a randomly generated integer within the inclusive bounds of 1 to 100, constrained by a + maximum + of 10 attempts. The system provides immediate feedback on the relative positioning of each guess in relation to + the + target value, thereby enabling the player to refine subsequent predictions. The game concludes either upon + successful identification of the number or upon exhaustion of the allotted attempts, at which point a reset + mechanism facilitates replayability. +

+
+ +
+
+
+

Developer : Mayank Raj

+ My Github Profile +
+ +
+
+ +
+

Number guessing game

+

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 + if + your guess was too high or too low.

+ +
+
+ + +
+ +
+ +
+

+

+

+
+
+ +
+
+

Copyright (c) 2025 Mayank Raj + πŸ”Ή Software Disclaimer πŸ”Ή + This game is for entertainment purposes only. There are no guarantees of accuracy, fairness, or specific + outcomes. The developers are not responsible for any issues arising from its use. Play responsibly and have fun! +

+
+
+ +
+ + + + \ No newline at end of file diff --git a/GuessTheNumber/mayank-0103/script.js b/GuessTheNumber/mayank-0103/script.js new file mode 100644 index 000000000..2e51ac8b4 --- /dev/null +++ b/GuessTheNumber/mayank-0103/script.js @@ -0,0 +1,175 @@ +let target; +function mousedown(event) { + target = event.target; + target.style.boxShadow = "none"; +} +function mouseup() { + target.style.boxShadow = "1px 1px 1px"; +} +window.onload = function () { + let buttons = document.querySelectorAll(".button"); + buttons.forEach(button => button.addEventListener("mousedown", mousedown)); + document.documentElement.addEventListener("mouseup", mouseup); +}; + +function createGame(){ + function generateRandomNumber() { + let number = Math.floor(Math.random() * 100) + 1; + return () => number; // Closure: Only a function can access this value + } + + let getRandomNumber = generateRandomNumber(); // Store the function to access the number + + const guesses = document.querySelector(".guesses"); + const lastResult = document.querySelector(".lastResult"); + const lowOrHi = document.querySelector(".lowOrHi"); + const guessSubmit = document.querySelector("#guessSubmit"); + const guessField = document.querySelector(".guessField"); + let guessCount = 1; + let resetButton; + + function checkGuess() { + const userGuess = Number(guessField.value); + const randomNumber = getRandomNumber(); // Access the stored random number safely + + if (guessCount === 1) { + guesses.textContent = "Previous guesses:"; + } + guesses.textContent = `${guesses.textContent} ${userGuess}`; + + if (userGuess === randomNumber) { + lastResult.textContent = `Congratulations! You got it right in ${guessCount} attempts!`; + lastResult.style.backgroundColor = "green"; + lowOrHi.textContent = ""; + setGameOver(); + } + else if (guessCount === 10) { + lastResult.textContent = "!!!GAME OVER!!!"; + lowOrHi.textContent = ""; + setGameOver(); + } + else { + lastResult.textContent = "Wrong!"; + lastResult.style.backgroundColor = "red"; + if (userGuess < randomNumber) { + lowOrHi.textContent = "Last guess was too low!"; + } else if (userGuess > randomNumber) { + lowOrHi.textContent = "Last guess was too high!"; + } + } + + guessCount++; + guessField.value = ""; + guessField.focus(); + } + + guessSubmit.addEventListener("click", checkGuess); + + function setGameOver() { + guessField.disabled = true; + guessSubmit.disabled = true; + resetButton = document.createElement("button"); + resetButton.textContent = "Start new game"; + resetButton.classList.add("button"); + resetButton.classList.add("new"); + lowOrHi.append(resetButton); + + // Add event listeners for mousedown & mouseup on the new button + resetButton.addEventListener("click", resetGame); + resetButton.addEventListener("mousedown", mousedown); + resetButton.addEventListener("mouseup", mouseup); + } + + function resetGame() { + guessCount = 1; + + const resetParas = document.querySelectorAll(".resultParas p"); + for (const resetPara of resetParas) { + resetPara.textContent = ""; + } + + resetButton.remove(); + + guessField.disabled = false; + guessSubmit.disabled = false; + guessField.value = ""; + + lastResult.style.removeProperty('background-color'); + + getRandomNumber = generateRandomNumber(); // Generate a new random number safely + } +} + +createGame(); + +const movingBarDiv = document.querySelector('.moving-bar > div'); +const movingBarP = document.querySelector('.moving-bar > div > p'); +const movingBar = document.querySelector('.moving-bar'); + +function animateText() { + const textWidth = movingBarP.clientWidth; + const divWidth = movingBarDiv.clientWidth; + const barWidth = movingBar.clientWidth; + console.log(textWidth); + console.log(divWidth); + + movingBarP.style.animationName = `sliding-animation`; + movingBarP.style.animationTimingFunction = 'linear'; + movingBarP.style.animationIterationCount = 'infinite'; + + const style = document.createElement('style'); + style.textContent = `@keyframes sliding-animation { from { transform: translateX(${divWidth}px); } to { transform: translateX(${-textWidth}px); } }`; + document.head.appendChild(style); +} + +// Call the function to start the animation +animateText(); + +// this is added when use resize window, animation follows it +window.onresize = animateText; + +// Capturing header elements +const about_game = document.querySelector('.headers>#game'); +const author = document.querySelector('.headers>#author'); +const game_detail = document.querySelector('.about-game'); +const author_detail = document.querySelector('.author-details'); + +about_game.addEventListener("click", function() { + game_detail.classList.add("show"); + document.body.querySelector('.black').classList.add("black-bg"); +}); + +author.addEventListener("click", function() { + author_detail.classList.add("show"); + document.body.querySelector('.black').classList.add("black-bg"); +}); + +// Adding close Functionality +let button_1 = document.querySelector('.about-game > .close'); +let button_2 = document.querySelector('.author-details > .close'); + +function closeWithAnimation(element) { + element.classList.remove("show"); + element.classList.add("hide"); + setTimeout(() => { + element.classList.remove("hide"); + document.body.querySelector('.black').classList.remove("black-bg"); + }, 500); // Matches the CSS animation duration +} + +button_1.addEventListener("click", function () { + closeWithAnimation(game_detail); +}); + +button_2.addEventListener("click", function () { + closeWithAnimation(author_detail); +}); + +// Adding Home Link +const home = document.querySelector('.headers>#home'); +home.addEventListener("click", function () { + let userResponse = confirm("You are being redirected to an external site\nhttps://mayank-0103.github.io/mayank-0103/\nDo you want to continue?"); + if (userResponse) { + window.location.href = "https://mayank-0103.github.io/mayank-0103/"; + } +}) \ No newline at end of file diff --git a/GuessTheNumber/mayank-0103/style.css b/GuessTheNumber/mayank-0103/style.css new file mode 100644 index 000000000..0198dc329 --- /dev/null +++ b/GuessTheNumber/mayank-0103/style.css @@ -0,0 +1,251 @@ +@import url('https://fonts.googleapis.com/css2?family=Kelly+Slab&family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Pacifico&family=Press+Start+2P&display=swap'); + +html { + font-family: "Kelly Slab", sans-serif; + font-weight: 400; + font-style: normal; +} + +* { + box-sizing: border-box; +} + +html, +body { + height: 100%; + overflow: hidden; +} + +body { + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + flex-wrap: nowrap; + overflow: hidden; + width: 90vw; + margin: auto; +} + +.headers { + position: absolute; + width: 98vw; + background-color:rgb(255, 245, 231); + padding: 0px 10px; + top: 10px; + border-radius: 0px; + border: 1px solid rgb(116, 48, 5); + overflow: hidden; +} + +.headers>p { + display: inline-block; + margin: 10px 5px; + padding: 5px 15px; + background-color:darkgoldenrod; + font-size: 1.4rem; + color: white; + border-radius: 10px; + cursor: pointer; +} + +.about-game, .author-details { + position: absolute; + opacity: 0; + visibility: hidden; + width: 500px; + border: 1px solid black; + border-radius: 5px; + padding: 20px; + z-index: 2; + background-color: antiquewhite; +} + +.about-game>p, .author-details>p { + margin: 0; +} + +.show { + opacity: 1; + visibility: visible; + transition: opacity 0.5s ease-out, visibility 0.5s linear; +} + +.hide { + opacity: 0; + visibility: hidden; + transition: opacity 0.5s ease-out, visibility 0.5s linear 0.5s; +} + +.close img { + position: absolute; + top: 7px; + right: 5px; + height: 35px; + width: 35px; + cursor: pointer; +} + +.close img:hover { + transform: scale(1.2); +} + +.black-bg { + position: absolute; + visibility: visible; + background-color: black; + opacity: 0.8; + height: 100vh; + width: 100vw; + transition: all 0.5s linear; +} + +/* +.black-bg .bucket, +.black-bg .moving-bar, +.black-bg .headers { + pointer-events: none; + user-select: none; + transition: all 2000ms linear; +} +*/ + +.bucket { + max-width: 600px; + border: 2px solid black; + border-radius: 10px; + padding: 20px 40px; + background-color: aliceblue; +} + +h1 { + font-family: "Press Start 2P", system-ui; + font-size: 2em; +} + +.form { + display: flex; + justify-content: center; + align-items: flex-end; + flex-direction: column; + width: fit-content; + gap: 10px; +} + +.button { + font-family: "Noto Sans", sans-serif; + font-size: 1.2em; + background-color: rgb(255, 215, 141); + color: rgb(0, 0, 0); + border-radius: 5px; + border: 1.5px solid rgb(104, 11, 5); + box-shadow: 1px 1px 1px; + cursor: pointer; +} + +.new { + background-color: greenyellow; + border: 1px solid black; +} + +#guessField { + border: none; + border-bottom: 2px solid black; + border-radius: 5px; + padding: 5px; +} + +#guessField:focus { + outline: none; + background-color: rgb(255, 255, 235); +} + +.form input[type="number"] { + width: 200px; +} + +.lastResult { + color: white; + padding: 3px; +} + +.moving-bar { + position: absolute; + background-color:rgb(255, 245, 231); + padding: 0px 5px; + margin: 0px 0px; + width: 100%; + bottom: 10px; + border-radius: 40px; + border: 1px solid rgb(116, 48, 5); + overflow: hidden; +} + +.moving-bar>div { + position: relative; + margin: 5px 10px; + font-weight: bold; + overflow: hidden; + border-radius: 50px; +} + +.moving-bar>div>p { + font-size: 1.5em; + position: relative; + display: inline-block; + margin: 0; + white-space: nowrap; /* Prevents text from wrapping */ + overflow: hidden; /* Hides overflowing text */ +} + +@media (max-width: 650px) { + .headers { + position: absolute; + display: flex; + justify-content: space-between; + align-items: center; + width: 98vw; + background-color:rgb(255, 245, 231); + padding: 5px 10px; + top: 10px; + border-radius: 0px; + border: 1px solid rgb(116, 48, 5); + overflow: hidden; + } + + .headers>p { + margin: 5px 0px; + padding: 5px 4px; + font-size: 1.2em; + } + + .about-game, .author-details { + width: 90%; + } + + .bucket { + padding: 20px 20px; + background-color: aliceblue; + } + + h1 { + font-size: 1.5em; + margin-top: 0px; + } + + .bucket>p { + text-align: justify; + } + + .form { + gap: 5px; + } + + .form input[type="number"] { + width: 150px; + } + + #guessField:focus { + background-color: white; + } +} \ No newline at end of file