postazure/app.css

## app.css
@-webkit-keyframes wiggle {
    from {-webkit-transform: rotateZ(10deg);}
    50% {-webkit-transform: rotateZ(-10deg);}
    to {-webkit-transform: rotateZ(10deg);}
}

#rock{
  position: absolute;
  top: 200px;
  width: 200px;
  height: 200px;
  cursor: pointer;
  margin: 3px;
  background: url("http://megaicons.net/static/img/icons_sizes/8/178/512/rock-paper-scissors-rock-icon.png");
  background-size: 80%;
  background-repeat: no-repeat;
  border-radius: 25px;
  display: inline-block;
  color: rgba(0,0,0,0);
  margin-left: 400px;
}

#rock:hover {
  -webkit-animation-name: wiggle;
  -webkit-animation-duration: .7s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease;
}

#rock:active {
  background-image:url("")
}

#scissors{
  position: absolute;
  left: 200px;
  width: 200px;
  height: 200px;
  cursor: pointer;
  margin: 3px;
  background: url("https://cdn2.iconfinder.com/data/icons/windows-8-metro-style/512/barber_scissors.png");
  background-size: 80%;
  background-repeat: no-repeat;
  border-radius: 25px;
  display: inline-block;
  color: rgba(0,0,0,0);
  margin-left: 400px;
}

#scissors:hover {
  -webkit-animation-name: wiggle;
  -webkit-animation-duration: .7s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease;
}

#scissors:active {
  background-image:url("")
}

#paper{
  position: absolute;
  top: 200px;
  left: 400px;
  width: 200px;
  height: 200px;
  cursor: pointer;
  margin: 3px;
  background: url("https://cdn2.iconfinder.com/data/icons/windows-8-metro-style/512/paper.png");
  background-size: 80%;
  background-repeat: no-repeat;
  border-radius: 25px;
  display: inline-block;
  color: rgba(0,0,0,0);
  margin-left: 400px;
}

#paper:hover {
  -webkit-animation-name: wiggle;
  -webkit-animation-duration: .7s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease;
}

#paper:active {
  background-image:url("")
}

#results {
  height: 400px;
  margin-left: -100px;
  text-align:center;

}

## app.js
$(document).ready(function () {
  var ruler = ["ROCK", "PAPER", "SCISSORS"];

  $("#game").on("click", ".btn", function () {

    var playerSelection = ruler.indexOf($(this).text())
    var computerSelection = Math.floor(Math.random()*3);
    var winner = determineWinner(playerSelection, computerSelection);

    $("#results").empty();
    if (winner === "Player") {
      $("#results").append("<h3>Congratulations, "+ winner +" is the winner.</h3>" )
    }else if (winner === "Computer") {
      $("#results").append("<h3>Sorry, "+ winner +" is the winner.</h3>" )
    }else {
      $("#results").append("<h3>Game ends in a Tie.</h3>" )
    }

    $("#results").append("<p>Player: "+ ruler[playerSelection] +"</p>")
    $("#results").append("<p>Computer: "+ ruler[computerSelection] +"</p>")
    setTimeout(function () {
      $("#results").empty();
      $("#results").append(
        "<h3>Make a Selection to Play</h3>\
        <p>\
          Rock beats Scissors, Paper beats Rock\
        </p>\
        <p>\
          Scissors beats Paper\
        </p>"
      );

    }, 2000)
  })
})

function determineWinner(playerSelection, computerSelection) {
  var winner;
  if ((computerSelection === 2 && playerSelection === 0) || (playerSelection > computerSelection)) {
    winner = "Player";
  }else if ((playerSelection === 2 && computerSelection === 0) || (computerSelection > playerSelection)) {
    winner = "Computer";
  }else{
    winner = "TIE";
  }

  return winner;
}

## index.html
<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <link rel="stylesheet" href="app.css" media="screen" title="no title" charset="utf-8">
    <script src="https://code.jquery.com/jquery-2.1.3.js" charset="utf-8"></script>
    <script src="app.js"></script>
  </head>
  <body>
      <div id="results">
        <h3>Make a Selection to Play</h3>
        <p>
          Rock beats Scissors, Paper beats Rock
        </p>
        <p>
          Scissors beats Paper
        </p>
      </div>

      <div id="game">
        <div id="rock" class="btn">ROCK</div>
        <div id="paper" class="btn">PAPER</div>
        <div id="scissors" class="btn">SCISSORS</div>
      </div>
  </body>
