CSS
<style>
body {
text-align: center;
margin: 0;
background: black;
}
.start-button-div {
text-align: center;
margin-bottom: 30px;
}
.start-button {
color: white;
background-color: black;
padding: 10px;
cursor: pointer;
border: solid white 2px;
width: max-content;
height: auto;
}
.rps-button {
font-size: 100px;
color: white;
padding: 0 30px;
text-align: center;
background: black;
margin: 10px;
border: white solid 2px;
}
#rock button {
background-color: #ffb3ff;
color: black;
}
#paper button {
background-color: #cbffaf;
color: black;
}
#scissors button {
background-color: #b5bdff;
color: black;
}
#hands p {
display: inline-block;
}
#hands {
text-align: center;
display: grid;
grid-template-columns: auto auto auto;
}
#game-buttons {
text-align: center;
margin: 0 0 0 0;
padding: 0;
background-color: #1f479d;
height: 50px;
}
.game-button {
height: 150px;
width: 150px;
}
button {
position: relative;
top: 14px;
}
#result {
margin-top: 50px;
}
#random-hand-picked,
#selected-hand-picked {
font-size: 100px;
margin-top: 50px;
color: white;
margin-bottom: 50px;
}
.challenge-container {
display: grid;
grid-template-columns: 1fr max-content 1fr;
text-align: center;
align-items: center;
}
</style>
HTML
<div class=”start-button-div”>
<button id=”startButton” class=”start-button”>Start Game</button>
</div>
<h2 id=”result”></h2>
<div id=”hands”>
<p id=”rock”><button class=”rps-button”><img class=’game-button’ src=”{image url}” /></button></p>
<p id=”paper”><button class=”rps-button”><img class=’game-button’ src=”{image url}” /></button></p>
<p id=”scissors”><button class=”rps-button”><img class=’game-button’ src=”{image url}” /></button></p>
</div>
<div class=”challenge-container”>
<span>
<p id=”selected-hand-picked”></p>
<h2>You</h2>
</span>
<h2>VS</h2>
<span>
<p id=”random-hand-picked”></p>
<h2>Challenger</h2>
</span>
</div>
JavaScript
<script>
var rock = document.querySelector(“#rock”);
var paper = document.querySelector(“#paper”);
var scissors = document.querySelector(“#scissors”);
var randomHandPicked = document.querySelector(“#random-hand-picked”);
var selectedHandPicked = document.querySelector(“#selected-hand-picked”);
var result = document.querySelector(“#result”);
var randomHand = 0;
var win = 0;
var lose = 0;
var tie = 0;
var startButton = document.querySelector(“#startButton”);
var start = true;
startButton.addEventListener(“click”, function () {
if (start) {
this.textContent = “End Game”;
start = false;
} else {
this.textContent = “Start Game”;
start = true;
alert(“Wins: ” + win + ” | Losses: ” + lose + ” | Ties: ” + tie);
win = 0;
lose = 0;
tie = 0;
}
});
rock.addEventListener(“click”, function () {
startButton.textContent = “End Game”;
start = false;
randomHandOutput();
if (randomHand === 0) {
result.textContent = “It’s a Tie!”;
tie += 1;
} else if (randomHand === 1) {
result.textContent = “Paper beats Rock. You Lose!”;
lose += 1;
} else {
result.textContent = “Rock beats Scissors. You Win!”;
win += 1;
}
selectedHandPicked.innerHTML = “<img class=’game-button’ src='{image url}’/>”;
});
paper.addEventListener(“click”, function () {
startButton.textContent = “End Game”;
start = false;
randomHandOutput();
if (randomHand === 0) {
result.textContent = “Paper beats Rock. You Win!”;
win += 1;
} else if (randomHand === 1) {
result.textContent = “It’s a Tie!”;
tie += 1;
} else {
result.textContent = “Scissors beats Paper. You Lose!”;
lose += 1;
}
selectedHandPicked.innerHTML = “<img class=’game-button’ src='{image url}>”;
});
scissors.addEventListener(“click”, function () {
startButton.textContent = “End Game”;
start = false;
randomHandOutput();
if (randomHand === 0) {
result.textContent = “Rock beats Scissors. You Lose!”;
lose += 1;
} else if (randomHand === 1) {
result.textContent = “Scissors beats Paper. You Win!”;
win += 1;
} else {
result.textContent = “It’s a Tie!”;
tie += 1;
}
selectedHandPicked.innerHTML = “<img class=’game-button’ src='{image url}’/>”;
});
function randomHandOutput() {
randomHand = Math.floor(Math.random() * 3);
if (randomHand == 0) {
randomHandPicked.innerHTML = “<img class=’game-button’ src='{image url}’/>”;
} else if (randomHand == 1) {
randomHandPicked.innerHTML = “<img class=’game-button’ src='{image url}’/>”;
} else {
randomHandPicked.innerHTML = “<img class=’game-button’ src='{image url}’/>”;
}
}
</script>
