# 23 - Number Guessing Game

### **Description**

Create a React application that generates a random number between a user-defined minimum and maximum, provides an input field for user guesses, offers feedback based on the guess (higher, lower, correct), and tracks the number of attempts and displays it for further engagement.

### **Algorithm**

1. Create a state variable to store the random number, user guesses, and number of attempts.
2. Define a function to generate a random number between the user-defined minimum and maximum.
3. Define a function to handle user input (guesses).
4. Define a function to provide feedback based on the guess (higher, lower, correct).
5. Define a function to update the number of attempts.
6. Render the input field, feedback message, and number of attempts.

###  Classes

* `NumberGuessingGame`: A component that represents the number guessing game.
* `GuessInput`: A component that represents the user input field.

### Code

NumberGuessingGame.js

```javascript
import React, { useState } from 'react';
import GuessInput from './GuessInput';

function NumberGuessingGame() {
  const [randomNumber, setRandomNumber] = useState(generateRandomNumber(min, max));
  const [userGuess, setUserGuess] = useState('');
  const [attempts, setAttempts] = useState(0);
  const [feedback, setFeedback] = useState('');

  const handleGuess = (guess) => {
    const userGuess = parseInt(guess);
    const feedback = getFeedback(userGuess, randomNumber);
    setUserGuess(userGuess);
    setFeedback(feedback);
    updateAttempts();
  };

  const updateAttempts = () => {
    setAttempts(attempts + 1);
  };

  const getFeedback = (guess, randomNumber) => {
    if (guess === randomNumber) {
      return 'Correct!';
    } else if (guess > randomNumber) {
      return 'Higher!';
    } else {
      return 'Lower!';
    }
  };

  const generateRandomNumber = (min, max) => {
    return Math.floor(Math.random() * (max - min + 1)) + min;
  };

  return (
    <div>
      <h2>Number Guessing Game</h2>
      <GuessInput onGuess={handleGuess} />
      <p>Feedback: {feedback}</p>
      <p>Attempts: {attempts}</p>
    </div>
  );
}

export default NumberGuessingGame;
```

GuessInput.js

```javascript
import React from 'react';

function GuessInput({ onGuess }) {
  const [guess, setGuess] = useState('');

  const handleInput = (event) => {
    const guess = event.target.value;
    setGuess(guess);
    onGuess(guess);
  };

  return (
    <input
      type="number"
      value={guess}
      onChange={handleInput}
    />
  );
}

export default GuessInput;
```

### **Explanation**

The `NumberGuessingGame` component renders the input field, feedback message, and number of attempts. The `GuessInput` component represents the user input field. The `handleGuess` function handles user input (guesses). The `getFeedback` function provides feedback based on the guess (higher, lower, correct). The `updateAttempts` function updates the number of attempts. The `generateRandomNumber` function generates a random number between the user-defined minimum and maximum.

### Possible Future Enhancements

* Add more features to the game (e.g., multiple levels, bonus rounds).
* Improve the user interface and user experience.
* Add support for multiple players.
* Display the correct answer after the game is over.
* Allow users to save and load their progress.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://choubey.gitbook.io/react-coding-puzzles/23-number-guessing-game.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.