
Frontend Forever App
We have a mobile app for you to download and use. And you can unlock many features in the app.
Get it nowIntall Later
We have a mobile app for you to download and use. And you can unlock many features in the app.
Get it nowxxxxxxxxxx
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<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">
<h2>Scoreboard</h2>
<table>
<tbody>
<tr>
<td id="humanScore">0</td>
<td id="computerScore">0</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>You</th>
<th>Bot</th>
</tr>
</tfoot>
</table>
</div>
<h2>Choose Wisely</h2>
<button id="rock">Rock</button>
<button id="paper">Paper</button>
<button id="scissors">Scissors</button>
<div id="status"></div>
</body>
</html>
xxxxxxxxxx
@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800);
*,
:after,
:before {
box-sizing: border-box;
padding: 0;
margin: 0;
}
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;
}
xxxxxxxxxx
console.log("Event Fired")
var humanScore = 0;
var computerScore = 0;
// document.getElementById('rock').onclick = playRock;
$("#rock").click(playRock);
document.getElementById('paper').onclick = playPaper;
document.getElementById('scissors').onclick = playScissors;
function playRock() {
play("rock");
}
function playPaper() {
play("paper");
}
function playScissors() {
play("scissors");
}
function play(humanPlay) {
var computerPlay = getComputerPlay();
document.getElementById('status').innerHTML = "<p>You played <strong>" + humanPlay + "</strong>. The bot played <strong>" + computerPlay + "</strong>.</p>";
if(humanPlay == 'rock') {
if(computerPlay == 'rock') {
document.getElementById('status').innerHTML += "<p>You tied. :|</p>";
} else if (computerPlay == 'paper') {
document.getElementById('status').innerHTML += "<p>You lose. :(</p>";
computerScore++;
} else if (computerPlay == 'scissors') {
document.getElementById('status').innerHTML += "<p>You win! :)</p>";
humanScore++;
}
} else if (humanPlay == 'paper') {
if(computerPlay == 'rock') {
document.getElementById('status').innerHTML += "<p>You win! :)</p>";
humanScore++;
} else if (computerPlay == 'paper') {
document.getElementById('status').innerHTML += "<p>You tied. :|</p>";
} else if (computerPlay == 'scissors') {
document.getElementById('status').innerHTML += "<p>You lose. :(</p>";
computerScore++;
}
} else if (humanPlay == 'scissors') {
if(computerPlay == 'rock') {
document.getElementById('status').innerHTML += "<p>You lose. :(</p>";
computerScore++;
} else if (computerPlay == 'paper') {
document.getElementById('status').innerHTML += "<p>You win! :)</p>";
humanScore++;
} else if (computerPlay == 'scissors') {
document.getElementById('status').innerHTML += "<p>You tied. :|</p>";
}
}
document.getElementById('humanScore').innerHTML = humanScore;
document.getElementById('computerScore').innerHTML = computerScore;
}
function getComputerPlay() {
var plays = ['rock', 'paper', 'scissors'];
var play = plays[Math.floor(Math.random() * plays.length)];
return play;
}