WOOFCODE logo

Bonus Homework Week 4

Introduction

In week 4, you are connecting what you know about JavaScript with what you know about HTML and CSS. We learned about the DOM, how to select elements on the page using the document object, and how to add event listeners to elements on the screen.

For this week’s bonus homework, your main task for the homework will be to create an application which lets us play “rock, paper, scissors” with a computer!

Image of final product

You can check out the finished product here!

These problems are meant to make you think, so I’m not giving you as many hints as I could do. If you find it hard to figure out exactly what you’re supposed to be doing here, then leave a message on the week-4 channel on Discord, and I can explain in more detail!

Assignment

1) Set up your JavaScript environment | 20 mins

To start off for this week, I want you to create some files on your computer, and open them up with VSCode.

If you didn’t do any of the bonus homework material yet, then check out week 0’s bonus homework, with has some information to help get started with VSCode.

Make a new folder called week4-problems with a blank index.html file as normal, and a file called main.js and styles.css alongside it. You might also want to include an images folder, where you can store any pictures:

week4-problems
│   index.html
|   main.js
|   styles.css
└───images
│   │   image1.jpg
│   │   image2.jpg
|   |   ...

Once you have this set up, make sure to include your main.js and styles.css files from inside your HTML file. Your index.html file should end up looking like this:

<!DOCTYPE html>
<html>
<head>
  <title>Week 4 Problems</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <script src="main.js"></script>
</body>
</html>

Finally, write a simple console log at the top of your main.js file, and make sure that your message shows up in the developer tools console:

console.log("Hello World")

Alternatively, you can also choose to simply download this starter code from GitHub, which also includes some images that I’m using to display my computerized hand.

2) Write the HTML and CSS for Rock, Paper, Scissors | 45 min

As a first step to getting our game to work, we’ll want to take care of the HTML (the structure of our page) and the CSS (defining how all the elements should look).

I decided to use flexbox to handle most of the positioning for my app this week - but you can feel free to do this however you like.

Try to come up with something that vaguely looks like my site:

Image of final product

We ultimately want to end up with:

  • A header reading “Rock Paper Scissors”
  • A scoreboard that shows how many games the player and computer have won
  • An image of a computerized hand
  • Some text under the hand asking to play
  • 3 buttons, which the user will use to make their move.

If you get stuck, then you can see my implementation here - although I would recommend trying to figure it out by yourself first!

3) Add an event listener for the click event to each of the buttons | 30 min

Now that we have all the elements on the screen as expected, we want to start to add in some event listeners, so that we can write code that does something whenever one of our buttons gets clicked.

Use one of the JavaScript element selectors to select a list of the three buttons that we created on the screen.

Add a click event onto each of these buttons. Every time a button gets clicked, make a console log of the ID of the button that was pressed. As a sanity check, make sure that this is working as expected inside your browser.

When this is working, store this ID in a variable called playerMove (this will be a string of the move that the user played), which you can use in the next exercise.

Once again, here is my implementation.

4) Create a function which makes a random move for the computer | 45 min

As a next step, we want to generate a move for the computer when the button gets clicked. The code that we want to place in the event listener will probably get pretty messy, so for this step, I want you to create a function called randomMove(), which should give back a move from the computer.

The function should take no arguments. ⅓ of the time it should return “rock”, ⅓ of the time it should return “paper”, and ⅓ of the time it should return “scissors”.

Hint: you can use Math.random (from this week’s reading here) to do this.

Call this function inside of the event handler function, storing the result in a variable called computerMove. You’ll also want to update the picture on the screen to match the move that the computer made:

Image of final product

Hint: to get this to work, you might want to return an object instead of a text string from the randomMove() function. This could have properties for both the src and the alt text which you’ll need to update from the computer’s picture.

My solution here.

5) Create a function which simulates a game of Rock, Paper, Scissors | 45 min

Now that we have both a move from the player and the computer, the next step is to actually simulate a game of “rock, paper, scissors”! To do this, I again want you to create a function, so that the code inside of the event handler doesn’t get too long.

Create a function called playGame(), which will take 2 arguments - both strings of the move that 2 players played (i.e. “rock”, “paper”, or “scissors”).

The function should give back an output as follows:

  • If the moves are the same, then the game was a draw.
  • If one player played “rock” and the other player played “scissors”, then the player who played “rock” is the winner.
  • If one player played “paper” and the other player played “rock”, then the player who played “paper” is the winner.
  • If one player played “scissors” and the other player played “paper”, then the player who played “scissors” is the winner.

Feel free to use conditionals (if/else) or switch statements to do this.

In the end, I want you to return an object from the function with 2 properties - the winner of the game (player or computer), and some text that the computer will say (telling the user what the result was).

Finally, invoke this function inside the event handler function, passing in the moves from the player and the computer. You can store the object that this gives back in a variable called results.

Here’s what my code looks like after this step.

6) Update elements on the screen depending on the result | 25 min

We should now have our simulation running smoothly wherever the user clicks on one of the buttons. As a last step, I want you to make some updates to elements on the screen to reflect the result of playing the game.

  • Update the computer’s text to reflect the text that is returned from the playGame() function.
  • Update the scoreboard, adding 1 to either the player or the computer’s score, depending on who won.
  • If the player won, color the computer’s text in green. If the computer won, color the computer’s text in red. If the game was a draw, then color the computer’s text in black.

You can check out my final code here, and you can also see a working version of the game here.

7) Watch/read the following materials | 1 hour 4 mins

As a final step, here is a list of extra materials which might be interesting.