Skip to content

Instantly share code, notes, and snippets.

@JamesRexMiller4
Last active August 29, 2019 04:59
Show Gist options
  • Save JamesRexMiller4/b5f1227dd9be7a7a1d0baac09376115a to your computer and use it in GitHub Desktop.
Save JamesRexMiller4/b5f1227dd9be7a7a1d0baac09376115a to your computer and use it in GitHub Desktop.

Zero State:

  • Two inputs to set a custom range for the random number to fall within
  • A button to update the custom range

For each player:

  • 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.

Players Guess State:

  • 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)

Phase Two: More Better

  • 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

    Phase Three: Level Up

  • 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!
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment