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:
Tools:
☑️
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
-
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.
-
How to use event listeners to show and hide containers based on user behavior (e.g. click)
-
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.