Number Guesser Doubles - Week 2

Overview: Week 2

It’s all well and good to play a game guessing a randomly generated by yourself, but eventually you’re going to want a little bit more challenge – so let’s refactor our NumberGuesser into a 2-player game!

NOTE: All functionality from Number Guesser Doubles–Week 1 must be completed in addition to the following requirements and phases of work.
  • Build a game where a 2 users can guess a number between 1 and 100, with the ability for a custom range to be inputted for increased difficulty of play
  • Display the current guess of both players
  • Display the final results of each match in card UI
    • each card should display the name of the winner
    • each card should display both player’s names
    • each card should show how many guesses it took to guess the correct number
    • each card should have a delete button that removes the card from the page
    • EXTENSION: each card should display how long the match took
  • Game should be fully responsive and usable down to screens/viewport width of 320px
  • Project should be pushed to Github with a live site on Github Pages
  • Care and attention to detail should be clearly demonstrated in execution of the comp
  • Include a README.md in your project that summarizes the project (this does not mean paste this project spec into your README)
NOTE REMINDER: you should have the functionality outlined in the Number Guesser Doubles–Week 1 project spec completed before you being work on the Week 2 Spec/Additions.

Phase One: Basic Requirements

The application should have full functionality through Phase Three from Number Guesser Doubles–Week 1

Week 2: 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 outline in Phase Four)

Phase One: More Better

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 Two: 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!

Layout comps

Desktop layout:

Number Guesser Desktop Number Guesser Desktop Error Messages

Mobile layout:

Number Guesser Mobile

Color and font spec:

Design Specs


Scoring Rubric

Remember to check out the Syllabus for more details on how we evaluate your progression!

Functional Expectations

  • Novice: Application meets most of the expectations of phase one and execution of UI is somewhat unpolished.
  • Advanced Beginner: Application meets all of the expectations of phase one and execution of UI is somewhat unpolished but shows attention to detail.
  • Proficient: Application meets some of the phase two extensions and demonstrates good execution and control of the UI.
  • Exceptional: Application meets all of the phase two extensions and demonstrates exceptional execution, creativity, and control of the UI.


COMP RECREATION / DESIGN

  • Novice
  • Advanced Beginner
  • Proficient
  • Exceptional


HTML

  • Novice
  • Advanced Beginner
  • Proficient
  • Exceptional


CSS

  • Novice
  • Advanced Beginner
  • Proficient
  • Exceptional


JS

  • Novice
  • Advanced Beginner
  • Proficient
  • Exceptional


Git/Github

  • Novice
  • Advanced Beginner
  • Proficient
  • Exceptional


Surprise and Delight (reminder: have fun!)

  • Unicorn Rainbows
  • Hot Fire
  • Sparkles
  • Magic

Number Guesser Checkins (25 minutes each)

Take some time to go through your projects together. The first group should present their project and the functionality of their app so far, and vice versa. Take some time to go through the code including HTML, CSS, and JavaScript. Use the questions below as a guide to think about when giving each other feedback.

Application/Functionality Focused

  1. What has been your biggest win so far? What is something you are still struggling with?
  2. What strategies have helped your team collaborate? What is your plan for the next few days? If you don’t have a plan yet, write one out now. (mentor, pairings, grouping up with classmates, etc.)
  3. How close does the application match the comp? Pay attention to fonts, colors, spacing, and responsiveness.
  4. Pay attention to the UX. Play a game together. What stands out that makes the experience confusing? Is the error handling clear?
  5. Have you started working on extensions yet? How did you implement them? If not, what is one extension you would like to complete before evals?

Code/Style Focused

  1. How is the style of the code (Does it match the styleguides for HTML, CSS, and JavaScript)?
  2. Is HTML structure clean and easy to read? Are you using semantic HTML elements?
  3. Do class names follow naming conventions? Is your CSS organized well for developer empathy?
  4. Are you removing repetitive lines of code in your styles by grouping classes and following the DRY principle?
  5. Is your JavaScript organized and clearly laid out? Are there functions that could have a clearer SRP?

Summary

At the end, take a few minutes to write some notes and update your plan for the remaining few days. What feedback did you get? What areas in your application would you like to improve on before your eval? List out atleast 3 goals that you want to accomplish and bring up in your next DTR.

Lesson Search Results

Showing top 10 results