Rock, Paper, Scissors

Table of Contents

Overview and Project Goals

The goal of this final solo project of Mod1 at Turing School of Software and Design was to build a Rock, Paper, Scissors game from scratch using HTML, CSS, and Vanilla Javascript.

Why was this project created?

To solidify and demonstrate the understanding of:

  1. Writing clean and DRY HTML, CSS, and JavaScript
  2. The difference between the data model and how the data is displayed on the DOM
  3. The interaction between multiple class files
  4. Implementation of client-side data persistence by utilizing JSON and localStorage

Features

  • When the game loads, the user will see a left section displaying their emoji and wins and a right section displaying the computer emoji and wins. The main section directs the user to Choose Your Game and displays a Classic version and a Magic version. Landing Page

  • Based on the user's game choice, 3 or 4 icons will appear on the screen. Rock, Paper, Scissors for Classic. Spell, Voodoo Doll, Crystals, Witch for Magic. Choose Fighter

  • The user may hover over their selection and click to choose their fighter. The computer will then make it's choice and both fighters will be displayed. The game will result in either a player1 win, computer win, or draw. The respective wins will be displayed on the right and left sections. Wins Displayed

  • User has the option to change the game version at any time and their wins will not reset. They may also leave the page and return to see that their wins are still displayed... a never-ending game of Rock, Paper, Scissors! Upon refresh

Future Additions

  • New game functionality to reset the wins and start a new game
  • Choose your emoji functionality to toggle through Player1 emojis
  • Light & dark mode to alter the game board based on the user's Classic or Magic game choice

Back to top

Instructions for Running Project

View the deployed page here OR

  1. Clone this repository
  2. cd into the repository in your terminal
  3. open index.html in your terminal to view it on your browser

Want to contribute?

If you would like to contribute, please fork this repository and clone it down to your local machine. Once you've successfully implemented the changes in code necessary for your intended contribution without changing any of the current functionality of main, submit a pull request for author to review the changes.

Technologies Used

javascript html5 CSS3 Github

Credits

Author

  • Rachael Carroll wrote the HTML, CSS, and Javascript for Rock, Paper, Scissors for her final solo project of Mod1

Project Manager

Magic Themed Icon Artist


Back to top