• Table of Contents
• Project 2 - Javascript - Roshambo - Rock, Paper, Scissors Game
• UX
  • Strategy
  • Scope
  • Structure
  • Skeleton
  • Surface
• Features
• Technologies Used
• Testing
• Deployment
• Credits

This interactive front-end website responds to the users' actions, allowing them to play the game of "Rock, Paper, Scissors" with the computer.

( This is as a milestone project for the Javascript module of the Full Stack Web Development Course at Code Institute. )

To access live demo, click here.

User's expectations:

• The website shall allow anyone to play the game of "Rock, Paper, Scissors".

Target Users:

• Anyone who wishes to play the game of "Rock, Paper, Scissors".

User Stories:

• As a visitor of the website, I want to play the game of "Rock, Paper, Scissors".

• Three buttons - one denoting a rock, one denoting a piece of paper and one denoting a pair of scissors
• Area showing the choice made by the computer
• Area showing the score between the player and the computer
• A buttonn allowing the player to reset the score

• Buttons allowing the player to make a choice between a rock, a piece of paper and a pair of scissors
• A button allowing the player to reset the score

• The buttons allowing the player to choose between Rock, Paper and Scissors highlight the players choice, invoke computers choice and update the score.

• The reset button resets the score.

• All content presented on a single page, clearly visible to the user.

• No navigation required

• Page layout is the same on all screen sizes

• Top Bar with the title of the game on top of the page

• Three buttons allowing the user to choose between (Rock, Paper, Scissors) options

• Area showing the score between the player and the computer

• Area showing computers choice

• Reset button allowing the player to reset the score

Wireframes for the project can be found here.

• Colours - Colours chosen so as to make all elements cleerly visible and grouped intuitively
• Typography - Henny Penny font by Brownfox Principal design from Google Fonts
• Elements/sections from top to bottom, left to right: Top Bar witht the title, three buttons for the players choise (Rock, Paper, Scissors), area showing the score, area showing the computers choice, reset button.

• The buttons allowing the player to choose between Rock, Paper and Scissors highlight the players choice, invoke computers choice and update the score.

• The reset button resets the score.

• Optional animations to make the game more entertaining

• [HTML]
• [CSS]
• [Javascript]
• [Bootstrap]

Manual Testing Implemented:

• Continuous testing with Chrome Development Tools during development:

  • Reviewing the look and "feel" of the web page
  • Testing responsiveness to changes in screen size

• Testing that all features work properly (on all screen sizes):

  • The buttons allowing the player to choose between Rock, Paper and Scissors upon being clicked on invoke computers choice and update the score.
  • The score is updated after each round.
  • The reset button resets the score.

• All text and elements are readible/visible on mobile, tablet and desktop screens and not obscured by colors.

Official W3C validator services have been used to check the validity of the code - HTML, CSS.

Esprima and JSHInt have been used to check the validity of the Javascript code.

Goals of the user presented earlier in the User Stories section of this README can be achieved by clicking on the interactive elements of the page.

• Tested using Google Mobile Friendly Test - result: Mobile Friendly
• Tested using Webpagetest

The project is hosted on GitHub Pages. The repository can be found here. It is deployed from master branch the following way:

1. In the GitHub repository select Settings.
2. In the GitHub Pages section select main as a Source and save.

To run locally, type: git clone https://[email protected]:Cezary-Nakielski/Project-Two-Roshambo.git into your IDE terminal.

• I received inspiration for this project from lessons and materials provided by Code Institute, as well as my mentor and other students.

• Google Fonts

  • The project uses fonts provided by Google Fonts.

• Font Awesome

  • The project uses icons provided by Font Awasome.

• sweetalert2

  • The project uses code for alerts provided by sweetalert2.

• Information and ideas used in building this website were obtained from:

  • www.w3schools.com/
  • www.stackoverflow.com
  • www.developer.mozilla.org

• w3c Validator services:

  • HTML
  • CSS

• Javascript validator:

  • Esprima
  • JSHint

• This website was made for educational purposes