<h1>Rock, Paper, or Scissors?</h1>

<p>A steam-powered bot has challenged you to a game. <strong>Rock</strong> beats <strong>scissors</strong>, <strong>scissors</strong> beats <strong>paper</strong>, and <strong>paper</strong> beats <strong>rock</strong>.</p>

<div class="scoreboard">
        <td id="humanScore">0</td>
        <td id="computerScore">0</td>

<h2>Choose Wisely</h2>

<button id="rock">Rock</button>

<button id="paper">Paper</button>

<button id="scissors">Scissors</button>

<div id="status"></div>

body {
  font-family: monospace;
  font-size: 20px;
  text-align: center;
  background: black;
  color: lime;
  margin: 3em;

strong {
  text-decoration: underline;

button {
  background: lime;
  color: black;
  border: none;
  padding: 10px 15px;
  font-size: 1.2em;
  font-family: monospace;
  font-weight: bold;
button:active {
  background: green;

.scoreboard {
  width: 14em;
  margin: auto;
  border: 1px solid lime;
.scoreboard h2 {
  border-bottom: 1px solid lime;
  margin: 0;
  padding: 10px;
.scoreboard table {
  margin: 10px auto;
  width: 100%;
  border-collapse: collapse;
.scoreboard th, .scoreboard td {
  text-align: center;
.scoreboard td {
  font-size: 3em;
  padding: 0 20px;

#status {
  margin-top: 20px;

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.