The Odin Project - Rock-Paper-Scissors

Instructions

https://www.theodinproject.com/lessons/foundations-revisiting-rock-paper-scissors

Purpose

To build a web version of the classic game "Rock Paper Scissors" as a means to practice HTML DOM manipulation with JavaScript.

Preview

Technologies:

• JavaScript
• HTML
• CSS

Tools:

• Git
• Github

Outcome ☑️

I created a Rock Paper Scissors game with a custom GUI and a fun pop culture theme. I used JavaScript to take an input (Rock, Flag, or Eagle) and output the round winner vs a randomized computer player.

Website	Link
GitHub demo	https://jaredbradley243.github.io/The-Odin-Project---Rock-Paper-Scissors/

Summary

What I learned

1. How to do the following with JavaScript to manipulate the HTML DOM:
   

   • Create a new HTML element and save it to memory.
   • Place an element into the DOM.
   • Remove an element from the DOM.
   • Add inline style to an element.
   • Edit attribute(s) of an element.
   • Add a class to an element.
   • Remove a class from an element.
   • Toggle a class of an element.
   • Add text content to an element.
   • Add HTML content to an element.

2. How to use event listeners to show and hide containers based on user behavior (e.g. click)

3. Further practice using event handlers and event listeners after using them for the first time during the JavaScript Drum Kit Project.

Customizations

• Every aspect of this project was custom, from the game theme to the GUI design.

What could be improved

• The layout of the game could improve significantly. Currently, it is not responsive and works only on desktop. Since completing this project I have learned how to properly utilize CSS Flexbox, and would like to redesign the layout to support additional devices.
• The game continues indefinitely with the score resetting after 5 rounds. For an improved user experience, a hard 5-round limit could be implemented, after which the user would be prompted to play again.