(Mario Castaldo)

View the deployed website.

1. Project Goals
2. User Experience
   1. User stories
   2. Design
   3. Wireframes
3. Features
4. Technologies Used
   1. Languages
   2. Frameworks & Tools
5. Testing
   1. HTML Validation
   2. CSS Validation
   3. JavaScript Validation
   4. Accessibility
   5. Performance
   6. Device testing
   7. Browser compatibility
   8. Testing user stories
6. Bugs
7. Deployment
8. Credits
   1. Code
   2. Acknowledgements

• I want users to be able to play an enjoyable game.
• I want users to return to the website to continue playing the game.

• Learn the rules of the game.
• Play a game that is enjoyable and challenging.
• Play a game that encourages the user to return to the game after the first play through.
• Play a game that has the objective to Win.

The user experience is structured around three main goals: (a) to allow users to learn the game, (b) interaction with the game (c) encourage users to return and play through again.

I have divided my user stories into two categories: first-time users and regular visitors, with the understanding that one of the key goals of the website is to encourage replayability of the game.

1. As a first-time user, I want to see the name of the game.
2. As a first-time user, I want to understand the scope of the game.
3. As a first-time user, I want to understand the rules of the game.
4. As a first-time user, I want to be able to play the game across all personal devices.
5. As a first-time user, I want to be able to see the choices made by me and the computer.
6. As a first-time user, I want to keep track of my score to monitor my performance in the game.
7. As a first-time user, I want to see the result of the "battle" between me and the computer at the end of the game.

8. As a regular visitor, I want to see the result og the "battle" between me and the computer.
9. As a regular visitor, I want to see the difference in score between me and the computer.

10. As a site owner, I want users to be able to understand the scope of the game.
11. As a site owner, I want users to be able to understand the rules of the game.
12. As a site owner, I want users to be able to play and navigate the page easily so that users are more likely to have an enjoyable experience and return to the game.
13. As a site owner, I want users to enjoy this version of the game from the serie Big Bang Theory.

My overall approach to the design came from a desire to create a game that was fun, engaging and simple to understand.

I chose to use a shade of green and a shade of red as the primary scheme to bring to the user's mind connotations of nature and challenge. I chose shades of orange,blue and gray for the user and computer choice,the scores and the result to be able to draw particular attention when those values changes.

My body font is Fredoka One from Google Fonts. I chose this font because is aesthetically pleasing. Fredoka One is a big, round, bold font that is perfect for adding a little fun to games.

I chose not to use photography on the website and adopted a cartoonish style instead. I did this to keep a consistent style across the website and promote a tone that was fun and engaging, particularly for children.

I found all the images on Google.

The game page contains 8 main sections:

1. A header displaying the name of the game.
2. Scope of the game.
3. A button to direct the user to the rules of the game.
4. The buttons to play the game.
5. User and Computer choices showing when pressing a button.
6. The result calculated between the user and computer choices.
7. The User and the Computer score.
8. The Rules of the game.

This header is used to communicate to users the name of the game and what type of game it is.

User stories covered by this feature:

1. As a first-time user, I want to see the name of the game.

This feature is used to communicate to users the end goal of the game.

User stories covered by this feature:

2. As a first-time user, I want to understand the scope of the game.
3. As a site owner, I want users to be able to understand the scope of the game.

This button is used for user to navigate to the rules if the do not know the different combinations of the game.

User stories covered by this feature:

3. As a first-time user, I want to understand the rules of the game.
4. As a site owner, I want users to be able to understand the rules of the game.

This buttons are the "weapons" the users will choose to start their game agains the computer.

User stories covered by this feature:

4. As a first-time user, I want to be able to play the game across all personal devices.
5. As a site owner, I want users to be able to play and navigate the page easily so that users are more likely to have an enjoyable experience and return to the game.

This feature is used to display to users which "weapon" they and the computer have chosen.

User stories covered by this feature:

5. As a first-time user, I want to be able to see the choices made by me and the computer.

This feature is used to dispaly to users the result of the "battle" between them and the computer, declering if they have won or lost that round.

User stories covered by this feature:

7. As a first-time user, I want to see the result of the "battle" between me and the computer at the end of the game.
8. As a regular visitor, I want to see the result of the "battle" between me and the computer.

This feature is used to display the User and Computer score until the end of the game, it will also display the tie score when the user and the computer will choose the same "weapon".

User stories covered by this feature:

