Odin Project - Rock Paper Scissors

Table of contents

• Odin Project - Rock Paper Scissors
  • Table of contents
  • Overview
    • Screenshot
    • Links
  • My process
    • Built with
    • What I learned
      • 1. JavaScript Fundamentals
      • 2. Game Logic
      • 3. DOM Manipulation
      • 4. Event Listeners
      • 5. Score Tracking
      • 6.Basic UI and Styling (CSS)
    • Challenges
  • Author
  • Acknowledgments

Overview

Screenshot

Preview

Links

• Live Site URL: Live site URL

My process

Built with

• Semantic HTML5 markup
• Flexbox
• Mobile-first workflow
• JavaScript

What I learned

This project is part of The Odin Project curriculum. The goal was to build a simple Rock Paper Scissors game using JavaScript, HTML, and CSS.

1. JavaScript Fundamentals

• Variables (let, const)
• Data types (strings, numbers)
• Functions and return values
• Conditional logic (if, else if, else)
• The switch statement
• Comparison operators (===, >, <)
• Browser events

2. Game Logic

• Comparing player vs computer choices
• Determining win, lose, or draw
• Structuring reusable functions

3. DOM Manipulation

• Selecting elements (querySelector)
• Updating text content
• Handling button clicks

4. Event Listeners

• Making the game interactive
• Responding to user input (button clicks)

5. Score Tracking

• Keeping track of player and computer scores
• Updating UI dynamically

6.Basic UI and Styling (CSS)

• Layout using Flexbox
• Centering elements
• Styling buttons and text

Challenges

• Understanding event flow in JavaScript
• Making animations (like score increment effects)

Author

• Website - Azam Azis

Acknowledgments

Icons used in this project are provided by creators from Flaticon.

• rock.png
• paper.png
• scissors.png
• party-popper.png