</html>
	@-webkit-keyframes wiggle {
	from {-webkit-transform: rotateZ(10deg);}
	50% {-webkit-transform: rotateZ(-10deg);}
	to {-webkit-transform: rotateZ(10deg);}
	}

	#rock{
	position: absolute;
	top: 200px;
	width: 200px;
	height: 200px;
	cursor: pointer;
	margin: 3px;
	background: url("http://megaicons.net/static/img/icons_sizes/8/178/512/rock-paper-scissors-rock-icon.png");
	background-size: 80%;
	background-repeat: no-repeat;
	border-radius: 25px;
	display: inline-block;
	color: rgba(0,0,0,0);
	margin-left: 400px;
	}

	#rock:hover {
	-webkit-animation-name: wiggle;
	-webkit-animation-duration: .7s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: ease;
	}

	#rock:active {
	background-image:url("")
	}

	#scissors{
	position: absolute;
	left: 200px;
	width: 200px;
	height: 200px;
	cursor: pointer;
	margin: 3px;
	background: url("https://cdn2.iconfinder.com/data/icons/windows-8-metro-style/512/barber_scissors.png");
	background-size: 80%;
	background-repeat: no-repeat;
	border-radius: 25px;
	display: inline-block;
	color: rgba(0,0,0,0);
	margin-left: 400px;
	}

	#scissors:hover {
	-webkit-animation-name: wiggle;
	-webkit-animation-duration: .7s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: ease;
	}

	#scissors:active {
	background-image:url("")
	}

	#paper{
	position: absolute;
	top: 200px;
	left: 400px;
	width: 200px;
	height: 200px;
	cursor: pointer;
	margin: 3px;
	background: url("https://cdn2.iconfinder.com/data/icons/windows-8-metro-style/512/paper.png");
	background-size: 80%;
	background-repeat: no-repeat;
	border-radius: 25px;
	display: inline-block;
	color: rgba(0,0,0,0);
	margin-left: 400px;
	}

	#paper:hover {
	-webkit-animation-name: wiggle;
	-webkit-animation-duration: .7s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: ease;
	}

	#paper:active {
	background-image:url("")
	}

	#results {
	height: 400px;
	margin-left: -100px;
	text-align:center;

	}
	$(document).ready(function () {
	var ruler = ["ROCK", "PAPER", "SCISSORS"];

	$("#game").on("click", ".btn", function () {

	var playerSelection = ruler.indexOf($(this).text())
	var computerSelection = Math.floor(Math.random()*3);
	var winner = determineWinner(playerSelection, computerSelection);

	$("#results").empty();
	if (winner === "Player") {
	$("#results").append("<h3>Congratulations, "+ winner +" is the winner.</h3>" )
	}else if (winner === "Computer") {
	$("#results").append("<h3>Sorry, "+ winner +" is the winner.</h3>" )
	}else {
	$("#results").append("<h3>Game ends in a Tie.</h3>" )
	}

	$("#results").append("<p>Player: "+ ruler[playerSelection] +"</p>")
	$("#results").append("<p>Computer: "+ ruler[computerSelection] +"</p>")
	setTimeout(function () {
	$("#results").empty();
	$("#results").append(
	"<h3>Make a Selection to Play</h3>\
	<p>\
	Rock beats Scissors, Paper beats Rock\
	</p>\
	<p>\
	Scissors beats Paper\
	</p>"
	);

	}, 2000)
	})
	})

	function determineWinner(playerSelection, computerSelection) {
	var winner;
	if ((computerSelection === 2 && playerSelection === 0) \|\| (playerSelection > computerSelection)) {
	winner = "Player";
	}else if ((playerSelection === 2 && computerSelection === 0) \|\| (computerSelection > playerSelection)) {
	winner = "Computer";
	}else{
	winner = "TIE";
	}

	return winner;
	}
	<!DOCTYPE html>
	<html>
	<head>
	<title></title>
	<link rel="stylesheet" href="app.css" media="screen" title="no title" charset="utf-8">
	<script src="https://code.jquery.com/jquery-2.1.3.js" charset="utf-8"></script>
	<script src="app.js"></script>
	</head>
	<body>
	<div id="results">
	<h3>Make a Selection to Play</h3>
	<p>
	Rock beats Scissors, Paper beats Rock
	</p>
	<p>
	Scissors beats Paper
	</p>
	</div>

	<div id="game">
	<div id="rock" class="btn">ROCK</div>
	<div id="paper" class="btn">PAPER</div>
	<div id="scissors" class="btn">SCISSORS</div>
	</div>
	</body>
	</html>