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.

    • Tip: try typing the emmet abbreviation/shorthand #welcome-screen+#game-screen and hit enter. 😉

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

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

      • <div>

        • <label> - with:
          • text of Your Name.
          • for attribute of username
        • <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:
          • a text of Select your choice
          • for attribute of user-selection
        • <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.

I think We can do a little better.