Skip to content

Jade-ZS/Rock-Paper-Scissors

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Rock-Paper-Scissors

Abstract:

This App allows user to play rock-paper-scissors with computer. Users can customize their own usernames and profile images, or use the default name and profile by clicking "continue as guest" button. Users can choose between classic game mode and difficult game mode, and easily switch between game modes by clicking the "change mode" button. The app will keep track of user's playing record. Refreshing the page will not erase user's data unless the user clicks on the "end game" button.

Installation Instructions:

Visit the deployed site or follow the following steps:

  1. Copy repository SSH link.
  2. Run git clone followed by the SSH link in your terminal.
  3. Move into the Rock-Paper-Scissors directory using the cd command in your terminal.
  4. Once in the Rock-Paper-Scissors directory, run open index.html and the app will appear in your browser!

Preview of App:

The user can choose to customize username and profile. customize avatar

The user can choose the difficulty level of the game. When the user choose to switch game mode, the app will alart the user and confirm the user's choice. The user can click the "end game" button to finish the game and erase the user record.

play and end game

Contributer:

Jade Shi

Context:

I finished this project independently during my fifth week in Turing's front end engineer program. Besides completing the required features of the project, I also added extended feature such as allowing user to upload their own profile image, alert user when user chooses to switch game mode, store game data to local storage and etc.

Learning Goals

  • Solidify and demonstrate understanding of:
    • DRY JavaScript
    • event delegation to handle similar event listeners
  • Understand the difference between the data model and how the data is displayed on the DOM
  • Use problem solving process to break down large problems, solve things step by step, and not to rely on an outside “answer” to a logical challenge

Wins + Challenges:

  • Wins: I gained experience in developing a game app independently from scratch.
  • Challenges: It was challenging for me to convert uploaded file to a data URL and display the uploaded image. I hadn't been taught how to handle files on web applications yet. I did extensive research and a lot of self-teaching.