Rock, Paper, Scissors v2

This is Rock, Paper, Scissors, a game that never gets old! Now with a graphical interface.

Live Preview

This project is hosted on GitHub Pages. Feel free to try it out!

Motivation and Goals

This project is designed as part of The Odin Project's wonderful Web Development curriculum.

• Refactor logic to accommodate for v2 GUI.
• Implement with the DOM API.
• Implement buttons.
• Implement shadows and transition effects.
• Implement score and round output.
• Implement result output in plain English.
• Implement restart.
• Implement header and footer.
• Make it pretty!

Limitations

• None, as all the requirements of this project were met.

Resources

Below are a collection of resources which helped improve my skills ✨ while building the project:

Console Version (v1)

• javascript - Why is console.log() considered better than alert()? - Stack Overflow
• javascript - Function that randomly returns one of three options, where all options have the exact same chance? - Stack Overflow
• Loops: while and for
• javascript - How do I call a function inside of another function? - Stack Overflow
• JavaScript Functions
• What does return do in JavaScript? The return keyword explained
• JavaScript Arrays

GUI Version (v2)

This array article has better examples compared to w3s':

• Array - JavaScript | MDN
• Template literals (Template strings) - JavaScript | MDN
• typescript - Cannot redeclare block scoped variable - Stack Overflow
• HTML DOM Document querySelector() Method
• HTML DOM Document addEventListener() Method
• Location reload() Method
• Arrow functions, the basics
• How To Animate Buttons With CSS
• How To Create a Fixed Footer
• How to Remove a Commit From Github
• Can you set a border opacity in CSS? - Stack Overflow
• CSS Borders
• How to keep your footer where it belongs ?
• Two Ways to Create a CSS Frosted Glass Effect

Non-Technical

• word choice - Difference between "choose" and "select" - English Language & Usage Stack Exchange

Built with ❤️ to The Odin Project ~