DEV Community

Cover image for Rock, Paper, Scissors (with JavaScript)
TD!
TD!

Posted on

3

Rock, Paper, Scissors (with JavaScript)

This project is perfect for intermediate learners because it blends HTML, CSS, and JavaScript to create a complete, functional game.


πŸ“‚ File Structure

rock-paper-scissors/
β”‚-- index.html    ← HTML structure
β”‚-- styles.css    ← CSS styling
β””-- script.js     ← JavaScript functionality
Enter fullscreen mode Exit fullscreen mode

πŸ› οΈ How to Run the Project

  1. Create the Files:

    • Create a folder called rock-paper-scissors.
    • Inside this folder, create three files: index.html, styles.css, and script.js.
  2. Copy the Code:

    • Paste the HTML, CSS, and JavaScript code into the respective files.
  3. Open the HTML File:

    • Open index.html in your browser to play the game.

🌟 How the Game Works

  1. Select a Choice:

    • Click on one of the buttons: Rock πŸͺ¨, Paper πŸ“„, or Scissors βœ‚οΈ.
  2. Computer's Choice:

    • The computer randomly selects Rock, Paper, or Scissors.
  3. Display the Results:

    • The game shows your choice, the computer's choice, and who wins.
  4. Play Again:

    • Click the "Play Again" button to reset the game.

🧠 Key Concepts for Learning

JavaScript Concepts

  1. Event Listeners:

    • Use of addEventListener to handle button clicks.
  2. Random Number Generation:

    • Math.random() to generate a random choice for the computer.
  3. Conditionals:

    • if-else statements to determine the winner.
  4. DOM Manipulation:

    • Dynamically updating the HTML content using textContent.

View on GitHub

Top comments (0)