Rock Paper Scissors , Traditionally a Hand Game which is played by 2 people. This Game is often used by 2 persons to make a decision when there are conflicting opinions. Similar to flipping to coin , a decision can easily and quickly be decided. This website was created to allow user to have online access to the Rock Paper Scissors game. Access to the game can viewed here. Live Website Here.

1. Rules of the Game
2. User Goals
3. User Expectations
4. Features
   1. Existing Features
   2. Future Features
5. How the game is Played
6. Testing
   1. Manual Testing
   2. Validator Testing
   3. Solved Bugs
7. Deployment
8. Credits
   1. Technologies Used
   2. Content
   3. Media

Go to the top

The players count aloud to three, or speak the name of the game (e.g. "Rock! Paper! Scissors!"), either raising one hand in a fist and swinging it down with each syllable or holding it behind their back.
They then "throw" by extending it towards their opponent.
Variations include a version where players throw immediately on the third count (thus throwing on the count of "Scissors!"), or a version where they shake their hands three times before "throwing".

Go to the top

Go to the top

The Game is designed considering the expectation of users to be simple and easy to use and nagivate.

• The user interface is easy to navigate. Upon opening the page , there are clear instruction on how to play the game.
• The Game generates a random computer choice each time the user selects a button.
• The Game has a scoreboard which is clearly visible and easy to follow.
• The Game can be won or lost.
• The game can be restarted during playing or after the game is over.
• Responsive design for all screen/device sizes like mobile, tablet and desktop.

Go to the top

• Colour Scheme

The Font colours used are also #24C6DC , #514A9D , White and Black are also used.

A (Green) colour is applied to the background when the user wins.

A (Red) colour is applied to the background when the computer wins.

• Logo

The 2 main colours used in the logo are #24C6DC, #514A9D.

This also indicates to the user what the game being played is.

• The Main Game Area

The 2 main colours #24C6DC, #514A9D are used in the user and computer score , and buttons.

• Game Rules

• Restart Button

During Playing, the user can restart the game by selecting the restart button.

Go to the top

The user starts be selecting one of the 3 options (Rock, Paper or Scissors).
Once the user selection is made, the JavaScript code generates a random option for the computer choice , compares the user and computer choice , and increments the score by 1 , depending on the winner.
A message appears under the buttons after each score which clearly states the user choice and computer choice , and a result messages

• Once the user or computer reaches a score of 5 , the game is over , a winning or loosing message is displayed onscreen, and there is an option to play again by selecting the play again button
  

Go to the top

• Testing was completed on the following browsers.
  Google Chrome
  Microsoft Edge
  Firefox
  Safari

• Lighthouse in Dev Tools was run on this webpage to check accessibility and performance.
  

• HTML

No Errors found when passing HTML through the Official W3C Validator

• CSS

No Errors found when passing CSS through the Official Jigsaw Validator

• JavaScript

https://jshint.com/ was used to validate JavaScript Code. No Errors Found.

During Testing , I could not solve an issue regarding incrementing the user/computer score.

After Hours of Research I discovered that I was not using the ''parseInt'' function which converts a string into a number.

parseInt(document.getElementById("computer-score").innerText);

I discovered missing semicolon in several lines of javascript code which was solved after validation with Jshint.

There are no remaining unfixed bugs

Go to the top

Deployment of the site to GitHub Pages was done as follows:

1. Login to my GitHub account
   
2. Open the project repo
   
3. Select the 'Settings' tab
   
4. On the left-hand-side menu select the Pages option
   
5. Select the main branch as the source, then click the Save button
   
6. A message will confirm that the site has been published at https://YOUR-GITHUB-NAME.github.io/REPO-NAME/
   
7. Test that the site has successfully gone live by clicking on the link

Go to the top

• HTML5 was used for the HTML site markup
• CSS3 was used to style the HTML content
• Am I Responsive was used to test the responsiveness of the site
• Font Awesome was used for the site icons / social icons
• Google Fonts provided the fonts used on the site
• Google Chrome Developer tools was used to test site responsiveness and to test code
• Github was used as the repository hosting service
• Gitpod was used as the Code Editor for the site
• Animate was used for the animation
• W3C Markup and Jigsaw validation were used to validate the HTML and CSS used
• Online JavaScript Validator was used for JavaScript validation.
• Background Colour Generator was used for Main Background Colour.

The Code used in this website was written by the developer. The Code institute , YouTube and W3 Schools were used a guides.

The Animation for the Navbar and Social links was take from Animate
The Main Logo was created using Logo Design