This is a website made from html, css and javascript. It is a game from the tv show The Big Bang Theory called rock paper scissor lizzard spock.

The game can be visted here. https://thedknight.github.io/portfolio.project.2/

• As a user, I want to…

1. be able to navigate the website easily.
2. be able to play the game verus the computer and keep scores.
3. be able to play with out having an errors.

• As a site owner, I want…

1. the information to be clear and informative.
2. the information to be sufficiently various for all users.
3. the website be simple to navigate.

• Project Purpose
  • To provide a simple interface to allow users to easily play the game.
  • To allow scores to be kept so the user knows how many times it won.

• I wanted a simple, straightforward UX experience.
• As the game is based on running javascript i wanted the ux to be easy and clear desgin

• A clear layout is in place to ensure users can immediately find all the information with a header telling the user to select a card
• Once a user selects a card there card and the result and the computers card will appear.
• A score box will also appear to allow the user to keep score.

This is the wireframe i created of the project. A simple version of the game that allows the user to select a card and the computer will pick a card and the result will be shown of the user.

• Colours
  • The two main colors used for the css were. #9cc3d5ff For the background and #0063B2FF for the game area.

• Font Selection
  • The font used was "Raleway" with sans-serif as backup.

• The header .
  • The header just has the name of the game in the heading area.
• Game Area
  • The game area holds the main part of the game, it holds all the playing cards at the bottom of the box.
  • After the user has selected a card it will display the users selection and also the computer selection and and who the winner is logs the result for either the user or computer.

• HTML

Passing the HTML from all templates and base into the W3C Markup Validator no errors have been found W3C validator. Code Validation results:

• CSS

No errors were found when passing through the official W3C validator.

• Javascript

No errors were found when passing through the official JShint validator.

• Desktop

Mozilla Firefox, Google Chrome, Microsoft Edge: everything is working good. Page loads and all of the page features are working.

• Mobile

Tested with iPhone 11. It is responsive as intended.

• Chrome Dev Tools Tested on different phone and tablet sizes using chrome dev tools and all working as intended.

• I have found while testing there is a bug that happens sometimes where when the user selects there card there is no card selected but if you press the card or another card the program wil work as intended.
• There doesnt seem to be any pattern to the bug as when it happens it can be any card seletion or any computer selection.
• Screenshots shown as below from what the user sees and what the console sees.

The website was deployed to GitHub pages.

• The steps to deploy are as follows:

• In the GitHub repository, navigate to the Settings tab;
• From the source section drop-down menu, select the Master Branch;
• Once the master branch has been selected, the page will be automatically refreshed with a detailed ribbon display to indicate the successful deployment. The live link can be found here.

I looked over some other projects in stackover flow to get a jist of how other people created there projects.

• Favicon generator – Used to create favicon used on website.
• Favicon Logo From this site.
• W3 Schools - Looking up
• "Love Maths" footer code - Body and game box css adapted from this code.