DEV Community

Cover image for 🟨 Daily Code 38 | The Document Object Model (DOM) 3 (πŸͺ¨πŸ“ƒβœ‚️)
Gregor Schafroth
Gregor Schafroth

Posted on

🟨 Daily Code 38 | The Document Object Model (DOM) 3 (πŸͺ¨πŸ“ƒβœ‚️)

Alright, as promised yesterday I’m now going to use my newly learned JavaScript to improve the Rock Paper Scissors game from a few days ago. Lets do it!

My Code

<!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="
        playGame('rock')
">Rock</button>
    <button onclick="
        playGame('paper');
">Paper</button>
    <button onclick="
        playGame('scissors');
">Scissors</button>

    <p class="js-result">_</p>
    <p class="js-moves">_</p>
    <p class="js-score"></p>

    <button onclick="
        score.wins = 0;
        score.losses = 0;
        score.ties = 0;
        localStorage.removeItem('score');
        document.querySelector('.js-result').innerHTML = '_'
        document.querySelector('.js-moves').innerHTML = '_'
        updateScoreElement();
    ">Reset Score</button>

    <script>
        let score = JSON.parse(localStorage.getItem('score')) || {
            wins: 0,
            losses: 0,
            ties: 0
        };

        updateScoreElement();

        function playGame(playerMove) {
            const computerMove = pickComputerMove();

            let result = '';

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

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

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

            if (result === 'You win.') {
                score.wins++;
            } else if (result === 'You lose.') {
                score.losses++;
            } else if (result === 'Tie.') {
                score.ties++;
            }

            localStorage.setItem('score', JSON.stringify(score));

            updateResultElement(result);
            updateMovesElement(playerMove, computerMove);
            updateScoreElement();

        }

        function updateResultElement(result) {
            document.querySelector('.js-result')
                .innerHTML = `${result}`;
        }

        function updateMovesElement(playerMove, computerMove) {
            document.querySelector('.js-moves')
                .innerHTML = `You picked ${playerMove}. Computer picked ${computerMove}.`;
        }

        function updateScoreElement() {
            document.querySelector('.js-score')
                .innerHTML = `Wins: ${score.wins}, Losses: ${score.losses}, Ties: ${score.ties}`;
        }

        function pickComputerMove() {
            let computerMove = '';
            const randomNumber = Math.random();
            if (randomNumber >= 0 && randomNumber < 1 / 3) {
                computerMove = 'rock';
            } else if (randomNumber >= 1 / 3 && randomNumber < 2 / 3) {
                computerMove = 'paper';
            } else {
                computerMove = 'scissors';
            };

            return computerMove;
        }
    </script>
</body>

</html>
Enter fullscreen mode Exit fullscreen mode

This code gives me a strange feeling of satisfaction. Before using JS was so weird, and now I know the syntax to manipulate HTML. 😌😌😌 can’t wait to continue the course later today or tomorrow!

Image of Docusign

πŸ› οΈ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more

Top comments (0)

Billboard image

Create up to 10 Postgres Databases on Neon's free plan.

If you're starting a new project, Neon has got your databases covered. No credit cards. No trials. No getting in your way.

Try Neon for Free β†’

πŸ‘‹ Kindness is contagious

Please leave a ❀️ or a friendly comment on this post if you found it helpful!

Okay