🟨 JavaScript 4 | 🪨 Rock 📄 Paper  ✂️ Scissors
Published: 2024-01-08 07:30:31

Yesterday I went through the first 4 hours of [this really nice free JavaScript course by SuperSimpleDev](https://youtu.be/SBmSRK3feww?si=esOj-L5BPB6XFZ3m) and today I want to share one exercise I found really interesting: Rock Paper Scissors. As always below is my code :) 

# Exercise: Rock Paper Scissors

**Objective:** Create a web page where a user can play Rock Paper Scissors against the computer.

**Requirements:**

1. **HTML Structure:**
    - Create an HTML file with the basic structure (doctype, html, head, and body tags).
    - Inside the **`body`**, include a title for your game using a paragraph or heading tag (e.g., **`<h1>Rock Paper Scissors</h1>`**).
    - Add three buttons labeled "Rock", "Paper", and "Scissors".
2. **JavaScript Logic:**
    - For each button, write an **`onclick`** event handler that contains the game logic.
    - The game logic should:
        - Generate a random choice for the computer (rock, paper, or scissors).
        - Compare the computer's choice with the user's choice (based on which button they clicked).
        - Determine the winner and display the result.
3. **Implementing the Game Logic:**
    - Use **`Math.random()`** to generate the computer's choice.
    - Use **`if...else`** statements to determine the winner.
    - Log the computer's choice and the result of the game to the console.
4. **Customization (Optional):**
    - Feel free to add custom styles with CSS or additional features to enhance the user experience.

# My Code

What I find so interesting about this is how ‘mathy’ it gets to generate a random play by the computer. In Python I don’t need to get into math at all.

I also just keep forgetting to put semicolons all the time because I never had to place them in Python. But I’m getting more used to them already now :) 

```jsx
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rock Paper Scissors</title>
</head>

<body>
    <p>Rock Paper Scissors</p>
    <button onclick="
        const randomNumber = Math.random();

        let computerMove = ''

        if (randomNumber >= 0 && randomNumber < 1 /3 ) {
            computerMove = 'rock';
        } else if (randomNumber >= 1 / 3 && randomNumber < 2 / 3 ) {
            computerMove = 'paper';
        } else {
            computerMove = 'scissors';
        };

        console.log(computerMove);

        let result = '';

        if (computerMove === 'rock') {
            result = 'Tie.';
        } else if (computerMove === 'paper') {
            result = 'You Lose';
        } else if (computerMove === 'scissors') {
            result = 'You Win';
        }

        console.log(`You picked rock. Computer picked ${computerMove}. ${result}`)

    ">Rock</button>
    <button onclick="
    const randomNumber = Math.random();

    let computerMove = ''

    if (randomNumber >= 0 && randomNumber < 1 /3 ) {
        computerMove = 'rock';
    } else if (randomNumber >= 1 / 3 && randomNumber < 2 / 3 ) {
        computerMove = 'paper';
    } else {
        computerMove = 'scissors';
    };

    console.log(computerMove);

    let result = '';

    if (computerMove === 'rock') {
        result = 'You win.';
    } else if (computerMove === 'paper') {
        result = 'Tie';
    } else if (computerMove === 'scissors') {
        result = 'You lose';
    }

    console.log(`You picked paper. Computer picked ${computerMove}. ${result}`)

">Paper</button>
    <button onclick="
    const randomNumber = Math.random();

    let computerMove = ''

    if (randomNumber >= 0 && randomNumber < 1 /3 ) {
        computerMove = 'rock';
    } else if (randomNumber >= 1 / 3 && randomNumber < 2 / 3 ) {
        computerMove = 'paper';
    } else {
        computerMove = 'scissors';
    };

    console.log(computerMove);

    let result = '';

    if (computerMove === 'rock') {
        result = 'You lose.';
    } else if (computerMove === 'paper') {
        result = 'You win';
    } else if (computerMove === 'scissors') {
        result = 'Tie';
    }

    console.log(`You picked scissors. Computer picked ${computerMove}. ${result}`)

">Scissors</button>
    <script>

    </script>
</body>

</html>
```