Skip to main content

Part 1: Setting up the Layout

Game Flow​

The game flow should be:

  1. Web page loads with a form for the user to enter their name.
    • input is required, users cannot proceed without providing their name.
  2. After the user submits their name, a new form appears with an input for Rock, Paper, or Scissors.
    • You can use:
      • select/dropdown
      • OR buttons
      • clickable text (but why would you do that!)
  3. User submits the form with their selection (
    • input is required, they cannot submit it without a selection
  4. CPU Player (Behind the scenes), would:
    • generate a (random) response to play against the user.
    • Compare the selections to determine the winner.
    • Keep a log of selections and winners for each round.
  5. Web page would display the winner.
  6. Show the game log
  7. Reset the form after each round
  8. User should be able to start a new game.

Layout Setup​

Structure summary​

This tree diagram summarizes the body part of the HTML page structure and nesting. Below it, you'll find more details about the different elements.

body
└── div .container
    ├── h1
    ├── div #welcome-screen
    │   ├── form #name-form
    │   │   ├── div
    │   │   │   ├── label [for="username"]
    │   │   │   └── input #username [name="username"]
    │   │   └── button #start-game-button
    └── div #game-screen
        ├── div #score-tally
        │   ├── p #score
        └── form #game-form
            ├── div
            │   ├── label [for="user-selection"]
            │   ├── select #user-selection [name="user-selection"]
            │   │   ├── option "Rock"
            │   │   ├── option "Paper"
            │   │   └── option "Scissors"
            ├── button #go-button
        └── p #game-history
  • Change the web page HTML title to Rock Paper Scissors
  • Inside the <div class="container">, create the following elements nested as follows:

    • <h1> - with a title of Rock Paper Scissors.

    • 2 <div>s with IDs of welcome-screen & game-screen.

    • Inside <div id="welcome-screen">, create the following elements nested as follows:

      • <form> - with an id of name-form

        • <div>

          • <label> - with:
          • <input> - with:
            • placeholder text of Enter Name Here....
            • id of username
            • name property of username

        • <button> - with:

          • the text of Start Game!.
          • id of start-game-button

    • Inside <div id="game-screen">, create the following elements nested as follows:

      • <div> - with an id of score-tally.
        • <p> - with id of score and text of User: 0 v CPU: 0
          • Tip: Emmet abbreviation for a div with an id of score-tally and a paragraph with id of score is #score-tally>p#score.
      • <form> - with an id of game-form
        • <div>
          • <label> - with:
          • <select> - with:
            • id of user-selection
            • name of user-selection
            • 3 <option>s for Rock, Paper, & Scissors
            • Tip: use the Emmet abbreviation: select#user-selection>option*3
        • <button> - with:
          • the text of Go!.
          • id of go-button
      • <p> - with an id of game-history

Checkpoint​

It should now look like this.

initial look

I think We can do a little better.

Testing​

  • to test that your HTML satisfies the requirements, run the tests with npm run test:layout. This will run the E2E tests for the layout component only of this assignment.
  • You can also run the entire suite of E2E tests using npm run test:e2e.