This is a simple math game built with React that prompts the user to add two randomly generated numbers. The user types their answer into an input field and presses enter to submit. If they answer correctly, a new set of numbers is generated and their score is incremented. If they answer incorrectly, their score is decremented. The game ends when the user reaches a score of 10.
- React - For building the UI and managing state
- Bootstrap - For basic styling
- Babel - To transpile JSX to vanilla JavaScript
The app consists of a single App
component that manages the entire game state and logic.
The component's state contains:
num1
- The first randomly generated numbernum2
- The second randomly generated numberresponse
- The user's answer inputscore
- The user's current score
- When a key is pressed in the input field, the
inputKeyPress
handler checks if it is "Enter". - If so, it parses the input to a number and compares it to the expected answer.
- If correct, new random numbers are generated and score incremented.
- If wrong, the input is cleared and score decremented.
- The
updateResponse
handler updates theresponse
state on each change of the input. - When the score reaches 10, a winning message is displayed.
The component conditionally renders:
- The math problem and input field if the game is still active
- A winning message once the user has won This allows the game to end once a winning condition is met.
The component loads Bootstrap from a CDN for basic styling and Babel for JSX processing.