Putting it all together

The Resources folder structure should look something like this:

resources
├── images
│   └── .gitkeep
├── scripts
│   ├── rock_paper_scissors.js
│   └── index.js  ⬅️
└── styles
    └── styles.css

In this step, we will be working on the file marked with the ⬅️

In this final piece of the assignment, we will need to:

• get a handle of all elements of interest.
• then We will add event listeners to the buttons
• We will call on our RockPaperScissors class methods as needed.

1. create constants const of element handlers to the following elements
   • welcomeScreen for #welcome-screen
   • gameScreen for #game-screen
   • startGameButton for #start-game-button
   • userName for #username
   • userSelection for #user-selection
   • goButton for #go-button
   • scoreParagraph for #score
   • gameHistoryParagraph for #game-history

Example

  const welcomeScreen = document.getElementById(`welcome-screen`);

OR, using the querySelector

  const gameScreen = document.querySelector(`#game-screen`);

1. programmatically, hide the gameScreen using Bootstrap’s class d-none

     gameScreen.classList.add("d-none")
   

2. add an Event Listener to the start-game-button on the click event. a. get username from the text input and store it a variable to be used in the next step. b. instantiate the game object from the RockPaperScissors class.

    game = new RockPaperScissors(username);
   

   • Note: The top of the file already has a declared(but not initialized) variable game. I’m assigning the value of the new class object to this variable, instead of declaring it in the eventHandler. Remember variables are scoped in JS, if the variable is declared inside the event handler scope, it will only be accessible from there. c. hide the welcomeScreen and display the gameScreen Instead.
   • tip: you’ll be adding and removing the d-none class.
3. Create a function named function updateScoreTallyUI(){...}
   • Modify the #score paragraph. It should look something like this
     • <USERNAME>: <USER_SCORE> v CPU: <CPU_SCORE>
       • i.e. if username is Ben and the userScore is 3 and the cpuScore is 5, it would change the scoreParagraph to Ben: 3 v CPU: 5 you can get the username, and score object from the game object. game.username, game.score
4. Create a function named function updateGameHistoryUI(){...}
   • it makes use of the class property gameHistoryLog.
   • it clears the current game history paragraph
   • and replaces it with the content of the array.
5. add an Event Listener to the go-button on the click event.
   • get the userSelection from the select
   • call the play(userSelection) of the game object.
   • update the text of scoreParagraph using the updateScoreTallyUI() function
   • update the gameHistoryParagraph using the updateGameHistoryUI() function

Next: Finalize