Rock Paper Scissors

Choose your item:

Results:

<script>
    const form = document.querySelector('form');
    const result = document.querySelector('#result');
    const choices = ['rock', 'paper', 'scissors'];

    form.addEventListener('submit', function(e) {
        e.preventDefault();

        const choice = document.querySelector('input[name="choice"]:checked').value;
        const computerChoice = choices[Math.floor(Math.random() * choices.length)];

        let outcome;

        if (choice === computerChoice) {
            outcome = 'Tie!';
        } else if ((choice === 'rock' && computerChoice === 'scissors') ||
            (choice === 'paper' && computerChoice === 'rock') ||
            (choice === 'scissors' && computerChoice === 'paper')) {
            outcome = 'You win!';
        } else {
            outcome = 'You lose!';
        }

        result.innerHTML = `You chose ${choice}, the computer chose ${computerChoice}. ${outcome}`;
    });
</script>