Merge pull request #853 from MohanaSrinivas/main

Adding a Guessing number Game
ssitvit · Jul 24, 2023 · aee029d · aee029d
2 parents 30f66bd + 8f3a4fd
commit aee029d
Show file tree

Hide file tree

Showing 5 changed files with 109 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -212,3 +212,4 @@ git push -u origin <your_branch_name>
 <a href="https://gssoc.girlscript.tech/"><img src="https://repository-images.githubusercontent.com/331823142/9764a900-5c8e-11eb-9f94-da2a01385e83" width="10%"/></a>
 </div>
 <h2 align="center">Happy Contributing!🎉</h2>
+<h2 align="center">Thank you</h2>
diff --git a/src/Games/guessing number/Readme.md b/src/Games/guessing number/Readme.md
@@ -0,0 +1,29 @@
+Why you want use guessing number gmae?
+1.Guess the Number Game
+A simple web-based "Guess the Number" game where players have to guess a randomly generated number between 1 and 100.
+
+2.How to Play
+Open the game in your web browser.
+The game will prompt you to enter a number between 1 and 100 in the input field provided.
+After entering your guess, click the "Submit" button to check your guess.
+The game will provide feedback on whether your guess is higher or lower than the target number.
+Keep guessing until you correctly guess the target number.
+The game will display a congratulatory message along with the number of attempts it took to guess the correct number.
+3.Technologies Used
+HTML
+CSS
+JavaScript
+Getting Started
+To play the game, simply open the "index.html" file in your web browser.
+
+bash
+Copy code
+git clone https://github.com/MohanaSrinivas/guess-the-number-game.git
+cd guess-the-number-game
+Screenshots
+(Optional) Add some screenshots of the game to showcase its appearance.
+
+4.Acknowledgments
+This game was created as part of a web development practice project.
+Inspired by various "Guess the Number" game tutorials and projects online.
+Feel free to customize this README.md file to suit your specific project and add any additional information you think might be helpful for users or contributors. Good luck with your "Guess the Number Game" project!
diff --git a/src/Games/guessing number/guess.html b/src/Games/guessing number/guess.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Guess the Number Game</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <div class="container">
+        <h1>Guess the Number Game</h1>
+        <p>Guess a number between 1 and 100:</p>
+        <input type="number" id="guessInput" min="1" max="100">
+        <button onclick="checkGuess()">Submit</button>
+        <p id="message"></p>
+    </div>
+
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/src/Games/guessing number/script.js b/src/Games/guessing number/script.js
@@ -0,0 +1,23 @@
+const targetNumber = Math.floor(Math.random() * 100) + 1;
+let attempts = 0;
+
+function checkGuess() {
+    const guessedNumber = parseInt(document.getElementById('guessInput').value);
+
+    if (isNaN(guessedNumber) || guessedNumber < 1 || guessedNumber > 100) {
+        setMessage("Please enter a valid number between 1 and 100.");
+    } else {
+        attempts++;
+        if (guessedNumber === targetNumber) {
+            setMessage(`Congratulations! You guessed the correct number ${targetNumber} in ${attempts} attempts.`);
+        } else if (guessedNumber < targetNumber) {
+            setMessage("Try again! The number is higher.");
+        } else {
+            setMessage("Try again! The number is lower.");
+        }
+    }
+}
+
+function setMessage(message) {
+    document.getElementById('message').textContent = message;
+}
diff --git a/src/Games/guessing number/styles.css b/src/Games/guessing number/styles.css
@@ -0,0 +1,36 @@
+body {
+    font-family: Arial, sans-serif;
+    background-color: #f2f2f2;
+}
+
+.container {
+    text-align: center;
+    margin-top: 100px;
+}
+
+h1 {
+    color: #333;
+}
+
+button {
+    padding: 10px 20px;
+    background-color: #007bff;
+    color: #fff;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+}
+
+button:hover {
+    background-color: #0056b3;
+}
+
+input[type="number"] {
+    width: 50px;
+    padding: 5px;
+}
+
+#message {
+    font-size: 18px;
+    margin-top: 20px;
+}