6. As a first-time user, I want to keep track of my score to monitor my performance in the game.
7. As a regular visitor, I want to see the difference in score between me and the computer.

This feature is used to show, especially to new users, the rules of the game.

User stories covered by this feature:

3. As a first-time user, I want to understand the rules of the game.
4. As a site owner, I want users to be able to understand the rules of the game.

Wireframes:

Balsamiq Wireframes

• Laptop

• Tablet

• Mobile phone

• HTML5
• CSS3
• Javascript

1. GitHub

• GitHub was used as a remote repository to store project code.

2. Font Awesome

• Icons from Font Awesome were used throughout the site.

3. Google Fonts

• Fendoka One from Google Fonts were used as the main heading font throughout the site.

4. Am I Responsive

• Am I Responsive was used to create the multi-device mock-up you see at the start of this README.md file.

5. Faivcon Generator

• Favicon Generator was used to create a favicon for the website.

The W3C Markup Validation Service was used to validate the HTML of the website. All pages passed with 0 errors.

The W3C CSS Validation Service was used to validate the CSS of the website. Style.css passed with 0 errors.

The JSHint was used to validate the JavaScript of the website. All scripts passed with 0 errors and 0 warnings.

The [WAVE WebAIM web accessibility evaluation tool] was used to ensure the website met high accessibility standards.

The website passes with 0 errors.

Google Lighthouse was used to measure the performance and speed of the website. The page passed with 94% score on performance, 100% on accessibility, 92% Best Practice and 100% on SEO.

Lighthouse

• MacBook Air
• Iphone 7
• Iphone 13 Pro
• Samsung S 22

• Microsoft Edge: Website and user stories work as expected.
• Google Chrome: Website and user stories work as expected.
• Safari: Website and user stories work as expected.
• Firefox: Website and user stories work as expected.

1. As a first-time user, I want to see the name of the game.

2. As a first-time user, I want to understand the scope of the game.

3. As a first-time user, I want to understand the rules of the game.

4. As a first-time user, I want to be able to play the game across all personal devices.

5. As a first-time user, I want to be able to see the choices made by me and the computer.

6. As a first-time user, I want to keep track of my score to monitor my performance in the game.

7. As a first-time user, I want to see the result og the "battle" between me and the computer at the end of the game.

8. As a regular visitor, I want to see the result og the "battle" between me and the computer.

9. As a regular visitor, I want to see the difference in score between me and the computer.

10. As a site owner, I want users to be able to understand the scope of the game.

11. As a site owner, I want users to be able to understand the rules of the game.

12. As a site owner, I want users to be able to play and navigate the page easily so that users are more likely to have an enjoyable experience and return to the game.

No Bugs were found in the game.

This website has been deployed using GitHub pages. To do the same...

1. Log into your GitHub account and find the repository.
2. Click on 'Settings' in the repository.
3. Click 'Pages' in the left-hand menu once you're in Settings.
4. Go to 'Branch'.
5. Click on the button that says 'none', then select 'main'.
6. Wait for page to refresh automatically.
7. On the top of GitHub pages you can now find a link to the published live website.

By forking this GitHub repository you are making a copy of the original to view or make changes without affecting the original. You can do this by following these steps...

1. Log into your GitHub account and find the repository.
2. Click 'Fork' (third button on the top right of the repository page).
3. You will then have a copy of the repository in your own GitHub account.

1. Log into your GitHub account and find the repository.
2. Click on the 'Code' button (next to 'Add file').
3. To clone the repository using HTTPS, under clone with HTTPS, copy the link.
4. Then open Git Bash.
5. Change the current working directory to where you want the cloned directory to be made.
6. In your IDE's terminal type 'git clone' followed by the URL you copied.
7. Press Enter.
8. Your local clone will now be made.

• Anya Kubóv - From YouTube3 ways to code Rock Paper Scissors in JavaScript (Beginner to Intermediate to Advanced!). It gave me a good hint from where to start. particularly on the code for the function generateComputerChoice() and the function displayResult().
• Stack Overflow - from StackOverflow for the code to end and reset the game. Line 160 of JavaScript
• Student Support - For the "rough" codes they would give me in order to give me a base where to start to write my codes.
• W3 Schools - From W3 Schools for the hints about different line of codes.

• To my girlfriend for the support,help with the daily tasks and feedback.
• To my friends for testing, playing and giving me feedback about the game.
• To my mentor Mo Shami for his feedback, advice and support.
• To the Code Institute Tutor Support for their helpful advice, resources, guidance and support.