added everything (#83)

Prodigy-InfoTech · Oct 10, 2023 · 7f7065e · 7f7065e
1 parent c2f5349
commit 7f7065e
Show file tree

Hide file tree

Showing 5 changed files with 130 additions and 0 deletions.
diff --git a/Guess The Number/back.jpg b/Guess The Number/back.jpg
diff --git a/Guess The Number/index.html b/Guess The Number/index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Number Guessing Game</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="content">
+        <h1>Number Guessing Game</h1>
+        <p>Guess the number between 1 and 100:</p>
+        <input type="number" id="guess" min="1" max="100">
+        <button id="check">Check</button>
+        <div id="result-container">
+            <p id="message"></p>
+        </div>
+        <p>Attempts: <span id="attempts">0</span></p>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Guess The Number/readme.md b/Guess The Number/readme.md
@@ -0,0 +1,34 @@
+# Online Guessing Game
+
+## Description
+
+This is a simple online number guessing game where the player tries to guess a randomly generated number between 1 and 100. The game provides feedback on whether the guess is too high or too low and keeps track of the number of attempts it takes to guess the correct number
+
+## Features
+
+- Randomly generated secret number between 1 and 100.
+- Input validation to ensure the user enters a valid number.
+- Real-time feedback on the guess (too high, too low, or correct).
+- Display of the number of attempts it took to guess the correct number.
+- Disable the input field and "Check" button after a correct guess for game completion.
+
+## Technologies Used
+
+- HTML: For creating the game's structure and user interface.
+- CSS: For styling and layout of the game elements.
+- JavaScript: For implementing the game's logic and interactivity.
+
+## Usage
+
+1. Clone this repository to your local machine.
+2. Open the index.html file in a web browser.
+3. You will see the Number Guessing Game interface.
+4. Enter your guess in the input field.
+5. Click the "Check" button to check your guess.
+6. Follow the on-screen messages to determine if your guess is too high, too low, or correct.
+7. Keep guessing until you correctly guess the secret number.
+8. After a correct guess, the input field and "Check" button will be disabled, and you'll see the number of attempts it took.
+
+## Contribution
+
+- Contributed by: https://github.com/ishan-nahid
diff --git a/Guess The Number/script.js b/Guess The Number/script.js
@@ -0,0 +1,32 @@
+// Generate a random number between 1 and 100
+const secretNumber = Math.floor(Math.random() * 100) + 1;
+
+let attempts = 0; // Initialize a variable to keep track of the number of attempts
+
+// Get references to HTML elements
+const guessInput = document.getElementById("guess"); // Input field for user's guess
+const checkButton = document.getElementById("check"); // Button to check the guess
+const message = document.getElementById("message"); // Element to display messages
+const attemptsDisplay = document.getElementById("attempts"); // Element to display the number of attempts
+
+// Add a click event listener to the "Check" button
+checkButton.addEventListener("click", function() {
+    const userGuess = parseInt(guessInput.value); // Get the user's guess and convert it to an integer
+    attempts++; // Increment the number of attempts
+
+    // Check if the user's input is not a valid number between 1 and 100
+    if (isNaN(userGuess) || userGuess < 1 || userGuess > 100) {
+        message.textContent = "Please enter a valid number between 1 and 100.";
+    } else if (userGuess === secretNumber) { // Check if the user's guess is correct
+        message.textContent = `Congratulations! You guessed the number in ${attempts} attempts.`;
+        guessInput.disabled = true; // Disable the input field
+        checkButton.disabled = true; // Disable the "Check" button
+    } else if (userGuess < secretNumber) { // Check if the guess is too low
+        message.textContent = "Too low. Try again.";
+    } else { // If none of the above conditions are met, the guess is too high
+        message.textContent = "Too high. Try again.";
+    }
+
+    attemptsDisplay.textContent = attempts; // Update the displayed number of attempts
+    guessInput.value = ""; // Clear the input field for the next guess
+});
diff --git a/Guess The Number/style.css b/Guess The Number/style.css
@@ -0,0 +1,42 @@
+html, body {
+    text-align: center;
+    font-family: Arial, sans-serif;
+    background-image: url('back.jpg');
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-attachment: fixed;
+    margin: 0;
+    padding: 0;
+}
+
+.content {
+    margin-top: 20%;
+    position: relative;
+    z-index: 1;
+}
+
+h1 {
+    color: #333;
+}
+
+input[type="number"] {
+    width: 175px;
+    padding: 5px;
+}
+
+button {
+    padding: 5px 10px;
+    background-color: #007bff;
+    color: #fff;
+    border: none;
+    cursor: pointer;
+}
+
+button:hover {
+    background-color: #0056b3;
+}
+
+p {
+    margin: 10px;
+    font-size: 18px;
+}