- Two inputs to set a custom range for the random number to fall within
- A button to update the custom range
- An input field for guessing the number which can only accept numeric values
- An input field for their name that can accept any alpha-numeric character
- One button that submits both players guesses
- A button for clearing the input field, which does not reset the random number
- One button that resets the game and generates a new random number
- The clear button should be disabled if there is nothing to clear.
- The reset button should be disabled if there is nothing to reset.
- Display both player’s most recent guesses
- Display results and feedback for each players guess:
- If their guess is too high, it should display the error message: “That’s too high”
- If their guess is too low, it should display the error message: “That’s too low”
- If the guess is correct, it should display the success message: “BOOM!” and create a new card to display results (card details are outlined in Phase Three)
-
Range and guess input fields should only accept numerical entries
-
The Guess fields should only accept values that fall within the defined min and max range.
-
The application should display an error message if the value entered in the Max Range input is less than the value in the Min Range input
-
The application should display an error message if the value entered in the Min Range input is greater than the value in the Max Range input
-
The application should display an error message if either guess is not a number (e.g. parseInt() returns NaN).
-
The application should display an error if either guess is outside of the range of possible answers.
-
The application should display an error if the Update or Submit Guess buttons are clicked when their associated input fields do not have a value entered
-
Upon successful win, user’s range is updated:
-
Every time the user wins a round increase the maximum number by 10.
-
Every time the user wins a round decrease the minimum number by 10.
-
Display final result of each match in card UI:
-
Both player name 1 and player name 2 should be displayed
-
Winning player is indicated
-
Total combined guess count of both players is displayed
-
Delete button removes the card from page
Phase Four: Level Up extensions (if you complete all of these, reach out to instructors for more goodies)
Work through these in order:
- Display how quickly user guesses correct number
- Include at least 3 different animations. Example: one for when a card gets created/deleted. Check out this link of great examples for inspiration
- Easter Egg: use a Konami Code to display some secret surprise for users – have fun, get weird, be creative!!
- Have a Clear All button that removes all of the cards from the page.
- Have a sort button that organizes the game cards by the least amount of guesses to the greatest.
- Incorporate in the UI which game has the High Score!