-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
105 lines (95 loc) · 4.13 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
<!DOCTYPE html>
<html>
<head>
<title>Rock Paper Scissors</title>
</head>
<body>
<div class="result">
<p class="resultDisplay">Press a Button to Start!</p>
</div>
<div class="buttons">
<button class="button rock">Rock</button>
<button class="button paper">Paper</button>
<button class="button scissors">Scissors</button>
</div>
<div class="scoreboard">
<p class="score">0 : 0</p>
</div>
<div class="replayDiv">
<button class="replay">Replay</button>
</div>
<script>
const possiblePlays = ["Rock", "Paper", "Scissors"];
let playerScore = 0;
let computerScore = 0;
function computerPlay() {
return possiblePlays[Math.floor(Math.random() * possiblePlays.length)];
}
function updateScore() {
const div = document.querySelector('.scoreboard');
div.firstElementChild.textContent = `${playerScore} : ${computerScore}`;
}
function printAndRecordResult(result) {
const p = document.querySelector('.resultDisplay');
let textContent;
if (result.includes("Win")) {
playerScore++;
textContent = (playerScore == 5) ? "You Win!" : result;
} else if (result.includes("Lose")) {
computerScore++;
textContent = (computerScore == 5) ? "You Lose..." : result;
} else {
textContent = result;
}
p.textContent = textContent;
updateScore();
}
function callPlayRound(e) {
if (playerScore < 5 && computerScore < 5) {
printAndRecordResult(playRound(e.target.classList[1], computerPlay()));
}
}
function playRound(playerSelection, computerSelection) {
const caseEditedPlayerSelection = playerSelection.charAt(0).toUpperCase() + playerSelection.slice(1).toLowerCase(); // change so only first letter is uppercase
if (caseEditedPlayerSelection == computerSelection) {
return `Tie! Both Sides Played ${computerSelection}`;
} else if (caseEditedPlayerSelection == "Rock") {
if (computerSelection == "Paper") {
return "You Lose! Paper beats Rock";
} else {
return "You Win! Rock beats Scissors";
}
} else if (caseEditedPlayerSelection == "Scissors") {
if (computerSelection == "Rock") {
return "You Lose! Rock beats Scissors";
} else {
return "You Win! Scissors beats Paper";
}
} else if (caseEditedPlayerSelection == "Paper") {
if (computerSelection == "Scissors") {
return "You Lose! Scissors beats Paper";
} else {
return "You Win! Paper beats Rock";
}
} else {
return "This is an invalid play! Please type again";
}
}
function reset() {
playerScore = 0;
computerScore = 0;
const score = document.querySelector('.scoreboard');
const result = document.querySelector('.resultDisplay');
score.firstElementChild.textContent = '0 : 0';
result.textContent = 'Press a Button to Start!';
console.log('hello');
}
const buttons = document.querySelectorAll('.button');
buttons.forEach((button) => {
button.addEventListener('click', callPlayRound)
});
const replayButton = document.querySelector('.replay');
replayButton.addEventListener('click', reset);
</script>
</body>
</html>