Facebook Pixel

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

guessNumber

Preview what you need to build

Solve Similar questions 🔥