My Guess the number app

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.

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.

GuessTheNumber/mayank-0103/index.html

@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html lang="en-US">
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Number guessing game</title>
+  <link rel="stylesheet" href="style.css">
+  <style>
+    @media (max-width: 500px) {
+      .moving-bar p {
+        animation-duration: 20s;
+      }
+    }
+
+    @media (min-width: 501px) {
+      .moving-bar p {
+        animation-duration: 35s;
+      }
+    }
+  </style>
+</head>
+
+<body>
+  <div class="headers">
+    <p id="home">Home</p>
+    <p id="game">About The game</p>
+    <p id="author">Author Details</p>
+  </div>
+
+  <!--Details for headers-->
+  <div class="about-game">
+    <p>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.
+    </p>
+    <div class="close">
+      <img src="icons8-close.svg">
+    </div>
+  </div>
+  <div class="author-details">
+    <p>Developer : Mayank Raj</p>
+    <a href="https://github.com/mayank-0103">My Github Profile</a>
+    <div class="close">
+      <img src="icons8-close.svg">
+    </div>
+  </div>
+
+  <div class="bucket">
+    <h1>Number guessing game</h1>
+    <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
+      if
+      your guess was too high or too low.</p>
+
+    <div class="form">
+      <div>
+        <label for="guessField">Enter a guess: </label>
+        <input type="number" min="1" max="100" required id="guessField" class="guessField">
+      </div>
+      <input type="submit" value="SUBMIT GUESS" class="button" id="guessSubmit" style="position: relative;">
+    </div>
+
+    <div class="resultParas">
+      <p class="guesses"></p>
+      <p class="lastResult"></p>
+      <p class="lowOrHi"></p>
+    </div>
+  </div>
+
+  <div class="moving-bar">
+    <div>
+      <p>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!
+      </p>
+    </div>
+  </div>
+
+  <div class="black"></div>
+  <script src="script.js" defer></script>
+</body>
+
+</html>

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/";
+    }
+})