Guess the number
React.js
easy
Description
Build a "Guess the Number" game where the user tries to guess a randomly generated number between 1 and 100. The game provides feedback after each guess and tracks the number of attempts.
Requirements
1. Generate a Random Number
- Random number between 1 and 100 (inclusive) is generated at the start of the game.
2. User Input
- User enters a guess between 1 and 100.
- The input field must have an id="guess-input" for easy testing.
3. Feedback After Each Guess
- Correct Guess : “Congratulations! You guessed the number in X attempts.”
- Guess is less than Random number : “Too low! Try again.”
- Guess is greater than Random number: “Too high! Try again.”
- Invalid Input: “Please enter a number between 1 and 100.”
4. Track Attempts
- Keep count of the number of guesses made.
5. Buttons and Their Functions
- A button labelled "Reset Game" starts a new game.
- A button labeled "Check Guess" checks the current guess and give feedback
Input/Output Example
Input: 50
Output: Too high! Try again.
Input: 30
Output: Too low! Try again.
Input: 40
Output: Congratulations! You guessed the number in 3 attempts.
Input: 105
Output: Please enter a number between 1 and 100.
Reference UI
Preview what you need to build
Solve Similar questions 🔥