Rock Paper Scissors

<div>
  <label>Select your move:</label>
  <select id="move">
    <option value="rock">Rock</option>
    <option value="paper">Paper</option>
    <option value="scissors">Scissors</option>
  </select>
</div>

<div>
  <label>Opponent's move:</label>
  <input type="text" id="opponent-move" readonly>
</div>

<div>
  <label>Result:</label>
  <input type="text" id="result" readonly>
</div>

<script>
  const moves = ['rock', 'paper', 'scissors'];
  const moveElement = document.querySelector('#move');
  const opponentMoveElement = document.querySelector('#opponent-move');
  const resultElement = document.querySelector('#result');

  moveElement.addEventListener('change', () => {
    const playerMove = moveElement.value;
    const opponentMove = moves[Math.floor(Math.random() * moves.length)];

    opponentMoveElement.value = opponentMove;

    if (playerMove === opponentMove) {
      resultElement.value = 'It's a tie!';
    } else if (
      (playerMove === 'rock' && opponentMove === 'scissors') ||
      (playerMove === 'paper' && opponentMove === 'rock') ||
      (playerMove === 'scissors' && opponentMove === 'paper')
    ) {
      resultElement.value = 'You win!';
    } else {
      resultElement.value = 'You lose!';
    }
  });
</script>