View the live project here

1. Introduction
2. UX
   1. Ideal User Demographic
   2. User Stories
   3. Development Planes
   4. Design
3. Features
   1. Design Features
   2. Existing Features
   3. Features to Implement in the future
4. Issues and Bugs
5. Technologies Used
   1. Main Languages Used
   2. Frameworks, Libraries & Programs Used
6. Testing
7. Deployment
   1. Deploying on GitHub Pages
8. Credits
   1. Content
   2. Media
   3. Code
9. Acknowledgements

Rock, Paper, Scissors, Lizard, Spock is a game of chance that expands. It is first used to settle a dispute about what to watch on TV between Sheldon and Raj in "The Lizard-Spock Expansion".

It is mentioned again in "The Rothman Disintegration", where Sheldon explains the rules to Penny and Barry Kripke.

The game was originally created by Sam Kass with Karen Bryla. According to an interview with Kass, the series producers did not originally ask for permission to use the game, but Kass was officially referenced by Sheldon as the creator of the game during the "The Rothman Disintegration", after which he states, "Hail Sam Kass!" to which Leonard, Howard, Raj, and Sheldon all then chant "Hail!" while raising their hands.

This is the second of four Milestone Projects that the developer must complete during their Full Stack Web Development Program at The Code Institute.

The main requirements for this project were to make a responsive and static website with a minimum of three pages using primarily HTML5, CSS3 and Javascript.

Back to top ⇧

• External users
• Site owner

• The site’s users want to play an online game that has elements of chance.

• The site’s goal is to provide a challenging game to entertain online users.

Broken into three categories, the website will focus on the following functions:

• Game Area

• Controllers

• Score Area

The website needs to enable the user to:

• Play the game:
  • Select a gesture
  • Restart the game
  • Tally points
  • Read Rules

The website needs to enable the computer to:

• Respond when the user selects a gesture
• To check if the computer answer wins vs. the player
• Tally up the points

To clearly identify what needed to be done according to the strategy above, I defined what content and functionality needed to be on the website:

• Content Requirements

  • Game area defined where the output of the user and computer answer will be displayed
  • Controller area to enable user to select gesture
  • Area to keep score
  • Restart button to reset points
  • Rules button with explicit definition of game

• Functionality Requirements

  • Trigger to game start
  • Trigger for computer to start "thinking" of their answer
  • Verification of winState
  • Incrementing scores
  • Restart functionality

I opted in for a simple one page design split out into three sections:

1. Game Area
2. Controllers
3. Score area

Wireframe mockups were created in Balsamiq with the aim to be straightforward and modern in design:

• Landing page

The main colours used throughout the website are a mixture of White and Blue as well as variety of colors for the buttons.

I chose these colors as they are bright and warm. Visually pleasing and simple

The pairing of the fonts Roboto is used throughout the website with Sans Serif as the fallback font in case of import failure.

The hands used were found on another developers website

Back to top ⇧

• Computer Answer has a recursion in order to show that the computer is "thinking"
• Restart gives the user the ability to reset scores
• imagery for user/computer response & classList Add and remove "hidden" class to imagery to make the output more pleasing

• High Score
  • Feature - potentially adding a local storage high score section
  • Reason for not featuring in this release - Didn't see the use case here being something interesting for the player after doing some testing with friends and family

Back to top ⇧

I ran into various issues during the development of the website. Please find below the noteworthy ones as well as the solutions/ideas that I came up with:

spinAnswer - Challenging to find out the best way to showcase the computer thinking - it came down to using a recursion where the spinAnswer function calls itself until enough time has passed.

classList.remove/add - Challenged by the add/remove of classes in order to ensure user experience was flawless throughout gameplay. It took me a few times to get a good grasp of the .forEach to ensure images (hands) were displayed & removed at the right time.

Back to top ⇧

• HTML5
• CSS3
• Javascript

• Bootstrap
  • Bootstrap was used to implement the responsiveness of the site, using bootstrap classes.
• Google Fonts
  • Google fonts was used to import the fonts "Roboto", "Lato" and "Montserrat" into the style.css file. These fonts were used throughout the project.
• Font Awesome
  • Font Awesome was used on all pages throughout the website to import icons (e.g. social media icons) for UX purposes.
• Git
  • Git was used for version control by utilizing the GitPod terminal to commit to Git and push to GitHub.
• GitHub
  • GitHub was used to store the project after pushing
• balsamiq
  • Figma was used to create the wireframes during the design phase of the project.
• Am I Responsive?
  • Am I Responsive was used in order to see responsive design throughout the process and to generate mockup imagery to be used.

Back to top ⇧

Industry standard Validator results:

• W3C HTML Validator - Results -
• W3C CSS Validator - Results

I have also run Lighthouse test, see below results:

Only bug at this time is related to media queries and will be addressed shortly. Otherwise the bugs I ran into were related to DOM .add/.remove "hidden" classes, but they have been solved.

This project was developed using Gitpod, committed to git and pushed to GitHub using their browser terminal.

To deploy this page to GitHub Pages from its GitHub repository, the following steps were taken:

1. Log into GitHub or create an account.
2. Locate the GitHub Repository.
3. At the top of the repository, select Settings from the menu items.
4. Scroll down the Settings page to the "GitHub Pages" section.
5. Under "Source" click the drop-down menu labelled "None" and select "Master Branch".
6. Upon selection, the page will automatically refresh meaning that the website is now deployed.
7. Scroll back down to the "GitHub Pages" section to retrieve the deployed link.
8. At the time of submitting this Milestone project the Development Branch and Master Branch are identical.

Back to top ⇧

• The structure of the README was inspired by Kryan Live
• The inspiration to make the skills bar comes from Veera Sundar

I consulted multiple sites in order to better understand the code I was trying to implement. The following sites were used on a more regular basis:

• Stack Overflow
• W3Schools
• Bootstrap
• StackEdit

Back to top ⇧

• I would like to thank my mentors Antonio for their valuable feedback and critic during the process of design and development.
• I would like to thank Code Institute for giving me a little extra time to finish this module!
• I would like to thank my friends from Brewchachos who have tested and shared great feedback throughout the process.

Back to top ⇧