https://github.com/johnkeyscloud/rockpaperscissors
A simple game of Rock, Paper, Scissors built using HTML, CSS & JavaScript for The Odin Project.
https://github.com/johnkeyscloud/rockpaperscissors
css3 html5 javascript javascript-game rock-paper-scissors theodinproject
Last synced: 2 months ago
JSON representation
A simple game of Rock, Paper, Scissors built using HTML, CSS & JavaScript for The Odin Project.
- Host: GitHub
- URL: https://github.com/johnkeyscloud/rockpaperscissors
- Owner: JohnKeysCloud
- Created: 2022-10-02T21:36:48.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2023-01-03T01:01:56.000Z (over 3 years ago)
- Last Synced: 2023-03-04T16:52:29.432Z (over 3 years ago)
- Topics: css3, html5, javascript, javascript-game, rock-paper-scissors, theodinproject
- Language: CSS
- Homepage: https://johnkeyscloud.github.io/rockPaperScissors/
- Size: 1.63 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# rockPaperScissors
[
](https://johnkeyscloud.github.io/rockPaperScissors/)
A simple game of Rock, Paper, Scissors I designed and programmed using vanilla HTML, CSS & JavaScript for The Odin Project.
### Notes
I had a lot of fun writing this… though there was this one point in time I was *exhausted* and wanted to finish writing a particular **forEach()** function in the script but my brain woudn't allow me to. I spent over an hour messing with code, erasing eveything and starting over a few times. My mind went blank and everything else I had written looked foreign to me lol; However, instead of taking a nap… I said no! I made some **ocha** (green tea in Japanese) and stood outside in 34 degree NYC weather in a t-shirt for a few minutes, came back, and fortunately figured it out pretty quickly. The gratification was worth it, at last, I took a break 💔! It's my favorite code snippet from the project (see below 😅). The snippet determines which animation to run depending on whether or not the player *and* bot made the same choice in the round of the game. If any round results in a tie, the image of the computers choice is translated a few pixels upwards, rotated 360deg, then is translated back down. Otherwise the image would just be rotated, sin translation.
Anyway… I hope you like it lol, k thanks bye ✌🏽
### - ツkc💭
## Tools
* VS Code
* Git & Github
* HTML5
* CSS3
* JavaScript ES6
* Terminal
## Summary
* Used HTML5 **semantic elements** for better readability, structure & accessibility.
* Used CSS3 **Flexbox** & **Grid** to create a dynamic layout without the use of media queries in combination with various CSS functions such as **clamp()** for responsive text.
* Used **Git** & **GitHub** for source control/project management.
* **Cross tested** design and functionality on desktop & mobile browsers.
## cloudySnippets💭
