https://github.com/timalexanderandersson/rock-paper-scissors-game

https://github.com/timalexanderandersson/rock-paper-scissors-game

Last synced: about 1 year ago
JSON representation

• Host: GitHub
• URL: https://github.com/timalexanderandersson/rock-paper-scissors-game
• Owner: Timalexanderandersson
• Created: 2024-04-25T15:58:42.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2024-06-10T14:14:48.000Z (about 2 years ago)
• Last Synced: 2024-06-10T17:59:14.049Z (about 2 years ago)
• Language: JavaScript
• Size: 604 KB
• Stars: 0
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Rock Paper and Scissors Game

   The Rock Paper and Scissors Game is Game made for the pure fun of playing one of the oldest hand games in the world, a real classic!                                 

  It's usually played agains another person but here you will play agains the random choices of the computer.   It's best of three points in the game.                                                     

  And it's made for all people in all ages to get to enjoy the game.

![alt text](assets/images/nyabildenresp.PNG)

* https://ui.dev/amiresponsive 

## Features

### Header

 ![headerin]()

 * On the top of the website you can find the header with the short text "lets go" and just under it says "Rock Paper And Scissors" on the website.

 - h1 and h2 text in the header so it's very visible text

 - you understand what the website is about when you enter it.

 ## Game Area 

 ![alt text](assets/images/nybildigen.PNG)

 ### Text in the game

 ![newaltern](assets/images/newalternative.PNG)

 * telling the player to choose one of the alternative down below.

 ![sameascomputer](assets/images/sameasthecomputer.PNG)

 * When the choice is exactly the same as the computer's choice this appears.

 ![you won](assets/images/nowyouwon.PNG)

  

  * Text (You Won!) Appears when you are winning.

  

  ![youlose](assets/images/regularlose.PNG)

  

  * Text (You Lose!) Appears when you lose.

  ![winnerhere](assets/images/youwon.PNG)

  * If you win the text (congratulations you won!) text appears. Play again Button for restart the game also appears.

  - 3 points for player and it is a win.

  ![loser](assets/images/youlooose.PNG)

  * If you lose (Sorry you lose!) appears. Play again Button for restart the game also appears.

  -  3 points for Computer and you lose.

  ![buttons]()

  * This shows the alternative options of buttons for the game Rock, Paper, Scissors.

  ![scoreshere](assets/images/scorehere.PNG)

  * Here is the score part. shows the player the amount of wins or loss they have.

  

![alt text](assets/images/gamerulesbutton.PNG)

* This is a button that will show the rules for the game when it is pressed.

![alt text](assets/images/reglerna.PNG)

* Here are the rules to the game, and the exit from the rules is in the right corner 

## Things left to implement to the website

* To change the pictures when computer or the player wins or lose. and switch out the buttons to hands instead. 

## Testing 

* The website is work on the web browsers Google Chrome and Firefox And Safari without problems.

* Everything Works on the webpage all the buttons, scores and the links.

## Lighthouse testing 

 ![testing lighthouse]()

 - accessibility in the Lighthouse testing was 100.

 

 ## HTML Validator

 ### tested in the official W3C Validator

 ![alt text](assets/images/onerrrorhtml.PNG)

 * one error problem was found in the official W3C validator.

 ### Solving

 * deleted the last img line from the HTML code and the problem was solved.

 ![htmlvalidator]()

 * No error was found in the official W3C Validator after the problem was solved.

 ## CSS Validator

 ### Tested with jigsaw validator

 ![jigsaw]()

 

 * There was no problem found in the official jigsaw validator for the code.

 ## JSHint Validator

 ![JShint](assets/images/jsvalidator.PNG)

 

 ![alt text](assets/images/jshint222.PNG)

 * In the JSHint validator it shows that it was missing semicolons and one warning.

 ### solving 

 * Clean up the code and added the missing Semicolons.

## bugs

 There are no bugs to fix.

## Unfixed bugs

There is no unfixed bugs to fix.

## Deployment 

* The Deployment was made to github 

![firstpage](assets/images/deployment.PNG)

* In the repository. clicked on the project to get to the settings.

![heresettings](assets/images/settings.PNG)

* In the repository on top of the page clicked settings.

![pages](assets/images/pages.PNG)

* In the settings site to the left on the page is pages in a dropdown menu you will find it on the bottom of the choices.

![mainhereis](assets/images/mainbransch.PNG)

* there is box with the "Deploy from a branch". clicked on the alternative Main and then saved it.

![intherespo](assets/images/itshererespo.PNG)

* In the repository after clicked on the project. there is on the right side on the webpage a title " Deployments" and under that is github-pages.

![Lastdeplyment](assets/images/Lasydeplyment.PNG) 

*  The deplyment is complete and the link is now working.

## Credits 

### Content on the website

* https://www.webstacknotes.com/java-script/dom-practical-exmaples For help with structure and eventlisteners.

* https://www.w3schools.com/howto/howto_js_toggle_hide_show.asp For hiding elements.

*  https://www.freecodecamp.org/news/javascript-refresh-page-how-to-reload-a-page-in-js/ for restart the page.

### Media

* https://favicon.io/favicon-converter/ for the favicon.

* https://coolors.co/ for the color on the website. (#DDDCCA)

* Paint for the drawing of Favicon.

* https://pixabay.com/vectors/fingers-fist-hands-paper-rock-149295/ for the picture on the website.