iamnickvolpe / rockpaperscissors Goto Github PK

This project forked from itscodenation/flw1-rps-20-21-starter

0.0 1.0 0.0 52 KB

HTML 74.77% JavaScript 19.30% CSS 5.93%

rockpaperscissors's Introduction

Rock Paper Scissors Project

Browser preview command: python3 -m http.server 3000

Overview:

In this unit, coders will create a Rock, Paper, Scissors game. The Rock, Paper, Scissors game will take user choice, generate a computer choice, and display the winner to the screen. To create this project, coders will use jQuery to take user input and display data, the Math Library to generate a random choice, and conditionals to determine the winner.

Day 1

Planning

Complete the project planning document.

Set-Up

Go to the repository at https://github.com/itscodenation/rockpaperscissors
Fork this repository to your Github account and pull it down to Gitpod
Add, commit, and push your changes
Make your site live on gh-pages

JavaScript

Add a click handler that displays the value of the input within a div

HTML and CSS

Add any more HTML elements you will need to the page
Customize your HTML with CSS

Wrap

Push your changes!
Save and submit your website using the link on the session agenda.

Day 2

Javascript

Outside of your click handler, declare the variables you'll need to track the user choice, computer choice and winner and assign them values of empty strings.
Outside of your click handler, declare a randomNumber variable and set it equal to 0
In your click handler, generate a random number and assign it to the randomNumber variable
In your click handler, store the input value in a variable
In your click handler, display user input to the screen

Wrap

Push your changes!

Day 3

JavaScript

Write a conditional statement which, given the number range of randomNumber, assigns ‘rock’, ‘paper’ or ‘scissors’ to the computer choice variable
Display the computer choice to the screen
Write a statement that compares the userChoice to the computerChoice to determine the winner of the game
Display the winner to the screen in a div
Clear the input value once a result is displayed

Wrap

Push your changes!

Projects Extensions:

Style the page to fit your personality
Validates input so that it will return “Not valid input” if the user types in a wrong choice.
Accepts any form of a word regardless of capitalization (i.e. “Rock” “rock” roCk”)
Keeps track of total wins and losses, until the page refreshes.
Create a game with more variety in throwing options. Example: Rock-Paper-Scissors-Lizard-Spock