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

<head>
    <meta charset="UTF-8">
    <meta name="keywords"    content="Game 21">
    <meta name="description" content="
      21 is a two player game, the game is played by choosing a number
      (1, 2, or 3) to be added to the running total. The game is won by
      the player whose chosen number causes the running total to reach
      exactly 21. The running total starts at zero.
    ">
    <!--DCMI metadata (Dublin Core Metadata Initiative)-->
    <meta name="dc.publisher" content="Rosseta Code">
    <meta name="dc.date"      content="2020-07-23">
    <meta name="dc.created"   content="2020-07-23">
    <meta name="dc.modified"  content="2020-07-30">
    <title>
        21 Game
    </title>
    <!-- Remove the line below in the final/production version. -->
    <meta http-equiv="cache-control" content="no-cache">

    <style>
      .ui div   { width: 50%; display: inline-flex; justify-content: flex-end; }
      div.total { margin-bottom: 1ch; }
      label     { padding-right: 1ch; }
      button + button { margin-left: 1em; }
    </style>
</head>

<body>
  <h1>
    21 Game in ECMA Script (Java Script)
  </h1>

  <p>
    21 is a two player game, the game is played by choosing a number
    (1, 2, or 3) to be added to the running total. The game is won by
    the player whose chosen number causes the running total to reach
    exactly 21. The running total starts at zero.
  </p>

  <p><span id="first"></span> Use buttons to play.</p>

  <div class="ui">
    <div class="total">
      <label for="human">human last choice:</label>
      <input type="text" id="human" readonly>
    </div>
    <div class="total">
      <label for="AI">AI last choice:</label>
      <input type="text" id="AI" readonly>
    </div>
    <div class="total">
      <label for="runningTotalText">running total:</label>
      <input type="text" id="runningTotalText" readonly>
    </div>
    <div class="buttons">
      <button onclick="choice(1);" id="choice1"> one   </button>
      <button onclick="choice(2);" id="choice2"> two   </button>
      <button onclick="choice(3);" id="choice3"> three </button>
      <button onclick="restart();"> restart </button>
    </div>
  </div>

  <p id="message"></p>

  <noscript>
    No script, no fun. Turn on Javascript on.
  </noscript>

  <script>